Hugo的完全体使用教程

Goran 收录于 Code

2024-12-03 约 1600 字预计阅读 8 分钟 - 次阅读 - 条评论

https://gorantan-blog.oss-cn-shanghai.aliyuncs.com/pic/20241204102537502.jpg

1.配置自己的初始网站，上传第一个博客。

1.1先决条件

在开始本教程之前，你必须：

安装 Hugo（扩展版，v0.134.1 或更高版本）
安装 Git

1.2创建网站

1.2.1 命令

验证你是否安装了 Hugo v0.134.1 或更高版本。

1

hugo version

运行以下命令来创建一个带有 FixIt 主题的 Hugo 网站。下一节将对每个命令进行解释。

1
2
3
4
5
6
7


hugo new site my-blog
cd my-blog
git init
git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
echo "theme = 'FixIt'" >> hugo.toml
echo "defaultContentLanguage = 'zh-cn'" >> hugo.toml
hugo server

windows系统下的可以在主目录或者配置目录中的toml手动将theme = ‘FixIt’，“defaultContentLanguage = ‘zh-cn’“添加进去。

通过终端中显示的 URL 查看你的站点。按 Ctrl + C 停止 Hugo 的开发服务器。

1.2.2 命令解释

在 my-blog 目录中为你的项目创建目录结构骨架。

1

hugo new site my-blog

1

cd my-blog

在当前目录中初始化一个空的 Git 存储库。

1

git init

将 FixIt 主题作为 Git 子模块添加到你的项目中的 themes 目录。

1

git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt

在站点配置文件中添加一行，指定当前主题。

1

echo "theme = 'FixIt'" >> hugo.toml

在站点配置文件中添加一行，指定默认的内容语言。

1

echo "defaultContentLanguage = 'zh-cn'" >> hugo.toml

启动 Hugo 的开发服务器以查看站点。

1

hugo server

按 Ctrl + C 停止 Hugo 的开发服务器。

1.3 必要配置

为了能完整地使用 FixIt 主题的所有功能，务必在站点配置文件中添加以下内容。

1
2
3
4
5
6


[markup]
  _merge = "shallow"
[outputs]
  _merge = "shallow"
[taxonomies]
  _merge = "shallow"

以上配置表示继承 FixIt 主题的 markup，outputs 和 taxonomies 配置。

1.4 添加内容

给你的网站添加新页面。

1

hugo new content posts/my-first-post.md

Hugo 在 content/posts 目录中创建了该文件，使用编辑器打开文件。

1
2
3
4
5
6


---
title: 我的第一篇文章
date: 2024-03-01T17:10:04+08:00
draft: true
# ...
---

注意：新建的md文件前面会有一段注释，用于hugo识别文档的一些配置信息，比如标题，所属类别，作者头像，是否在文章末尾显示集合导航等等。

请注意，front matter 中的 draft 值为 true。默认情况下，Hugo 在你构建网站时不会发布草稿内容。详细了解草稿、未来和过期内容。

在帖子正文中添加一些 Markdown，但不要更改 draft 值。

1
2
3
4
5
6
7
8


---
title: 我的第一篇文章
date: 2024-03-01T17:10:04+08:00
draft: true
# ...
---

博客（英语：Blog）是一种在线日记型式的个人网站，借由张帖子章、图片或视频来记录生活、抒发情感或分享信息。博客上的文章通常根据张贴时间，以倒序方式由新到旧排列。

保存文件，然后启动 Hugo 的开发服务器来查看站点。你可以运行以下任一命令来包含草稿内容。

1
2
3


hugo server --buildDrafts
hugo server -D
hugo server -D --disableFastRender

由于本主题使用了 Hugo 中的 .Scratch 和 .Store 来实现一些特性，非常建议你为 hugo server 命令添加 --disableFastRender 参数来实时预览你正在编辑的文章页面。

基本配置下的预览

当对新内容感到满意时，将 front matter 中的 draft 值更改为 false，然后保存文件。

1.5 发布网站

在此步骤中，你将发布你的网站，但不会部署它。

当你发布站点时，Hugo 在项目根目录的 public 目录中创建整个静态站点。这包括 HTML 文件以及图像、CSS 文件和 JavaScript 文件等资源。

当你发布网站时，你通常不希望包含草稿、未来或过期的内容，命令很简单。

1

hugo

我们的大多数用户使用 CI/CD 工作流程部署他们的网站，通过推送 1到他们的 GitHub 或 GitLab 存储库会触发构建和部署。流行的提供商包括 Vercel 2、Netlify 3、AWS Amplify、CloudCannon、Cloudflare Pages、 GitHub pages 和 GitLab pages。

