https://www.leanku.com/tags/%E5%AE%9A%E5%88%B6/Recent content in 定制 on Leanku 的博客Hugozh-cnFri, 15 Nov 2024 00:00:00 +0000https://www.leanku.com/post/hugo-period/theme-customize/Fri, 15 Nov 2024 00:00:00 +0000https://www.leanku.com/post/hugo-period/theme-customize/<p>所有视觉属性都收敛在 <code>themes/period/assets/scss/_variables.scss</code> 这一个文件里——改颜色、 字号、间距、断点不需要碰任何规则文件。</p> <h2 id="设计令牌全量说明">设计令牌全量说明</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="ln"> 1</span><span class="cl"><span class="c1">// ---- Colors（对应设计文档 §1.2）---- </span></span></span><span class="line"><span class="ln"> 2</span><span class="cl"><span class="nv">$c-page</span><span class="o">:</span> <span class="mh">#EDEDED</span><span class="p">;</span> <span class="c1">// 页面背景 </span></span></span><span class="line"><span class="ln"> 3</span><span class="cl"><span class="nv">$c-text</span><span class="o">:</span> <span class="mh">#333333</span><span class="p">;</span> <span class="c1">// 正文 / 链接 / 标题 </span></span></span><span class="line"><span class="ln"> 4</span><span class="cl"><span class="nv">$c-text-hover</span><span class="o">:</span> <span class="mh">#757575</span><span class="p">;</span> <span class="c1">// 正文链接悬停 </span></span></span><span class="line"><span class="ln"> 5</span><span class="cl"><span class="nv">$c-header</span><span class="o">:</span> <span class="mh">#333333</span><span class="p">;</span> <span class="c1">// 页眉 / 页脚背景 </span></span></span><span class="line"><span class="ln"> 6</span><span class="cl"><span class="nv">$c-header-text</span><span class="o">:</span> <span class="mh">#FFFFFF</span><span class="p">;</span> <span class="c1">// 页眉 / 菜单文字 </span></span></span><span class="line"><span class="ln"> 7</span><span class="cl"><span class="nv">$c-header-text-hover</span><span class="o">:</span> <span class="mh">#D4D4D4</span><span class="p">;</span> <span class="c1">// tagline、页眉链接悬停 </span></span></span><span class="line"><span class="ln"> 8</span><span class="cl"><span class="nv">$c-credit</span><span class="o">:</span> <span class="mh">#242424</span><span class="p">;</span> <span class="c1">// credit 条 / 归档标题 / 菜单选中态 </span></span></span><span class="line"><span class="ln"> 9</span><span class="cl"><span class="nv">$c-card</span><span class="o">:</span> <span class="mh">#FFFFFF</span><span class="p">;</span> <span class="c1">// 卡片背景 </span></span></span><span class="line"><span class="ln">10</span><span class="cl"><span class="nv">$c-card-shadow</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="mi">58</span><span class="o">,</span><span class="mi">58</span><span class="o">,</span><span class="mi">58</span><span class="o">,</span><span class="mi">0</span><span class="mf">.2</span><span class="p">);</span> </span></span><span class="line"><span class="ln">11</span><span class="cl"><span class="nv">$c-input-bg</span><span class="o">:</span> <span class="mh">#F7F7F7</span><span class="p">;</span> <span class="c1">// 输入框 / 代码背景 </span></span></span><span class="line"><span class="ln">12</span><span class="cl"><span class="nv">$c-input-border</span><span class="o">:</span> <span class="mh">#D4D4D4</span><span class="p">;</span> <span class="c1">// 输入框描边 </span></span></span><span class="line"><span class="ln">13</span><span class="cl"><span class="nv">$c-muted</span><span class="o">:</span> <span class="mh">#666666</span><span class="p">;</span> <span class="c1">// 次要文字 </span></span></span><span class="line"><span class="ln">14</span><span class="cl"> </span></span><span class="line"><span class="ln">15</span><span class="cl"><span class="c1">// ---- Typography ---- </span></span></span><span class="line"><span class="ln">16</span><span class="cl"><span class="nv">$font-family</span><span class="o">:</span> <span class="s2">&#34;Roboto&#34;</span><span class="o">,</span> <span class="s2">&#34;Open Sans&#34;</span><span class="o">,</span> <span class="ni">sans-serif</span><span class="p">;</span> </span></span><span class="line"><span class="ln">17</span><span class="cl"><span class="nv">$font-light</span><span class="o">:</span> <span class="mi">300</span><span class="p">;</span> <span class="nv">$font-regular</span><span class="o">:</span> <span class="mi">400</span><span class="p">;</span> <span class="nv">$font-bold</span><span class="o">:</span> <span class="mi">700</span><span class="p">;</span> </span></span><span class="line"><span class="ln">18</span><span class="cl"><span class="nv">$fs-base</span><span class="o">:</span> <span class="mi">16</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="ln">19</span><span class="cl"><span class="nv">$lh-base</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.5</span><span class="p">;</span> </span></span><span class="line"><span class="ln">20</span><span class="cl"> </span></span><span class="line"><span class="ln">21</span><span class="cl"><span class="c1">// ---- Layout ---- </span></span></span><span class="line"><span class="ln">22</span><span class="cl"><span class="nv">$max-width</span><span class="o">:</span> <span class="mi">1300</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// 页面最大宽度 </span></span></span><span class="line"><span class="ln">23</span><span class="cl"><span class="nv">$header-overlap</span><span class="o">:</span> <span class="mi">5</span><span class="mf">.25</span><span class="kt">em</span><span class="p">;</span> <span class="c1">// 内容上叠压头高度（签名特征） </span></span></span><span class="line"><span class="ln">24</span><span class="cl"><span class="nv">$page-gutter</span><span class="o">:</span> <span class="mi">5</span><span class="mf">.5556</span><span class="kt">%</span><span class="p">;</span> <span class="c1">// 页面左右留白 </span></span></span><span class="line"><span class="ln">25</span><span class="cl"><span class="nv">$col-main</span><span class="o">:</span> <span class="mi">62</span><span class="mf">.5005</span><span class="kt">%</span><span class="p">;</span> <span class="nv">$col-side</span><span class="o">:</span> <span class="mi">34</span><span class="mf">.375275</span><span class="kt">%</span><span class="p">;</span> <span class="nv">$col-gap</span><span class="o">:</span> <span class="mi">3</span><span class="mf">.125025</span><span class="kt">%</span><span class="p">;</span> </span></span><span class="line"><span class="ln">26</span><span class="cl"> </span></span><span class="line"><span class="ln">27</span><span class="cl"><span class="c1">// ---- Breakpoints（对应原主题媒体查询）---- </span></span></span><span class="line"><span class="ln">28</span><span class="cl"><span class="nv">$bp-600</span><span class="o">:</span> <span class="mi">37</span><span class="mf">.5</span><span class="kt">em</span><span class="p">;</span> <span class="c1">// 600px </span></span></span><span class="line"><span class="ln">29</span><span class="cl"><span class="nv">$bp-900</span><span class="o">:</span> <span class="mi">56</span><span class="mf">.25</span><span class="kt">em</span><span class="p">;</span> <span class="c1">// 900px </span></span></span><span class="line"><span class="ln">30</span><span class="cl"><span class="nv">$bp-1100</span><span class="o">:</span> <span class="mi">68</span><span class="mf">.75</span><span class="kt">em</span><span class="p">;</span> <span class="c1">// 1100px </span></span></span></code></pre></div><h3 id="示例改成墨绿页眉">示例：改成墨绿页眉</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="ln">1</span><span class="cl"><span class="nv">$c-header</span><span class="o">:</span> <span class="mh">#1F3A34</span><span class="p">;</span> </span></span></code></pre></div><p>保存即生效：<strong>extended Hugo 用 Pipes 自动编译</strong>（<code>hugo server</code> 下改完刷新即可）； 普通版 Hugo 用户需 <code>npm run css</code> 重新编译预编译 CSS。</p>