内容管理概述

了解如何在 FixIt 主题中快速,直观地创建和组织内容。

内容组织

以下是一些方便你清晰管理和生成文章的目录结构建议:

  • 保持博客文章存放在 content/posts 目录,例如:content/posts/my-first-post.md
  • 保持简单的静态页面存放在 content 目录,例如:content/about.md
  • 本地资源组织
本地资源引用

FixIt 0.2.10 | 新增

有三种方法来引用图片音乐等本地资源:

  1. 使用 页面包 中的 页面资源。 你可以使用适用于 Resources.GetMatch 的值或者直接使用相对于当前页面目录的文件路径来引用页面资源。
  2. 将本地资源放在 assets 目录中,默认路径是 /assets。 引用资源的文件路径是相对于 assets 目录的。
  3. 将本地资源放在 static 目录中,默认路径是 /static。 引用资源的文件路径是相对于 static 目录的。

引用的优先级符合以上的顺序。

在这个主题中的很多地方可以使用上面的本地资源引用, 例如 链接, 图片, image shortcode, music shortcode 和前置参数中的部分参数。

页面资源或者 assets 目录中的 图片处理 会在未来的版本中得到支持。 非常酷的功能!

前置参数

Hugo 允许你在文章内容前面添加 yaml, toml 或者 json 格式的前置参数。

注意
不是所有的以下前置参数都必须在你的每篇文章中设置。 只有在文章的参数和你的 主题配置 中的 page 部分不一致时才有必要这么做。
  • title: 文章标题

  • subtitle: FixIt 0.2.0 | 新增 文章副标题

  • date: 这篇文章创建的日期时间它通常是从文章的前置参数中的 date 字段获取的,但是也可以在 主题配置 中设置

  • lastmod: 上次修改内容的日期时间

  • draft: 如果设为 true, 除非 hugo 命令使用了 --buildDrafts/-D 参数,这篇文章不会被渲染

  • author: FixIt 0.2.18 | 更改 文章作者配置,和 主题配置 中的 params.author 部分相同

    1
    2
    3
    4
    5
    
    author:
      name: "" # 文章作者
      link: "" # 文章作者的链接
      email: "" # 文章作者的邮箱,用于设置 Gravatar 头像,优先于 `author.avatar`
      avatar: "" # 文章作者的头像
  • authorAvatar: FixIt 0.2.18 | 新增 是否启用文章作者头像

  • description: 文章内容的描述

  • keywords: 文章内容的关键词

  • license: 这篇文章特殊的许可

  • images: 页面图片,用于 Open Graph 和 Twitter Cards

  • tags: 文章的标签

  • categories: 文章所属的类别

  • featuredImage: 文章的特色图片

  • featuredImagePreview: 用在主页预览的文章特色图片

  • hiddenFromHomePage: 如果设为 true, 这篇文章将不会显示在主页上

  • hiddenFromSearch: FixIt 0.2.0 | 新增 如果设为 true, 这篇文章将不会显示在搜索结果中

  • hiddenFromRss: FixIt 0.2.18-lts.5 | 新增 如果设为 true, 这篇文章将不会显示在 RSS 中

  • hiddenFromRelated: FixIt 0.3.0 | 新增 如果设为 true, 这篇文章将不会显示在相关文章中

  • twemoji: FixIt 0.2.0 | 新增 如果设为 true, 这篇文章会使用 twemoji

  • lightgallery: FixIt 0.2.18 | 更改主题配置 中的 params.page.lightgallery 部分相同

  • ruby: FixIt 0.2.0 | 新增 如果设为 true, 这篇文章会使用 上标注释扩展语法

  • fraction: FixIt 0.2.0 | 新增 如果设为 true, 这篇文章会使用 分数扩展语法

  • fontawesome: FixIt 0.2.0 | 新增 如果设为 true, 这篇文章会使用 Font Awesome 扩展语法

  • linkToMarkdown: 如果设为 true, 内容的页脚将显示指向原始 Markdown 文件的链接

  • linkToSource: FixIt 0.3.0 | 新增 如果设为 true, 内容的页脚将显示指向源码的链接

  • linkToEdit: FixIt 0.3.0 | 新增 如果设为 true, 内容的页脚将显示指向编辑页面的链接

  • linkToReport: FixIt 0.3.0 | 新增 如果设为 true, 内容的页脚将显示指向报告问题的链接

  • rssFullText: FixIt 0.2.4 | 新增 如果设为 true, 在 RSS 中将会显示全文内容

  • pageStyle: FixIt 0.2.13 | 新增 页面样式,详见 页面宽度

  • toc: FixIt 0.2.9 | 更改主题配置 中的 params.page.toc 部分相同

  • expirationReminder: FixIt 0.2.13 | 新增主题配置 中的 params.page.expirationReminder 部分相同

  • heading: FixIt 0.3.0 | 新增主题配置 中的 params.page.heading 部分相同

  • code: FixIt 0.2.0 | 新增主题配置 中的 params.page.code 部分相同

  • math: FixIt 0.2.0 | 更改主题配置 中的 params.page.math 部分相同

  • mapbox: FixIt 0.2.0 | 新增主题配置 中的 params.page.mapbox 部分相同

  • share: 和 主题配置 中的 params.page.share 部分相同

  • comment: FixIt 0.2.0 | 更改主题配置 中的 params.page.comment 部分相同

  • library: FixIt 0.2.7 | 新增主题配置 中的 params.page.library 部分相同

  • seo: FixIt 0.2.10 | 新增主题配置 中的 params.page.seo 部分相同

  • type: 页面渲染模板,详见 页面模板

  • menu: 详见 添加内容到菜单

  • password: FixIt 0.2.15 | 新增 加密页面内容的密码,详见 内容加密

  • message: FixIt 0.2.15 | 新增 加密提示信息,详见 内容加密

  • repost: FixIt 0.2.15 | 新增主题配置 中的 params.page.repost 部分相同

  • autoBookmark: FixIt 0.2.17 | 新增主题配置 中的 params.page.autoBookmark 部分相同

  • wordCount: FixIt 0.2.17 | 新增主题配置 中的 params.page.wordCount 部分相同

  • readingTime: FixIt 0.2.17 | 新增主题配置 中的 params.page.readingTime 部分相同

  • endFlag: FixIt 0.2.17 | 新增主题配置 中的 params.page.endFlag 部分相同

  • reward: FixIt 0.2.17 | 新增主题配置 中的 params.page.reward 部分相同

  • instantPage: FixIt 0.2.18 | 新增主题配置 中的 params.page.instantPage 部分相同