2.通过GitHub Pages 将自己的个人博客部署到云端，再通过github action实现本地自动上传更新。

2.1 概念，搭建思路和运行环境

2.1.1 什么是 GitHub Pages？

Github Pages 是一个可以从你的 Github 源码仓库中直接生成个人、组织或者项目页面的静态站点托管服务。

Github Pages 只能托管静态站点，不能运行服务器端源码，比如 PHP、Java、Python 或者 Ruby。

2.1.2 什么是 Hugo？

Hugo 是用 Go 语言写的静态网站生成器（Static Site Generator）。可以把 Markdown 文件转化成 HTML 文件。

2.1.3 网站搭建思路

创建 2 个 GitHub 仓库
- 博客源仓库：储存所有 Markdown 源文件（博客内容），和博客中用到的图片等。
- GitHub Pages 仓库：储存由 Hugo 从Markdown 文件生成的 HTML 文件。
将在博客源仓库中 Hugo 生成的静态 HTML 文件部署到远端 GitHub Pages 仓库中。

2.2 创建 GitHub 仓库

2.2.1 创建博客源仓库

命名博客源仓库（whatever you want）
勾选 Pricate，设置为公开仓库。
勾选添加 README 文件。

我将博客源码分开存放到一个private repo里，也可以将源码放到github pages repo中，但这样其他人能获取文章的源文件。

2.2.2 创建 GitHub Page 仓库

命名 GitHub Pages 仓库，这个仓库必须使用特殊的命名格式 <username.github.io>， <username> 是自己的 GitHub 的用户名。
勾选 Public，设置为公开仓库。
勾选添加 README 文件，这会设置 main 分支为仓库的默认主分支，这在后面提交推送博客内容时很重要。

使用Github Actions功能实现提交源码后自动发布。

2.2.3 生成Actions secrets

生成Personal access tokens 首先点击github头像在下拉栏里进入Setting->Developer Settings->Personal access tokens -> tokens (classic)

选择Generate new token

点击Generate token生成token，并先复制保存该token。(这个token只有显示一次，所以一定要复制保存)

生成Actions secrets 接下来在源码repo中添加上面的personal access token：

进入repo的Settings->Secrets and variable一栏，选择New repository secret

名称自取，Secret复制上面生成的Personal access tokens

2.2.4 配置actions文件

在repo根目录新建嵌套的两个文件夹.github/workflows

在workflows里新建一个后缀为.yml的配置文件，名字自取。

写进去以下配置（从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


name: github pages # 名字自取

on:
  push:
    branches:
      - main  # 这里的意思是当 main分支发生push的时候，运行下面的jobs，这里先改为github-actions

jobs:
  deploy: # 任务名自取
    runs-on: ubuntu-latest	# 在什么环境运行任务
    steps:
      - uses: actions/checkout@v2	# 引用actions/checkout这个action，与所在的github仓库同名
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive) 获取submodule主题
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo	# 步骤名自取
        uses: peaceiris/actions-hugo@v2	# hugo官方提供的action，用于在任务环境中获取hugo
        with:
          hugo-version: 'latest'	# 获取最新版本的hugo
          # extended: true

      - name: Build
        run: hugo --minify	# 使用hugo构建静态网页

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3	# 一个自动发布github pages的action
        with:
          # github_token: ${{ secrets.GITHUB_TOKEN }} 该项适用于发布到源码相同repo的情况，不能用于发布到其他repo
          external_repository: krislinzhao/krislinzhao.github.io	# 发布到哪个repo
          personal_token: ${{ secrets.ACTION_ACCESS_TOKEN }}	# 发布到其他repo需要提供上面生成的personal access token
          publish_dir: ./public	# 注意这里指的是要发布哪个文件夹的内容，而不是指发布到目的仓库的什么位置，因为hugo默认生成静态网页到public文件夹，所以这里发布public文件夹里的内容
          publish_branch: main	# 发布到哪个branch

yml文件中只需要改external_repository为自己的github page仓库，personal_token: ${{ secrets.XXX }} XXX改成上面生成Actions secrets步骤中取得名称。

2.2.5推送代码到源码仓库

将BlogSource文件夹初始化为 Git 仓库，并设置默认主分支名为 main。这么做的原因是：

GitHub 创建仓库时生成的默认主分支名是 main 用 git init 初始化 Git 仓库时创建的默认主分支名是 master 将 git init 创建的 master 修改成 main ，再推送给远端仓库，这样才不会报错。
1

