Bejamin主页
所有文章 标签 分类 关于 友链
Bejamin主页

目录

Hugo框架LoveIt博客主题配置

 收录于 折腾
   约 4073 字   预计阅读 9 分钟    次阅读  
/img/Chore-Pic/LoveIt-Theme.webp

前言

本篇博客记录的配置过程可能不够全面，但主要是本人认为比较重要的部分，或容易引起疑惑之处，单独拿出来记录，希望可以帮到遇到相同问题的其他人。

Hugo主题的配置，本质就是在配置根目录的 config.toml文件。

配置LoveIt主题前，可以先将其LoveIt/exampleSite/config.toml对照着LoveIt主题配置文档大致看看各个模块的作用与意义，然后拷贝到自己的根目录并自定义修改。

默认md内容模版

hugo使用上手后，知道新建一篇博客可以在hugo博客的根目录，命令行执行hugo new posts/new_blog.md，就会在 content/posts 目录下新建一个名为 ‘my_new_blog.md’ 的 markdown 文件，新文件的默认具体内容我们是可以提前自动配置的。

只需要编辑archetypes/default.md即可，举例，我的default.md内容如下所示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

---
title: "{{ replace .Name "-" " " | title }}"
subtitle:    ""
description: "摘要："
featuredImage: "/img/"
tags:        ["",""]
categories:  [""] # 当前可选分类:计算机图形学,脚本,程序设计,折腾
date: {{ .Date }}

draft: true
---

<!--more-->

表示每篇新建的md文档，都会预先在文章起始位置填写上述内容：其中，title和date是自动获取的，#号表示注释内容。

是否发布markdown原文

文章的原始文本格式为markdown，在发布时会自动编译出html网页文档，在根目录配置文件config.toml中可以配置是否一起输出markdown，如下注释的设置。

如果选择一并输出markdown文档，则在博客的末尾左下角，能让读者看到markdown原文。例如LoveIt主题的官方文档配置篇，左下角有个“阅读原始文档”。

1
2
3
4
5
6
7
8

# 用于 Hugo 输出文档的设置
[outputs]
  # 
  home = ["HTML", "RSS", "JSON"]
  page = ["HTML"] # 如果都想输出，则设置为["HTML", "MarkDown"]，页面底部有"查看网页原文"
  section = ["HTML", "RSS"]
  taxonomy = ["HTML", "RSS"]
  taxonomyTerm = ["HTML"]

我个人是倾向不输出，所以删去了“MarkDown”字段。

文章摘要

文章摘要是用简短的一句话，对标题进行补充解释，让读者在看文章之前就对文章有个大体的印象。

详细设置部分，可参考官方文档-摘要部分 。

我选择的手动摘要，做以下步骤：

  1. 在archetypes/default.md文本内新增description字段，以描述为摘要；
  2. 新增摘要分隔符＂＂；（可参考本文default内容模板章节）

比如本篇文章的摘要设置如下：

1

description: "摘要：LoveIt主题从Github模板到个性化所需要做的重要配置"

这样每篇新建的文章只要填写description字段内容即可，注意，使用纯文本，不要加入代码块、字体加粗格式等富文本，容易引起渲染错误。

文章封面图

LoveIt主题让使用者选择是否设置文章预览图，如果想设置，在markdown文档的最开头的配置部分，填写featuredImage字段，引用的图片可以是网络URL地址的图片，也可以是本博客本地图片。

我选择的是本地图片的static方式加载(还有asset方式)，资源相对路径的起始位置是根目录下的static目录，比如本文的图片目录是static/img/Chore-Pic/LoveIt-Theme.webp，那么这个字段应该填写：

1

featuredImage: "/img/Chore-Pic/LoveIt-Theme.webp"

🤔图片的分辨率建议是1000x300或者长宽比相近的分辨率，可以避免预览被裁剪。

图片格式尽量选择webp格式(或使用ffmpeg等工具将其他图片格式转换为webp)。

webp格式的图是新一代的压缩格式，保证最大原图清晰度的情况下，尽可能地缩小了图片内存占用，加快加载速度。

Algolia站内搜索

Algolia是法国的初创公司，类似于存储云服务，计算云服务，提供的是搜索云服务，用户建立应用，接着通过sdk推送数据，然后通过sdk就可以搜索了。个人用户是免费使用，还有个最大的优点是速度快，比LoveIt主题支持的默认站内搜索工具lunar.js快了一个数量级。

按照以下步骤实施即可：

  1. 在Algolia官网注册账号后登录，或使用 GitHub、Google 帐号登录；

  2. 点击左侧边栏的OverView/dashboard，可以看到自动创建了一个App，可以重新命名，我们新建一个Index，比如命名为My_Blog，点击进去，准备上传index.json作为搜索元数据。

    Algolia 为我们提供了三种方式来增加记录：手动添加、上传 json 文件、API自动添加。下面演示自动添加的方式：

  3. 生成index.json并上传：

    每次更新博客内容并发布时，需要更新index.json，可以做到自动化脚本化，借助第三方工具Atomic-Algolia即可。安装方法：

    • 安装node.js后，可以执行npm指令；

    • 执行 npm install atomic-algolia，可以安装 atomic-algolia；

    • 在hugo根目录修改或新建文件 package.json ，添加如下内容：

      1
2
3
4
5
6

      {
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "algolia": "atomic-algolia"
  }
}

    • 根目录下新建.env文件,添加如下内容：

      1
2
3
4

      ALGOLIA_APP_ID=你的Application ID