技巧

FixIt 0.2.10 | 新增

featuredImagefeaturedImagePreview 支持 本地资源引用 的完整用法。

如果带有在前置参数中设置了 name: featured-imagename: featured-image-preview 属性的页面资源, 没有必要在设置 featuredImagefeaturedImagePreview:

1
2
3
4
5
resources:
  - name: featured-image
    src: featured-image.jpg
  - name: featured-image-preview
    src: featured-image-preview.jpg

FixIt 0.2.12 | 新增

FixIt 主题内嵌了一些 原型,在使用以下命令创建新内容时生效,会自动带入常用的前置参数:

1
2
hugo new posts/foo.md
hugo new --kind post-bundle posts/bar/

这是一个前置参数例子:

 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
---
title: "我的第一篇文章"
subtitle: ""
date: 2020-03-04T15:58:26+08:00
lastmod: 2020-03-04T15:58:26+08:00
draft: true
author: ""
authorLink: ""
authorEmail: ""
description: ""
keywords: ""
license: ""
images: []

tags: []
categories: []
featuredImage: ""
featuredImagePreview: ""

hiddenFromHomePage: false
hiddenFromSearch: false
hiddenFromRss: false
twemoji: false
lightgallery: true
ruby: true
fraction: true
fontawesome: true
linkToMarkdown: true
rssFullText: false
pageStyle: "normal"

toc:
  enable: true
  auto: true
expirationReminder:
  enable: false
  # ...
code:
  copy: true
  # ...
edit:
  enable: false
  # ...
math:
  enable: true
  # ...
mapbox:
  accessToken: ""
  # ...
share:
  enable: true
  # ...
comment:
  enable: true
  # ...
library:
  css:
    # someCSS = "some.css"
    # 位于 "assets/"
    # 或者
    # someCSS = "https://cdn.example.com/some.css"
  js:
    # someJS = "some.js"
    # 位于 "assets/"
    # 或者
    # someJS = "https://cdn.example.com/some.js"
seo:
  images: []
  # ...
---

内容摘要

FixIt 主题使用内容摘要在主页中显示大致文章信息。Hugo 支持生成文章的摘要。

文章摘要预览
文章摘要预览

自动摘要拆分

默认情况下,Hugo 自动将内容的前 70 个单词作为摘要。

你可以通过在网站配置中设置 summaryLength 来自定义摘要长度。

如果你要使用 CJK中文/日语/韩语 语言创建内容,并且想使用 Hugo 的自动摘要拆分功能,请在网站配置中将 hasCJKLanguage 设置为 true

手动摘要拆分

另外,你也可以添加 <!--more--> 摘要分割符来拆分文章生成摘要。

摘要分隔符之前的内容将用作该文章的摘要。

注意
请小心输入<!--more--> ; 即全部为小写且没有空格。

前置参数摘要

你可能希望摘要不是文章开头的文字。在这种情况下,你可以在文章前置参数的 summary 变量中设置单独的摘要。

使用文章描述作为摘要

你可能希望将文章前置参数中的 description 变量的内容作为摘要。

你仍然需要在文章开头添加 <!--more--> 摘要分割符。将摘要分隔符之前的内容保留为空。然后 FixIt 主题会将你的文章描述作为摘要。

摘要选择的优先级顺序

由于可以通过多种方式指定摘要,因此了解顺序很有用。如下:

  1. 如果文章中有 <!--more--> 摘要分隔符,但分隔符之前没有内容,则使用描述作为摘要。
  2. 如果文章中有 <!--more--> 摘要分隔符,则将按照手动摘要拆分的方法获得摘要。
  3. 如果文章前置参数中有摘要变量,那么将以该值作为摘要。
  4. 按照自动摘要拆分方法。
