Hugo 主题

Kiera

用于创意和技术写作的 Hugo 主题

作者：Daniel Saunders
GitHub Star 数：76
更新时间：2024-09-29
许可证：MIT
标签：博客简约响应式

下载

用于 Hugo 的 Kiera 主题

Kiera 是一款专注于展示长篇散文或技术写作等写作布局的主题。

它最初由 b. avianto 开发，现在由 funkydan2 维护

Screenshot

用于 Hugo 的 Kiera 主题
- 主要功能
- 演示
- 安装
- 更新主题
  - git submodule 方法
  - 独立目录方法
- 配置
  - 菜单
  - 分类和标签
  - 图片
  - 代码高亮
  - Font Awesome 图标
  - 数学公式
  - 评论
- 支持和拉取请求

主要功能

简洁、“务实”的样式。
使用简码支持的 4 种图片放置方式。
（可选）用于文章和 Twitter 卡片的特色图片。
得益于 Hugo Chroma 的出色代码高亮支持。
使用 Font Awesome 图标。
使用 normalize.css 实现一致的样式（Cloudflare CDN）。
使用 Google Fonts：Ruda（衬线字体）和 Roboto Slab（非衬线字体）。
根据需要加载 Disqus 或 Utterances 评论。
支持下载额外的 Google Fonts。

演示

在线演示：https://hugo-kiera.netlify.app/

安装

进入 Hugo 目录，然后

$ cd themes
$ git clone https://github.com/funkydan2/hugo-kiera.git hugo-kiera

更多详细说明请参阅 Hugo 文档。

根据 Netlify 的建议，建议使用 git submodule 而不是 git clone。

$ cd /path/to/the/root/of/your/project/themes
$ git submodule add https://github.com/funkydan2/hugo-kiera.git

更新主题

git submodule 方法

使用 git 将最新的提交合并到您的项目中，方法是运行

$ cd /path/to/the/root/of/your/project/
$ git submodule update --rebase --remote

独立目录方法

删除与主题对应的目录，并通过克隆存储库下载主题的最新版本

$ cd /path/to/the/root/of/your/project/
$ rm -rf themes/hugo-kiera/
$ git clone https://github.com/funkydan2/hugo-kiera.git themes/hugo-kiera/

配置

有关示例，请查看文件夹 exampleSite 中的内容示例和 config.toml。

重要：除非必要，否则不要删除或移动根目录中的 archetypes 文件夹。当前的 Hugo 优先级查找将首先查看此文件夹，然后再查看任何其他 archetypes 文件夹，这可能会导致问题。

推荐的可选 config.toml

pygmentsCodeFences = true

disqusShortname = "" #Disqus shortname
googleAnalytics = "" #Google Analytics ID

[author]
    name = ""           #Author name
    github = ""         #Github username
    gitlab = ""         #Gitlab username
    linkedin = ""       #LinkedIn username
    facebook = ""       #Facebook username
    twitter = ""        #Twitter username
    instagram = ""      #Instagram username
    stackoverflow = ""  #StackOverflow username
    devto = ""          #Dev.to username 

[params]
    tagline = "the tagline for this website"
    customCSS = []  #Optional Customised CSS
    disableDarkModeCSS = false # disables css style for users using dark-mode

菜单

要将非文章相关页面（例如“关于”页面）添加到主菜单，请将以下行添加到页面的 front matter 中

TOML

menu = "main"
meta = "false"

YAML

menu: "main"
meta: "false"

meta 指的是时间、类别、标签和阅读时间，这对于此类页面不是必需的。

对于文章列表页面，请在 content\posts 文件夹内添加 _index.md 文件，并包含以下 front matter

TOML

title = "Posts"
menu = "main"
weight = "10"

YAML

title : "Posts"
menu : "main"
weight : "10"

以下菜单可用

main，显示在页面顶部的导航栏中
footer，显示在页脚的右下角

分类和标签

页面可以包含分类或标签中的一个、两个或都不包含。要链接到标签，请使用 URL /tags/（例如 https://example.com/tags/），对于分类，请使用 /categories/。

图片

可以在 config.toml 中添加侧边标题。

site_logo = "/link/to/image"

也可以使用全宽图像，可以使用 /link/to/image#full（这只会影响此图像，而不会影响可能会覆盖站点标题图像的文章的特色图像）或 config.toml 中的 site_logo_classes = "full-image"（这将影响所有标题图像，即使文章的特色图像覆盖了站点徽标）。

文章的特色图片

可以在 front matter 中为文章添加特色图片，该图片将显示在列表概览和文章页面顶部。

images: ["/link/to/image"]

在这里，也可以通过在 URL 中附加 #full 或 #float 来全宽显示图像（请参见下文）。

使用 front matter 中的 replace_site_logo: false，特色图片可以覆盖文章页面上的站点徽标。

文本中的图片

Kiera 支持使用标准 Markdown 添加 img 标签形式的图片

![图像标题](link/to/image)

要将其包装在 figure 中，请使用

{{< figure src="/link/to/image" >}}

基本放置方式是在内容中占 100% 的宽度，并在较小的屏幕中相应地缩放。建议图像的最小宽度为 600 像素。

Kiera 支持通过添加不同的放置方式

对于 img，使用 ![图像标题](link/to/image#placement)
对于 figure，使用 {{< figure src="/link/to/image" class="placement" >}}

有 4 种配置的放置方式

#full 或 class="full" 表示全宽。
#mid 或 class="mid" 表示居中：
#float 或 class="float" 用于左浮动：
#float-right 或 class="float-right" 用于右浮动：

代码高亮

使用带 Chroma 支持的围栏代码。

Font Awesome 图标

有关用法，请参阅 Font Awesome。

数学公式

将 Params.mathjax 设置为 true 以启用使用 MathJax 显示数学公式的支持。默认情况下，数学公式应使用美元符号包围，并使用 LaTeX 语法生成。可以使用 static/js/mathjax-config.js 覆盖选项。

静态评论

Disqus 评论通过点击 查看评论 按钮按需加载。可以通过在 config.toml 中设置 CommentAutoload = true 来自动加载和显示 Disqus 评论。

还可以使用基于 Git 的评论系统 Utterances。默认情况下，Utterances 评论会被加载和显示。

可以通过在页面 frontmatter 中设置 disableComments = true 来禁用单个页面的评论。

最后修改日期

如果在一个页面/帖子中设置了 lastmod 选项（手动设置或因为 enableGitInfo 设置为 true），则在帖子日期之后将显示包含页面最后修改时间的行。

支持和拉取请求

请使用 GitHub issues 来提交错误。如果您可以帮助修复错误、优化主题或添加功能，请提交拉取请求，我非常乐意看到其他人能提出什么想法。