git init -b main
将 public 文件夹关联远程 GitHub Pages 仓库，使用 GitHub Pages 仓库的 SSH 链接。
1

git remote add origin ggit@github.com:krislinzhao/BlogSource.git

推送本地文件到远程仓库

1
2
3
4


 git pull --rebase origin main
 git add .
 git commit -m "...(修改的信息)"
 git push origin main

推送完成之后到github仓库中的Actions中就可以看到runs运行成功，你的github pages仓库就会有hugo生成的html文件了，然后你就可以通过 https://krislinzhao.github.io 访问你的博客了。

3.个性化设置

布置hugo遇到的bug和问题，目前已实现功能：本地部署网站发布第一篇帖子，更改网站字体，更改网站宽度，部署到github page，使用github action自动部署。利用不蒜子显示网站访问人数，使用cloudfare部署网站。主页功能，底角功能，访问计数功能，检索功能，内容页面评论，赞赏设置等。

3.1：配置文件实现主页，网站建立时间，访问技术，检索等功能

1.使用主题，不同的主题配置文件不同，需要做的就是不要找这么多教学，把官方文档看懂，跟着一个走就行。了解基础知识，比如说public文件夹是静态资源文件，原本里面是没有东西的，跑起来之后就有了，比如配置文件可以放在单独的文件夹也可以方法根目录下，但只能有一个，名字还可以不一样。

2.下载有很多方式，推荐直接github下载，然后主题里面的内容是可以不用去管的，文档让你下载哪些资源，创建哪些文件夹是在自己新建的空项目里面做。

3.不建议直接搬过来，但是可以试试，我没试过。

主题帮忙集成了很多东西，但是完整配置一个个人网站还需要把集成的功能完善配置。这里那我的配置文件举例，我使用的fixit主题，在fixit的默认配置下支持很多自定义功能，目前完成的功能有：

主页功能，params.home：显示中间的大头像和网站的主标题副标题等。
底角功能，params.footer：显示网站建立时间，已经发布多少个小时，hugo的图标等。
访问计数功能，params.busuanzi：利用不蒜子显示网站访问人数。
检索功能，params.search：检索自己的文章内容。
内容页面设置，params.page：这是一个大设置，包含很多功能，比如评论，赞赏功能等。
评论功能，params.page.comment，具体看3.6

需要注意的是，评论和计数功能要开启生产模式，即以hugo server -e production启动

以上功能除了评论功能复杂一点，需要稍微自定义一下，其它功能可以直接复制我的配置实现。具体配置参数含义参考配置 FixIt | FixIt，以下所有配置都有解释。

  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
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114


baseURL = 'https://gorantan-blog.pages.dev/'
theme = 'FixIt'
languageCode = 'en-us'
title = "Goran's Blog"
defaultContentLanguage = 'zh-cn'
# 以下三行是fixit的单独配置
[markup]
  _merge = "shallow"
[outputs]
  _merge = "shallow"
[taxonomies]
  _merge = "shallow"
pageStyle = "custom"


