hugo theme fiber

极简主义者的雨果主题。 Fiber 使用最少的 JavaScript 和 CSS，以便您的网站加载速度更快！还拥有一个干净的用户界面，非常适合眼睛！

目录

• 安装
  • 使用子模块
  • 直接下载主题
• 特征
  • SEO 就绪
  • 简码
    • ASCII 线号
    • 我可以使用吗
  • 点击复制代码
  • 美丽的笔记
• 截图
• 主题设置
  • 在主页中列出内容
    • 博客、笔记等列表
    • 列出自定义内容
  • 代码高亮
  • 菜单项
  • 网站标题
• 写作内容
  • 写笔记
  • 前题

安装

该主题可以通过两种方式与任何基于 Hugo 的网站一起使用。

1. 使用 Git 子模块（推荐）
2. 直接下载主题到<hugo-site-root>/themes/

使用子模块

1. 使用hugo new site SITE_NAME创建您的网站
2. cd至SITE_NAME
3. 初始化 git 存储库： git init 。这是必需的，因为我们必须添加一个 git 子模块。
4. 通过运行git submodule add [email protected]:abdus/hugo-theme-fiber.git themes/hugo-theme-fiber添加子模块
5. 现在，使用hugo serve在本地启动Hugo服务器

如果主题存储库中有更新，您可以使用git submodule update --remote拉取它们

直接下载主题

如果由于某种原因无法使用 Git，请使用此方法。

1. 下载此文件并将其内容解压到SITE_ROOT/themes/hugo-theme-fiber/ 。
2. 通过从终端执行hugo serve在本地启动hugo。

特征

SEO 就绪

该主题加载了基本的 SEO 以及来自 Schema.org 的最少 JSON-LD 数据

简码

除了开箱即用的短代码之外，它确实还有一些其他有用的短代码，这些短代码有时会被证明是有用的。

ASCII 线号

嵌入 AsciiNema Cast。要使用的简码： {{< asciinema id="id of a public cast" >}}

我可以使用吗

此短代码显示来自 caniuse.com 网站的最新数据。对于网络开发人员有用。例子：

{{ < caniuse feature =" abortcontroller " periods =" future_1,current,past_1,past_2 "
> }}

点击复制代码

该网站的访问者只需单击一下即可复制任何代码块的内容。这不会破坏代码缩进！

美丽的笔记

您在content/notes中放入的任何内容都会得到粗略的注释。这使得从笔记中识别重要的事情变得更容易。

粗略注释使用strong 、 em和strikethrough等标签进行控制。要生成新的notes条目，首先必须创建目录content/notes 。然后使用hugo new notes/file-name.md生成一个Note。该文件将包含有关如何使用上述标签注释事物的信息。

截图

主题设置

在主页中列出内容

可以通过两种不同的方式配置主页。您可以从content目录中列出您最喜欢/最重要的部分。

或者将自定义内容放入其中。

或者你可以两者都做！确保创建一个文件content/_index.md ，该文件在 fromtmatter 中有一个属性title 。此title属性对于 SEO 很有用。例子：

 ---
title : " Welcome to my Homepage "
---

<!-- content goes here --> 

博客、笔记等列表

为了在主页中创建内容列表，您需要在config.toml文件中设置一个名为mainSections变量。例子：

[ params ]
mainSections = [ " posts " ]

列出自定义内容

要列出自定义内容，只需将它们放在content/_index.md中并添加适当的 frontmatter 即可。

代码高亮

默认情况下，Hugo 不会使用任何类。但这不适用于该主题，因为某些功能依赖于该主题。

您需要运行代码块的类。您可以这样做：

 # file: config.toml
[ markup ]
[ markup . highlight ]
codeFences = true
noClasses = false

菜单项

默认情况下，顶部菜单中只有一个菜单项。要在其中添加更多项目，需要在config.toml中定义菜单项。以下是我网站的config.toml的示例：

[ menu ]

  [[ menu . main ]]
    identifier = " me "
    name = " Me "
    url = " /me/ "
    weight = 10


  [[ menu . main ]]
    identifier = " keys "
    name = " keys "
    url = " /keys/ "
    weight = 10

  [[ menu . main ]]
    identifier = " categories "
    name = " categories "
    url = " /categories "
    weight = 10

  [[ menu . main ]]
    identifier = " notes "
    name = " notes "
    url = " /notes/ "
    weight = 10

网站标题

站点标题由config.toml中的以下参数控制：

[ params ]
  title = " abdus.xyz "
  mainSections = [ " posts " ]

写作内容

写笔记

Notes是这个主题中一种特殊的硬编码。此类内容将得到粗略的注释（这使得管理笔记更容易）。

使用命令hugo new notes/your-filename.md生成注释页面，以了解如何在注释页面中使用粗略注释。

包括注释的原型。

前题

该主题使用 frontmatter 处理自定义帖子描述和元图像以进行 SEO。如果找不到meta.image和meta.description ，它将分别回退到/images/default-meta-image.png和.Summary 。

在 frontmatter 中使用这两个字段，如下所示：

 ---
...
...
meta :
image : " https://example.com/some-image.png "
  description : " your custom desc "
...
...
---

<!-- content goes here -->