https://hitz.eu.org/posts/Recent content in Posts on 似水年华Hugo -- gohugo.iozh-cnFri, 14 Aug 2026 18:07:37 +0800https://hitz.eu.org/posts/2026-08-11-hugo-stack-%E9%AD%94%E6%94%B9%E7%BE%8E%E5%8C%96/Tue, 11 Aug 2026 15:41:00 +0800https://hitz.eu.org/posts/2026-08-11-hugo-stack-%E9%AD%94%E6%94%B9%E7%BE%8E%E5%8C%96/<img src="https://picsum.photos/800/600.webp?random=b9124bce" alt="Featured image of post Hugo Stack 魔改美化" /><h2 id="全局"><a href="#%e5%85%a8%e5%b1%80" class="header-anchor"></a>全局 </h2><h3 id="零碎玩意"><a href="#%e9%9b%b6%e7%a2%8e%e7%8e%a9%e6%84%8f" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e9%9b%b6%e7%a2%8e%e7%8e%a9%e6%84%8f" target="_blank" rel="noopener" ></a>零碎玩意 </h3><p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码：</p> <h3 id="菜单栏圆角"><a href="#%e8%8f%9c%e5%8d%95%e6%a0%8f%e5%9c%86%e8%a7%92" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e8%8f%9c%e5%8d%95%e6%a0%8f%e5%9c%86%e8%a7%92" target="_blank" rel="noopener" ></a>菜单栏圆角 </h3><p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码：</p> <h3 id="滚动条"><a href="#%e6%bb%9a%e5%8a%a8%e6%9d%a1" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e6%bb%9a%e5%8a%a8%e6%9d%a1" target="_blank" rel="noopener" ></a>滚动条 </h3><p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码：</p> <h3 id="加载进度条"><a href="#%e5%8a%a0%e8%bd%bd%e8%bf%9b%e5%ba%a6%e6%9d%a1" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e5%8a%a0%e8%bd%bd%e8%bf%9b%e5%ba%a6%e6%9d%a1" target="_blank" rel="noopener" ></a>加载进度条 </h3><p>在 <code>/layouts/partials/footer/custom.html</code> 中加入以下代码：</p> <h3 id="深色模式开关图标"><a href="#%e6%b7%b1%e8%89%b2%e6%a8%a1%e5%bc%8f%e5%bc%80%e5%85%b3%e5%9b%be%e6%a0%87" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e6%b7%b1%e8%89%b2%e6%a8%a1%e5%bc%8f%e5%bc%80%e5%85%b3%e5%9b%be%e6%a0%87" target="_blank" rel="noopener" ></a>深色模式开关图标 </h3><p>不太喜欢默认图标，默认图标不够直观，当然你可以不换 我选取了 <a class="link" href="https://tablericons.com/" target="_blank" rel="noopener" >Tabler Icons</a> 中的 <code>sun-high</code> 和 <code>moon-stars</code> 这两个图标 在 <code>/assets/scss/partials/sidebar.scss</code> 第 154~180 行中将图标名进行修改，最终效果：</p> <p>在 <code>/layouts/partials/sidebar/left.html</code> 第 91~97 行中将图标名进行修改，最终效果：</p> <h3 id="修改布局"><a href="#%e4%bf%ae%e6%94%b9%e5%b8%83%e5%b1%80" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e4%bf%ae%e6%94%b9%e5%b8%83%e5%b1%80" target="_blank" rel="noopener" ></a>修改布局 </h3><p>在 <code>/assets/scss/grid.scss</code> 中修改 <code>left-sidebar</code> 和 <code>right-sidebar</code> 的描述：</p> <p>把正文的占比改到了 70%, 原来的只有 50% 左右</p> <h2 id="页面"><a href="#%e9%a1%b5%e9%9d%a2" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e9%a1%b5%e9%9d%a2" target="_blank" rel="noopener" ></a>页面 </h2><h3 id="归档"><a href="#%e5%bd%92%e6%a1%a3" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e5%bd%92%e6%a1%a3" target="_blank" rel="noopener" ></a>归档 </h3><h4 id="双栏"><a href="#%e5%8f%8c%e6%a0%8f" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e5%8f%8c%e6%a0%8f" target="_blank" rel="noopener" ></a>双栏 </h4><p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码：</p> <h4 id="卡片缩放动画"><a href="#%e5%8d%a1%e7%89%87%e7%bc%a9%e6%94%be%e5%8a%a8%e7%94%bb" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e5%8d%a1%e7%89%87%e7%bc%a9%e6%94%be%e5%8a%a8%e7%94%bb" target="_blank" rel="noopener" ></a>卡片缩放动画 </h4><p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码：</p> <h3 id="友链三栏"><a href="#%e5%8f%8b%e9%93%be%e4%b8%89%e6%a0%8f" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e5%8f%8b%e9%93%be%e4%b8%89%e6%a0%8f" target="_blank" rel="noopener" ></a>友链三栏 </h3><p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码：</p> <h3 id="首页"><a href="#%e9%a6%96%e9%a1%b5" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e9%a6%96%e9%a1%b5" target="_blank" rel="noopener" ></a>首页 </h3><h4 id="布局"><a href="#%e5%b8%83%e5%b1%80" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e5%b8%83%e5%b1%80" target="_blank" rel="noopener" ></a>布局 </h4><p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码：</p> <h4 id="右侧导航栏动画"><a href="#%e5%8f%b3%e4%be%a7%e5%af%bc%e8%88%aa%e6%a0%8f%e5%8a%a8%e7%94%bb" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e5%8f%b3%e4%be%a7%e5%af%bc%e8%88%aa%e6%a0%8f%e5%8a%a8%e7%94%bb" target="_blank" rel="noopener" ></a>右侧导航栏动画 </h4><p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码：</p> <h2 id="细节"><a href="#%e7%bb%86%e8%8a%82" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e7%bb%86%e8%8a%82" target="_blank" rel="noopener" ></a>细节 </h2><h3 id="首页欢迎横幅"><a href="#%e9%a6%96%e9%a1%b5%e6%ac%a2%e8%bf%8e%e6%a8%aa%e5%b9%85" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e9%a6%96%e9%a1%b5%e6%ac%a2%e8%bf%8e%e6%a8%aa%e5%b9%85" target="_blank" rel="noopener" ></a>首页欢迎横幅 </h3><p>在 <code>/layouts/index.html</code> 的 <code>&lt;section class=&quot;article-list&quot;&gt;</code> 前添加以下代码：</p> <p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码：</p> <h3 id="代码块"><a href="#%e4%bb%a3%e7%a0%81%e5%9d%97" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e4%bb%a3%e7%a0%81%e5%9d%97" target="_blank" rel="noopener" ></a>代码块 </h3><h4 id="macos-风格红绿灯图标"><a href="#macos-%e9%a3%8e%e6%a0%bc%e7%ba%a2%e7%bb%bf%e7%81%af%e5%9b%be%e6%a0%87" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#macos-%e9%a3%8e%e6%a0%bc%e7%ba%a2%e7%bb%bf%e7%81%af%e5%9b%be%e6%a0%87" target="_blank" rel="noopener" ></a>macOS 风格红绿灯图标 </h4><p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码：</p> <p>在 <code>static</code> 文件夹下新建 <code>code-header.svg</code>，写入以下代码：</p> <h4 id="显示语言和复制按钮"><a href="#%e6%98%be%e7%a4%ba%e8%af%ad%e8%a8%80%e5%92%8c%e5%a4%8d%e5%88%b6%e6%8c%89%e9%92%ae" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e6%98%be%e7%a4%ba%e8%af%ad%e8%a8%80%e5%92%8c%e5%a4%8d%e5%88%b6%e6%8c%89%e9%92%ae" target="_blank" rel="noopener" ></a>显示语言和复制按钮 </h4><p>在 <code>/assets/ts/custom.ts</code> 中加入以下代码：</p> <p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码（可按需自行修改）：</p> <h3 id="固定块的高度"><a href="#%e5%9b%ba%e5%ae%9a%e5%9d%97%e7%9a%84%e9%ab%98%e5%ba%a6" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e5%9b%ba%e5%ae%9a%e5%9d%97%e7%9a%84%e9%ab%98%e5%ba%a6" target="_blank" rel="noopener" ></a>固定块的高度 </h3><p>过长的内容影响观感，所以把 block 的高度限制在 20em，并隐藏滚动条 在 <code>/assets/scss/partials/layout/article.scss</code> 中进行如下修改（已隐藏无关片段）：</p> <h3 id="使图床链接的图片居中"><a href="#%e4%bd%bf%e5%9b%be%e5%ba%8a%e9%93%be%e6%8e%a5%e7%9a%84%e5%9b%be%e7%89%87%e5%b1%85%e4%b8%ad" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e4%bd%bf%e5%9b%be%e5%ba%8a%e9%93%be%e6%8e%a5%e7%9a%84%e5%9b%be%e7%89%87%e5%b1%85%e4%b8%ad" target="_blank" rel="noopener" ></a>使图床链接的图片居中 </h3><p>来自 <a class="link" href="https://thirdshire.com/hugo-stack-renovation-part-three/#%E4%BD%BF%E5%9B%BE%E5%BA%8A%E9%93%BE%E6%8E%A5%E7%9A%84%E5%9B%BE%E7%89%87%E5%B1%85%E4%B8%AD" target="_blank" rel="noopener" >Hugo Stack 主题装修笔记 Part 3 | 第三夏尔</a> 目前 Stack 默认只支持本地引用的图片居中，而在使用 url 图片链接时没有居中格式。在 <code>/assets/scss/partials/layout/article.scss</code> Line 256 处（同级任意位置）增加以下代码：</p> <h3 id="键盘样式"><a href="#%e9%94%ae%e7%9b%98%e6%a0%b7%e5%bc%8f" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e9%94%ae%e7%9b%98%e6%a0%b7%e5%bc%8f" target="_blank" rel="noopener" ></a>键盘样式 </h3><p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码：</p> <p>这样即可使用如下 Markdown 高级语法生成键盘样式： <code>&lt;kbd&gt;CTRL&lt;/kbd&gt; + &lt;kbd&gt;C&lt;/kbd&gt;</code> CTRL + C</p> <h3 id="头像旋转"><a href="#%e5%a4%b4%e5%83%8f%e6%97%8b%e8%bd%ac" class="header-anchor"></a><a class="link" href="https://www.xalaok.top/post/stack-modify/#%e5%a4%b4%e5%83%8f%e6%97%8b%e8%bd%ac" target="_blank" rel="noopener" ></a>头像旋转 </h3><p>在 <code>/assets/scss/custom.scss</code> 中加入以下代码：</p> <h2 id="鸣谢"><a href="#%e9%b8%a3%e8%b0%a2" class="header-anchor"></a>鸣谢 </h2> <blockquote> <p><a class="link" href="https://stack.jimmycai.com/" target="_blank" rel="noopener" >Stack 主题文档</a> <a class="link" href="https://log.vaaat.com/posts/bloglab/hugo-stack/modify-hugo/" target="_blank" rel="noopener" >Stack 主题的自定义 | L1nSn0w’s Log</a> <a class="link" href="https://lovir.cn/p/changes-in-my-blog/" target="_blank" rel="noopener" >博客最近的一些变化 | 小骆同学</a> <a class="link" href="https://lovir.cn/p/build-with-hugo02/" target="_blank" rel="noopener" >基于 Hugo 的网站搭建日志 02 | 小骆同学</a> <a class="link" href="https://blog.echosec.top/p/custom-hugo-theme-styles/" target="_blank" rel="noopener" >『Hugo』Hugo Styles | Echosec</a> <a class="link" href="https://thirdshire.com/hugo-stack-renovation-part-three/" target="_blank" rel="noopener" >Hugo Stack 主题装修笔记 Part 3 | 第三夏尔</a></p> </blockquote> <p>CopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopy<a class="link" href="https://www.xalaok.top/tags/hugo/" target="_blank" rel="noopener" >Hugo</a><a class="link" href="https://www.xalaok.top/tags/stack/" target="_blank" rel="noopener" >Stack</a><a class="link" href="https://www.xalaok.top/tags/%E9%AD%94%E6%94%B9/" target="_blank" rel="noopener" >魔改</a></p>https://hitz.eu.org/posts/welcome/Tue, 11 Aug 2026 10:00:00 +0800https://hitz.eu.org/posts/welcome/<img src="https://picsum.photos/800/600.webp?random=14c638b3" alt="Featured image of post 欢迎使用 Hugo + Stack 魔改版" /><h2 id="你好世界-"><a href="#%e4%bd%a0%e5%a5%bd%e4%b8%96%e7%95%8c-" class="header-anchor"></a>你好，世界 👋 </h2><p>这是使用 <strong>Hugo Extended + Stack 魔改版 + Decap CMS</strong> 搭建的博客示例文章。</p> <div class="note note-info"> <div class="note-body"> 你可以通过站点根路径 `/admin/` 使用 Decap CMS，在浏览器里直接撰写、编辑并发布文章，无需本地环境。 </div> </div> <h3 id="代码块"><a href="#%e4%bb%a3%e7%a0%81%e5%9d%97" class="header-anchor"></a>代码块 </h3><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># 本地预览（草稿也会显示）</span> </span></span><span class="line"><span class="cl">hugo server -D </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># 生成静态文件到 public/</span> </span></span><span class="line"><span class="cl">hugo --minify </span></span></code></pre></div><h3 id="剧透--折叠"><a href="#%e5%89%a7%e9%80%8f--%e6%8a%98%e5%8f%a0" class="header-anchor"></a>剧透 / 折叠 </h3> <details class="spoiler"> <summary>点击查看隐藏内容</summary> <div class="spoiler-body"> 这是一段被隐藏的内容，点击「点击查看隐藏内容」即可展开。适合放彩蛋或剧透。 </div> </details> <h3 id="友情链接"><a href="#%e5%8f%8b%e6%83%85%e9%93%be%e6%8e%a5" class="header-anchor"></a>友情链接 </h3><p>本站内置了 <code>links</code> 短代码，自动读取 <code>data/links.json</code> 渲染友链卡片：</p> <div class="friend-links"> <a class="friend-link" href="https://gohugo.io/" target="_blank" rel="noopener"> <span class="friend-link-avatar-wrap"> <img class="friend-link-avatar" src="https://hitz.eu.org/images/links/hugo.png" alt="Hugo 官网" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" /> <span class="friend-link-letter" style="display:none">H</span> </span> <div class="friend-link-info"> <span class="friend-link-title">Hugo 官网</span> <span class="friend-link-desc">The world&#39;s fastest framework for building websites.</span> </div> </a> <a class="friend-link" href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener"> <span class="friend-link-avatar-wrap"> <img class="friend-link-avatar" src="https://hitz.eu.org/images/links/stack.png" alt="Stack 主题" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" /> <span class="friend-link-letter" style="display:none">S</span> </span> <div class="friend-link-info"> <span class="friend-link-title">Stack 主题</span> <span class="friend-link-desc">Card-style Hugo theme designed for bloggers.</span> </div> </a> <a class="friend-link" href="https://decapcms.org/" target="_blank" rel="noopener"> <span class="friend-link-avatar-wrap"> <img class="friend-link-avatar" src="https://hitz.eu.org/images/links/decap.png" alt="Decap CMS" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" /> <span class="friend-link-letter" style="display:none">D</span> </span> <div class="friend-link-info"> <span class="friend-link-title">Decap CMS</span> <span class="friend-link-desc">A Git-based CMS for static site generators.</span> </div> </a> </div> <blockquote> <p>提示：修改 <code>data/links.json</code> 后，通过 Decap CMS 的「友情链接数据」集合即可在后台维护。</p> </blockquote>https://hitz.eu.org/posts/markdown-demo/Mon, 10 Aug 2026 20:00:00 +0800https://hitz.eu.org/posts/markdown-demo/<img src="https://picsum.photos/800/600.webp?random=efadee15" alt="Featured image of post Markdown 写作示例" /><h2 id="标题示例"><a href="#%e6%a0%87%e9%a2%98%e7%a4%ba%e4%be%8b" class="header-anchor"></a>标题示例 </h2><h3 id="三级标题"><a href="#%e4%b8%89%e7%ba%a7%e6%a0%87%e9%a2%98" class="header-anchor"></a>三级标题 </h3><ul> <li>列表项一</li> <li>列表项二 <ul> <li>嵌套项</li> </ul> </li> </ul> <ol> <li>有序一</li> <li>有序二</li> </ol> <blockquote> <p>引用块示例：Stack 魔改版对引用做了圆角与左侧色条美化。</p> </blockquote> <table> <thead> <tr> <th>表格</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>A</td> <td>内容 A</td> </tr> <tr> <td>B</td> <td>内容 B</td> </tr> </tbody> </table> <div class="note note-tip"> <div class="note-body"> 善用 Stack 魔改版的 `note` 短代码可以让提示信息更醒目。 支持类型：`note` / `tip` / `info` / `warning` / `danger`。 </div> </div> <p>行内代码如 <code>hugo new content posts/hello.md</code> 也会自动美化。</p>