# 主页功能设置
[params]
  [params.home]
    paginate = 10 
    [params.home.profile]
      enable = true
      gravatarEmail = "2446040095"
      avatarURL = "https://gorantan-blog.oss-cn-shanghai.aliyuncs.com/pic/20241215144238456.jpg"
      avatarMenu = ""
      title = "欢迎来到GoranTan的个人博客，这里记录着我的学习和生活经历！"
      subtitle = "不积跬步，无以至千里；不积小流，无以成江海。"
      typeit = true
      social = false
      disclaimer = ""
    [params.home.posts]
      enable = true
      paginate = 3 #一页有3个文档。

  [params.footer]
    enable = true
    since = "2024"
    [params.footer.siteTime]
      enable = true
      animate = true
      value = "2024-10-16T22:16:22+08:00"

  [params.busuanzi]
    enable = true
    source = "//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
    siteViews = true
    pageViews = true

  [params.search]
    enable = true
    type = "fuse"
    contentLength = 4000
    placeholder = "这里是搜索框"
    maxResultLength = 10
    snippetLength = 30
    highlightTag = "em"
    absoluteURL = false
    [params.search.algolia]
      index = ""
      appID = ""
      searchKey = ""
    [params.search.fuse]
      isCaseSensitive = false
      minMatchCharLength = 2
      findAllMatches = false
      location = 0
      threshold = 0.3
      distance = 100
      ignoreLocation = false
      useExtendedSearch = false
      ignoreFieldNorm = false

  [params.page]

  # Valine comment config (https://github.com/xCss/Valine)
    [params.page.comment]
      enable = true
      [params.page.comment.valine]
        enable = true
        appId = "你的id"
        appKey = "你的key"
        placeholder = "评论框"
        avatar = "mp"
        meta = ""
        requiredFields = ["nick"]
        pageSize = 10
        lang = ""
        visitor = true
        recordIP = true
        highlight = true
        enableQQ = false
        serverURLs = ""
        # FixIt 0.2.6 | NEW emoji data file name, default is "google.yml"
        # ["apple.yml", "google.yml", "facebook.yml", "twitter.yml"]
        # located in "themes/FixIt/assets/lib/valine/emoji/" directory
        # you can store your own data files in the same path under your project:
        # "assets/lib/valine/emoji/"
        emoji = ""
        commentCount = true # FixIt 0.2.13 | NEW
      # FixIt 0.2.16 | CHANGED Waline comment config (https://waline.js.org)

    # FixIt 0.2.17 | 新增 赞赏设置
    [params.page.reward]
      enable = true
      animation = true
      # 相对于页脚的位置，可选值：["before", "after"]
      position = "after"
      comment = "如果觉得有用，可以赞赏我一杯咖啡，感谢支持！"
      # FixIt 0.2.18 | 新增 二维码图片展示模式，可选值：["static", "fixed"]，默认：`static`
      mode = "static"
      [params.page.reward.ways]
        wechatpay = "https://gorantan-blog.oss-cn-shanghai.aliyuncs.com/pic/20241215181215477.jpg"
        # alipay = "/images/alipay.png"
        # paypal = "/images/paypal.png"
        # bitcoin = "/images/bitcoin.png"

添加home的profile参数：

成功显示主页标题和头像

增加检索功能。

修改配置，成功显示

添加评论系统

打赏功能

3.2：内容界面管理

在 Hugo 中，Markdown（.md）文件前面的配置部分被称为 “Front Matter”（前言部分）。

功能和用途

Front Matter 是一个以 YAML、TOML 或 JSON 格式编写的元数据块，用于为内容文件（如文章、页面等）提供额外的信息。这些信息可以被 Hugo 用于多种目的，例如：
- 模板渲染：通过在模板文件中引用 Front Matter 中的变量，来根据不同文章的配置展示不同的样式、布局或内容部分。比如，可以根据 Front Matter 中的title变量来设置网页的标题，或者根据date变量来显示文章的发布日期。
- 分类和排序：categories和tags是常见的 Front Matter 变量，Hugo 可以利用这些变量对文章进行分类和打标签，方便用户在网站中浏览相关主题的内容。同时，date变量也可以用于对文章进行排序，例如按照发布时间先后顺序展示文章列表。
- 自定义功能：除了上述的内置常用变量外，用户完全可以根据自己网站的功能需求自定义变量。

以下所有内容可以在：内容管理概述 | FixIt中找到

这里还是拿我的前言部分举例：

 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


---
comment: true
title: hugo的使用
date: 2024-12-03
# tags分为Github,前端，python，AI，bug等
# categories分为code和life以及study
tags:
  - 前端
categories:
  - code
featuredImage: "https://gorantan-blog.oss-cn-shanghai.aliyuncs.com/pic/20241204102537502.jpg"
featuredImagePreview: "https://gorantan-blog.oss-cn-shanghai.aliyuncs.com/pic/20241203203116927.png"

author:
  name: Goran
  link: https://github.com/GoranTan
  email: "2446040095@qq.com"
  avatar: "https://gorantan-blog.oss-cn-shanghai.aliyuncs.com/pic/20241203195700868.png"

page:
  - authorAvatar: true
  - wordCount : true
  - readingTime : true
  - endFlag: "end"
  - toc: true
---

这段前言部分（Front Matter）包含了以下内容：

1. 文章相关设置

comment：设置为 true，用于指示该文章是否开启评论功能或者与评论相关的配置
title：文章的标题为 “hugo 的使用”，用于在网页上展示文章的主要标题
date：指定了文章的发布日期为 “2024 - 12 - 03”，这有助于对文章进行时间排序，例如在文章列表中按照时间先后顺序展示文章，同时也能为读者提供文章时效性的参考信息。

2. 分类与标签

