进阶篇 - 拾趣资源

聪收录于文档

2023-03-16 2023-03-17 约 836 字预计阅读 2 分钟 - 次阅读 - 条评论

警告

本文最后更新于 2023-03-17，文中内容可能已过时。

探索 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.block 为 true，你也可以这样用：

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"

然后，自定义模板：

PWA 支持

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

给作者买杯卡布奇诺～

赞赏

支付宝

微信