注意
不建议在摘要内容中包含富文本块元素,这会导致渲染错误。例如代码块,图片,表格等。

页面模板

一般情况,你不需要设置 typelayout 参数,因为 HugoFixIt 会帮你选择。但是 FixIt 主题提供了一些特殊的模板给用户使用。

友情链接

FixIt 0.2.12 | 新增

在前置参数中设置 layout: friends,并在 yourSite/data/ 目录下创建 friends.yml,其内容格式如下:

1
2
3
4
5
# 朋友/站点信息例子
- nickname: 朋友名字
  avatar: 朋友头像
  url: 站点链接
  description: 对朋友或其站点的说明
技巧

你可以使用以下命令快速创建友情链接页面:

1
hugo new friends/index.md

内容加密

这部分内容在 内容加密页面 中介绍。

Markdown 语法

这部分内容在 Markdown 基本语法页面Markdown 扩展语法页面 中介绍。

Shortcodes

这部分内容在 Shortcodes 页面 中介绍。

多语言和 I18n

FixIt 主题完全兼容 Hugo 的多语言模式,并且支持在网页上切换语言。

语言切换
语言切换

兼容性

FixIt 0.2.10 | 更改
语言Hugo 代码HTML lang 属性主题文档
英语enen
简体中文zh-cnzh-CN
繁体中文zh-twzh-TW
法语frfr
波兰语plpl
巴西葡萄牙语pt-brpt-BR
意大利语itit
西班牙语eses
德语dede
塞尔维亚语srsr
俄语ruru
罗马尼亚语roro
越南语vivi

基本配置

学习了 Hugo 如何处理多语言网站 之后,请在站点配置中定义你的网站语言。

例如,一个支持英语,中文和法语的网站配置:

 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
# [en, zh-cn, fr, pl, ...] 设置默认的语言
defaultContentLanguage = "zh-cn"

[languages]
  [languages.en]
    weight = 1
    title = "My Hugo FixIt Site"
    languageCode = "en"
    languageName = "English"
    [[languages.en.menu.main]]
      identifier = "posts"
      pre = ""
      post = ""
      name = "Posts"
      url = "/posts/"
      title = ""
      weight = 1
    [[languages.en.menu.main]]
      identifier = "tags"
      pre = ""
      post = ""
      name = "Tags"
      url = "/tags/"
      title = ""
      weight = 2
    [[languages.en.menu.main]]
      identifier = "categories"
      pre = ""
      post = ""
      name = "Categories"
      url = "/categories/"
      title = ""
      weight = 3

  [languages.zh-cn]
    weight = 2
    title = "我的 Hugo FixIt 网站"
    # 网站语言,仅在这里 CN 大写
    languageCode = "zh-CN"
    languageName = "简体中文"
    # 是否包括中日韩文字
    hasCJKLanguage = true
    [[languages.zh-cn.menu.main]]
      identifier = "posts"
      pre = ""
      post = ""
      name = "文章"
      url = "/posts/"
      title = ""
      weight = 1
    [[languages.zh-cn.menu.main]]
      identifier = "tags"
      pre = ""
      post = ""
      name = "标签"
      url = "/tags/"
      title = ""
      weight = 2
    [[languages.zh-cn.menu.main]]
      identifier = "categories"
      pre = ""
      post = ""
      name = "分类"
      url = "/categories/"
      title = ""
      weight = 3

  [languages.fr]
    weight = 3
    title = "Mon nouveau site Hugo FixIt"
    languageCode = "fr"
    languageName = "Français"
    [[languages.fr.menu.main]]
      identifier = "posts"
      pre = ""
      post = ""
      name = "Postes"
      url = "/posts/"
      title = ""
      weight = 1
    [[languages.fr.menu.main]]
      identifier = "tags"
      pre = ""
      post = ""
      name = "Balises"
      url = "/tags/"
      title = ""
      weight = 2
    [[languages.fr.menu.main]]
      identifier = "categories"
      pre = ""
      post = ""
      name = "Catégories"
      url = "/categories/"
      title = ""
      weight = 3

然后,对于每个新页面,将语言代码附加到文件名中。

单个文件 my-page.md 需要分为三个文件:

  • 英语:my-page.en.md
  • 中文:my-page.zh-cn.md
  • 法语:my-page.fr.md
技巧
也可以使用 文章前置参数 来翻译网址。

修改默认的翻译字符串

翻译字符串用于在主题中使用的常见默认值。 目前提供 一些语言 的翻译,但你可能自定义其他语言或覆盖默认值。

要覆盖默认值,请在你项目的 I18n 目录 i18n/<languageCode>.toml 中创建一个新文件,并从 themes/FixIt/i18n/en.toml 中获得提示。

另外,由于你的翻译可能会帮助到其他人,请花点时间通过 创建一个 PR 来贡献主题翻译,谢谢!

相关内容

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