进阶篇

Lruihao 收录于主题文档和主题文档

2024-04-06 2024-04-25 约 900 字预计阅读 2 分钟 - 次阅读

/zh-cn/documentation/advanced/featured-image.png

探索 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
[data-page-style='custom'] {
  @media only screen and (min-width: 1441px) {
    %page-style {
      width: 70%;
    }
  }

  @media only screen and (min-width: 1440px) {
    %page-style {
      width: 60%;
    }
  }

  @media only screen and (min-width: 1200px) {
    %page-style {
      width: 56%;
    }
  }
}

打印样式

在 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"

然后，自定义模板：

 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/docs/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/docs/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 支持页面中介绍。

自定义样式

页面宽度

打印样式

自定义脚本

自定义模板

PWA 支持

相关内容