tags：给文章添加了一个标签 “前端”，标签有助于对文章进行分类管理和检索，方便读者在网站中查找与特定主题相关的文章，比如在一个技术博客中，读者可以通过点击 “前端” 标签查看所有标记为前端相关的文章。
categories：文章所属的类别为 “code”，类别通常是对文章更宏观的分类，用于构建网站的分类导航结构，帮助读者快速定位到感兴趣的内容板块，比如网站可能有 “code”（技术代码类）、“life”（生活类）、“study”（学习类）等不同的大分类，通过分类可以将文章进行有效的归类组织。

3. 图片相关配置

featuredImage：指定了文章的特色图片路径为 “https://gorantan - blog.oss - cn - shanghai.aliyuncs.com/pic/20241204102537502.jpg”，在网页展示文章时，可能会在文章标题附近、文章详情页顶部等位置显示这张特色图片，以增强文章的视觉吸引力，吸引读者阅读文章内容，同时也可能用于在社交媒体分享文章时作为缩略图展示等场景。
featuredImagePreview：设置了文章的预览图片路径为 “https://gorantan - blog.oss - cn - shanghai.aliyuncs.com/pic/20241203203116927.png”，这可能用于在文章列表等地方，当文章尚未完全展开时，显示这张预览图片来给读者一个初步的视觉印象，让读者能快速识别不同文章，提高文章在列表中的辨识度，吸引读者点击进入文章详情页。

4. 作者信息

author

：是一个包含作者详细信息的结构体，其中包括：
- name：作者的名字为 “Goran”，用于在文章中显示作者姓名，表明文章的创作者。
- link：作者的链接为 “https://github.com/GoranTan”，可能用于在文章页面上创建一个指向作者个人主页（如 GitHub 页面）的链接，方便读者进一步了解作者的其他作品或与作者进行社交互动。
- email：作者的邮箱为 “2446040095@qq.com”，这可能用于在某些场景下（如读者需要联系作者、网站管理员需要与作者沟通等情况）提供联系方式，但通常不会直接在页面上展示邮箱地址，以避免被垃圾邮件发送者利用，可能更多地是在网站后台管理或特定的联系表单等功能中使用。
- avatar：作者的头像路径为 “https://gorantan - blog.oss - cn - shanghai.aliyuncs.com/pic/20241203195700868.png”，用于在文章页面上显示作者的头像，增强作者的个性化展示，让读者更容易识别作者身份。

5. 页面展示相关设置

page

：是一个包含多个页面展示相关设置的列表，其中：
- authorAvatar：设置为 true，表明在页面上会显示作者的头像，让读者能直观地看到作者的形象标识，增加文章的可信度和亲和力，也有助于个性化展示文章页面。
- wordCount：设置为 true，可能用于在文章页面上显示文章的字数统计信息，让读者了解文章的篇幅长度，对于一些对文章长度有预期或者关注内容量的读者来说是一个有用的信息展示。
- readingTime：设置为 true，表示会在页面上显示文章的预计阅读时长，这有助于读者在阅读前快速评估阅读这篇文章所需的时间投入，方便读者合理安排阅读计划，提高用户体验。
- endFlag：设置为 “end”，其具体作用取决于网站的自定义逻辑，可能是用于在文章结尾处显示一个特定的标识（如版权声明、相关推荐文章的引导标识等），或者是作为一种标记用于模板中的某些逻辑判断（比如判断文章是否到达结尾部分来执行特定的操作）。
- toc：设置为 true，表示会在文章页面上显示目录（Table of Contents），对于较长的文章，目录可以帮助读者快速导航到感兴趣的章节内容，提高文章的可读性和易用性。

最棒的是有一个大佬写的封面图生成工具：CoverView

3.3：更改网站宽度

很多主题的宽度是按照hugo默认的，在读起来一句话很长看起来很难受。不知道大家选的主题是哪一个，这个设置一般是在assets的scss文件里面设置，我用的fixit主题可以支持自己在自己的assets文件夹下建立_override.scss文件，里面可以覆盖主题的样式，还有_custom.scss，fixit支持按照以下格式定义页面宽度。没有文件的话新建然后复制以下代码就行。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


// 自定义页面宽度

[data-page-style='custom'] {
@media only screen and (min-width: 1441px) {
%page-style {
width: 720px; // 设置宽度为800像素
	}
}

@media only screen and (min-width: 1200px) {
	%page-style {
		width: 720px; // 设置宽度为800像素
}	}

@media only screen and (max-width: 1200px) {

%page-style {

width: 100%; // 小屏幕时宽度100%

}	
	}	
		}

3.4：更改网站字体