ALGOLIA_INDEX_NAME=你的algolia-index名字
ALGOLIA_INDEX_FILE=public/index.json
ALGOLIA_ADMIN_KEY=你的Admin API Key

      上述的关键信息 Application ID 和 Admin API Key可以在algolia的DashBoard页面获取，“API Keys”按钮，点进去后，就能看到，前者是大概10位长度的大写英文与数字，后者大概30位的小写英文与数字。

      Index的名字是自己重命名的，index-file的路径指的是你的发布路径和Hugo根目录的相对位置，上述示例是public为发布目录。

      ⚠️ ALGOLIA_ADMIN_KEY可以用来管理你的索引，所以最好不要提交到公共仓库。

      我的做法是Hugo博客内容为Private仓库，发布的仓库kissingfire123.github.io为public，添加为Private仓库的submodule，一来隔离了隐私数据，二来避免每次更新草稿内容都触发page-deploy。

    • 配置config.toml

      找到 [params.search]模块，至少配置以下几个值(以下略去其他内容)：

      1
2
3
4
5
6
7
8

        [params.search]
    enable = true
    # 搜索引擎的类型 ("lunr", "algolia")
    type = "algolia"
      [params.search.algolia]
        index = "Benjamin-Blog" # index-name,这个的确是我的，个人自行命名
        appID = "B45S568G91" # app-id，内容我随意写的
        searchKey = "c00000d11111e22222f444e2333"#admin-key，内容此处为演示，随意写的

    • 更新索引并自动上传：npm run algolia

      输出类似如下内容，“Benjamin-Blog"是我的index-name。

       1
 2
 3
 4
 5
 6
 7
 8
 9
10

      $ npm  run algolia

> algolia
> atomic-algolia

[Algolia] Adding 0 hits to Benjamin-Blog
[Algolia] Updating 0 hits to Benjamin-Blog
[Algolia] Removing 0 hits from Benjamin-Blog
[Algolia] 219 hits unchanged in Benjamin-Blog
{}

  4. 至此，algolia功能启用成功，使用示范如下：

评论系统Valine

LoveIt主题支持多种评论系统，例如Disqus，GitTalk，valine，前2者都需要用户登录后评论且数据托管更方便，valine不需要登录且无后端。

关于valine更详细的介绍，有兴趣的朋友可以看看valine中文文档。

下面只说如何在LoveIt主题上用起来这个评论系统：

  1. valine基于LeanCloud登录，注册并登录；

    选择国际版，不要选择华北或华东，后面这2个要上传身份证备案的，比较麻烦。(Ps：第一次我就不清楚情况，弄的华北版，各种麻烦，实名认证)

  2. 新建应用，比如我的是 Benjamin-Personal-Blog ,然后获取2个关键信息：AppID 和 AppKey。

    这2个关键信息在侧边栏设置==> 应用凭证。

  3. 设定博客域名：位置在 设置 ==> 安全中心 ==> Web 安全域名 ，将博客域名记录在内，可以写多个(比如用vercel部署了的话)；

  4. 修改 config.toml，修改 [params.page.comment.valine] ，如下所示：

    1
2
3
4
5

    [params.page.comment.valine]
	enable = true
   	appId = "6aYYYY22YY222YYX34rjksex-X4XXXGah9X" # 仅作演示，随意输入的，要换成你自己的
   	appKey = "OOELIDKIddsowhV" # 同上，也是我随意输入的，但是内容长度和形式差不多
   	placeholder = "期待您的评论..."

  5. 域名绑定(非必须)：位置在 设置 ==> 安全中心 ==> API；

自动更新文章修改日期

每篇文章都有个创建日期，发布后可能会有多次修改，“记录最后修改日期并显示”——这一功能是被LoveIt主题所支持的。开启该功能的方法为修改 config.toml ，关键几个值如下：

1
2
3
4
5
6

# 是否使用 git 信息,必须得是全局配置,配置gitInfo更新lastMod
enableGitInfo = true
[params]
  # 公共 git 仓库路径，仅在 enableGitInfo 设为 true 时有效,注意要写publish的发布仓库
  # 下方示例路径是我的publish仓库，注意要换成自己的
  gitRepo = "https://github.com/kissingfire123/kissingfire123.github.io.git"

修改好并发布后，可以在每篇文章(包括预览时的draft)的末尾底部左下角，看到一行小字，格式形如 “更新于 20xx-mm-dd #SHA值 “，即表示修改成功了。

SEO优化

Baidu收录

  1. Step1 ：访问 Baidu搜索资源平台，先认证网站是你的

    进行基本的注册登录后，在网页的提示下，下载认证文件 baidu_verify_code-jXXaXiYJCY.html ,并且放到网站发布的根目录下，并且部署，再点击认证，即可完成认证；

    Ps: 上述jXXaXiYJCY是我随意写的，每个站点的verification都不一样。

  2. Step2：让百度知道你站内的所有链接，方便官方收录和爬取

    进入用户中心 $\rightarrow$ 站点管理 $\rightarrow$ 普通收录，进行资源网址的提交，提交的方式有3种：

    • API提交 ：最及时迅速地被官方收录，自行在终端执行命令，注意需要自行准备 urls.txt ，这个可以用脚本处理 sitemap.xml 得到，建议调用成功后可以写进自己的部署脚本；
    • sitemap提交 ：每次hugo编译成功后，都会在发布文件夹的根目录更新文件 sitemap.xml ，提交该文件即可。( 比如我的填入 https://kissingfire123.github.io/sitemap.xml )
    • 手动提交：非常直白，就是一个个的复制粘贴到文本框，一行一个，然后提交

  3. 关注其他信息：比如网站信息、抓取诊断等。

Bing收录

访问：Bing搜索管理员工具 ，操作类似 Baidu 收录。

Google收录

访问：Google搜索控制台 ，操作类似 Baidu 收录。

参考链接

更新于 2022-05-01
 Hugo, LoveIt
返回 | 主页