进阶篇

探索 Hugo - FixIt 主题的的进阶使用。

自定义样式

注意
Hugo extended 版本对于自定义样式是必需的。

通过定义自定义 .scss 样式文件,FixIt 主题支持可配置的样式。

包含自定义 .scss 样式文件的目录相对于 你的项目根目录 的路径为 assets/css

assets/css/_override.scss 中,你可以覆盖 themes/FixIt/assets/css/_variables.scss 中的变量以自定义样式。

这是一个例子:

1
2
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext');
$code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace;

assets/css/_custom.scss 中,你可以添加一些 CSS 样式代码以自定义样式。

页面宽度

FixIt 主题提供了页面宽度配置选项 pageStyle 并提供三种选项。

  • narrow 保留 <v0.2.13 页面目录宽度比
  • normal 新的默认页面目录宽度比
  • wide 较大的页面目录宽度比

另外,你还可以在 assets/css/_custom.scss 中,自定义 pageStyle

例如: pageStyle="custom"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@media only screen and (min-width: 1441px) {
  [data-page-style='custom'] {
    .page {
      width: 70%;
    }

    aside {
      width: 15%;
    }
  }
}

@media only screen and (max-width: 1440px) {
  [data-page-style='custom'] {
    .page {
      width: 60%;
    }

    aside {
      width: 20%;
    }
  }
}

@media only screen and (max-width: 1200px) {
  [data-page-style='custom'] {
    .page {
      width: 56%;
    }

    aside {
      width: 22%;
    }
  }
}

在 FixIt 主题中,提供有三个打印视图相关的 CSS 类

  • page-break-before 在元素之前插入分页符
  • page-break-after 在元素之后插入分页符
  • print-d-none 在打印视图中隐藏元素

下面是一个简单的例子:

1
2
3
4
5
<div class="page-break-before"></div>
<div class="page-break-after"></div>
<div class="print-d-none">
  您希望在打印视图中隐藏的某些内容写在此处。
</div>

如果设置 goldmark.parser.attribute.blocktrue,你也可以这样用:

1
2
3
4
5
{.page-break-before}
{.page-break-after}

您希望在打印视图中隐藏的某些内容写在此处。
{.print-d-none}

自定义脚本

包含自定义脚本文件 custom.js 的目录相对于 你的项目根目录 的路径为 assets/js

如果脚本文件 assets/js/custom.js 存在,它将在每篇文章和页面的末尾执行。

自定义模板

Hugo 允许您通过覆盖主题模板来改造主题,例如:您可以创建 layouts/404.html 文件以覆盖 themes/FixIt/layouts/404.html,从而实现自定义 FixIt 主题 404 页面模板的需求。

但是,对于主题的大多数模板,FixIt 通常不建议您这样做,因为这样可能会导致未来升级主题困难。

为了避免升级冲突问题,基于这一特性,FixIt 主题在常用的位置开放了几个空的模板以供用户客制化,详见 主题配置 中的 params.customFilePath 参数。

例如,FixIt 主题文档站点通过创建 layouts/partials/custom/profile.html 自定义了首页的 profile 部分。

首先,启用自定义文件路径参数:

1
2
[params.customFilePath]
  profile = "custom/profile.html"

然后,自定义模板:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="profile-custom">
  {{- if .Site.BuildDrafts -}}
    <a href="https://fixit.lruihao.cn" target="_blank" rel="external" title="Go to Production Environment">
      <img src="https://img.shields.io/github/deployments/hugo-fixit/FixIt/Production?style=flat&label=Production&logo=vercel" alt="Production environment">
    </a>
  {{- else -}}
    <a href="https://pre.fixit.lruihao.cn" target="_blank" rel="external" title="Go to Preview Environment">
      <img src="https://img.shields.io/github/deployments/hugo-fixit/FixIt/Preview?style=flat&label=Preview&logo=vercel" alt="Preview environment">
    </a>
  {{- end -}}
  <a href="https://demo.fixit.lruihao.cn" target="_blank" rel="external" title="FixIt Demo">
    <img src="https://img.shields.io/badge/Demo-orange" alt="FixIt Demo">
  </a>
</div>

PWA 支持

这部分内容在 PWA 支持页面 中介绍。

Buy me a coffee~
支付宝
微信
0%