这里原本是按照主题的文档来写的，下载好了字体ttf文件，但是没有成功，遇到报错。

在_override.scss文件中自定义字体，然后将全局变量global-font-family修改，但是系统识别不了字体，读取不到，反复尝试多次不同的相对路径，确定不是路径问题。

 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


//以My-Blog为根目录

@font-face {

font-family: xgw-wenkai;

src: url('../font/LXGWWenKaiGBScreen.ttf') format("ttf");

font-display: swap;

}

//以assets为根目录

@font-face {

font-family: yinbi2;

src: url('../font/正心格硬笔楷书简.ttf')format("ttf");

font-display: swap;

}

//以myblog（cmd下的目录）为根目录

@font-face {

font-family: yinbi1;

src: url('../font/瑞美加张清平硬笔楷书.ttf')format("ttf");

font-display: swap;

}

$global-font-family: 'LXGW WenKai', yinbi1, yinbi2, sans-serif!important;

后面也没找到原因，不过有另外一个方法，通过字体cdn网站成功解决，这个网站是线上配置字体资源，不需要本地下载，只需要引用就可以实现，非常方便。

1
2
3


@import url('https://chinese-fonts-cdn.deno.dev/packages/lxgwwenkai/dist/LXGWWenKai-Regular/result.css');

$global-font-family: 'LXGW WenKai', yinbi1, yinbi2, sans-serif!important;

检查方式：可以打开网站，使用F12检查网络，网络刷新一下看是否有自己设定的字体刷出来。

3.5：插入图片

Hugo 官方提供了一些 shortcodes 短代码，其中就包含插入图片的短代码 figure

1
2
3

<center>
      原文截图
    
</center>

<center>
      测试
    
</center>

这里建议采用图床，然后使用typora+PicGO图床，可以截图直接粘贴，不用手动上传。

3.6：一个好用的md编写文件+图床

为什么要搭建博客图床? 在本地的markdown文件.md中，图片是以“外链”这一形式存在的

Office word中，图片是直接插入docx文件里面 Markdown中，图片只是一个本地/联网的地址也就是说，如果我们使用本地markdown编译器（如typora）来编辑MD文件的时候，如果MD里面插入的图片的源文件被移动或者删除了，我们的MD文档里面对应的图片也无法显示出来。

同时，如果我们用本地编辑器写好了一篇博客，想把它上传到CSDN上。CSDN是无法自动转存文件里面的图片的（因为这个图片只是一个你硬盘里面的文件路径）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0gNYdqHb-1647670910810)(photo/image-20220318140612548.png)]

这时候我们就需要用图床来解决这个问题

什么是图床？

在我们往typora里插入图片的时候，PicGO会自动上传图片到图床，并返回一个图片的链接

这时候你的图片就是一个网络的链接(网址)，不再是本地路径。

你也可以在任何有网络的地方、用任何设备访问这张图片了

即便是本地的那张图片移动or删除，也不会影响图床里的这张图片

markdown本地文件里面的图片也就不会失效了！

Typora+PicGo+阿里云OSS搭建博客图床（超详细）-CSDN博客

使用typora+PicGO的优点

typora是最好的markdown编写软件，市面反响非常好，唯一的缺点是收费，但是可以按照教程白嫖。
typora支持PicGo实现自动上传图片到图床，不用手动上传并且不用编写markdown图片格式，只需要ctrl+v。
图床刷新图片速度快，稳定。

3.7：评论功能实现

评论系统需要数据库和前端，一般都是外部集成的，hugo支持多种评论系统，fixit主题已经集成好了，如果主题没有集成，也可以通过html文件实现评论功能。

在fixit中评论并没有放在配置文档中，需要自定义。fixit支持的评论系统。不同的评论系统功能不同，由于我想要免费，访客不强制登录，根据需求我选择了valine，介绍 | Valine 一款快速、简洁且高效的无后端评论系统。

可以参考valine官方文档和fixit的github官方配置文件：fixit的toml文件评论部分，

按照教程设置完之后，在你的toml文件中加入以下配置，然后输入你的参数,enable设置为true。

想要看其它详细教程：hugo博客开启valine评论系统配置-腾讯云开发者社区-腾讯云

注意在使用leancloud的时候一定用国际版！国内版要备案和实名，绑定域名，很麻烦。

在你想要加入评论功能的md文件内加入comment : true，本地就成功加入评论功能了。

成功界面：

3.8：其它优秀主题展示：

如果觉得有用，可以赞赏我一杯咖啡，感谢支持！

赞赏

微信