一直都想要一个好看并简洁的个人动态，之前部署了一个Artitalk，发现界面不好看，虽然可以评论交互，但界面真的不好看，知道看到hugo这个主题，哇，惊艳到我了，真的好好看，Hugo和Hexo类似，都差不多是全静态博客，都是需要本地构建，既然是这样，那也是可以放在GitHub Actions自动构建，这样还是挺方便的。

安装

安装Go

Hugo使用的Go语言编译，速度飞快，所以我们还要先安装Go语言。

Go语言下载地址：https://golang.google.cn/dl/

我这里是AMD处理器，你根据自己的情况下载合适的版本，下载完直接安装就好，安装过程可以自己选择安装路径，它会自动配置环境。安装软件应该养成一个好习惯，安装软件自己应该知道每一个软件的安装位置。

01-安装go语言-20230319-926

安装完后打开命令行，查看go是否安装成功，如果已经安装了成功，但是没有显示以下内容，则自己主动去环境变量，在系统变量中的Path变量，在Path变量中添加Go/bin的安装路径即可，重新打开终端输入以下内容就好了。

1
go version

02-查看go版本-20230319-959

安装Hugo

Hugo仓库地址：https://github.com/gohugoio/hugo

我这里建议下载hugo_extended_0.85.0_windows-bit64版本，我在此之前使用的最新版，发现总是有奇怪的bug，询问了作者，作者建议使用该版本，该版本没有问题，可以正常使用。

下载完该压缩包后，将该压缩包的hugo.exe文件粘贴到Go/bin目录下即可。

拉取主题

主题仓库地址：https://github.com/FarseaSH/hugo-theme-moments

预览1：https://farseash.github.io/demo-hugo-theme-moments/

预览2：https://blog.hikki.site/link/moments/

在本地电脑Hexo博客目录旁边打开bash，打开命令行，执行以下三条命令：

1
2
3
hugo new site Hugo # 新建一个Hugo站点
cd Hugo  # 进入Hugo文件夹
git clone https://github.com/FarseaSH/hugo-theme-moments themes/moments  # 拉取主题

配置个人信息

下载好主题后，进入Hugo/moments目录，该目录下有个config.toml文件，打开它，按照以下模板配置自己的信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 你所部署发布的网站地址。如果你的主页url是在域名子路径下（如http://blog.hikki.site/link/moments），请务必设定此项。
baseURL = "https://blog.hikki.site/link/moments" 
languageCode = "zh-Hans"
theme = "moments" # 使用主题
paginate = 10   # 单页显示动态的数量
paginatePath = '.' 


[params]
    title = "小码同学的动态" # 封面顶端标题
    signature = "喜欢的东西就努力去追求，万一成功了呢！" # 页面顶端签名
    cover = "https://bu.dusays.com/2023/03/18/641496c1ec727.jpg" # 封面顶端图
    name = "小码同学" # 发布人名字
    avatar = "img/avatar.jpg"  # 发布人头像
  • baseURL: 你所部署发布的网站地址。如果你的主页url是在域名子路径下（如 http://site.com/subpath/），请务必设定此项。
  • paginate: 单一页面上，显示的Moment的数量
  • title: 页面顶端的标题
  • signature: 页面顶端的签名
  • cover: 页面顶端的封面图
  • name: Moment默认发布人
  • avatar: Moment默认发布人的头像

创建第一条个人动态

打开命令行，输入以下内容：

1
hugo new moments/第一条动态.md

运行完该命令后，在/Hugo/moments/content/moments文件夹下有一个第一条动态.md文件，该文件写入以下内容：

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
---
# 置顶 (如需置顶这片Moment, 则将值设定为大于0的整数, 值越小越靠前，例如1会将moment放在最顶端)
top: 1

# 名称（不填写则为设置的默认名称）
name: 小码同学

# 头像（不填写则为设置的默认头像）
avatar: https://bu.dusays.com/2022/11/04/636511250b21b.jpg

# 发布时间
date: 2023-03-18T00:43:14+08:00

# 给Moment添加标签
tags:
 - 博客

# 附加信息（选填1项或者不填写）
# 附加信息类型1:单个图片
pictures:
 - https://bu.dusays.com/2022/11/15/6372826ed3118.jpg

# 附加信息类型2:网页链接
# link：127.0.0.1
# link_text：必填，链接显示的文字；
# link_logo：选填，网页logo，现在支持部分网站自动找到对应图标，无需自己添加图标
link:
link_text: 这是啥
link_logo: https://bu.dusays.com/2023/03/18/64149ddb788bc.png

# 备注信息
note: 
---

<!-- 动态正文内容 -->

终于有个喜欢的博客动态了，采用*FarseaSH*小姐姐的动态系统，有点点像微信的朋友圈，感觉这种更加合适个人动态，没有过多的花里胡哨，只有简洁的文字和图片。该系统使用的*Hugo*博客框架，构建速度飞快，使用Hugo和Hexo也类似，在本地写文章，push到gitee，gitee同步仓库到GitHub，使用GitHub Actions自带构建，构建完后将静态文件部署到服务器。

效果如下：

04-第一条动态-20230319-258

启动本地服务器

在Hugo/moments文件夹下进入命令行，使用以下命令启动本地服务器，功能类似hexo sever一样的。

1
hugo server

使用

案例一：纯文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
name:
avatar:

date: 2021-08-01T11:33:28+08:00

tags:
 - default
 -

note: 这是纯文字的moment
---
当然，你也可以什么都不附带，只发送纯文字moment。

00-纯文字-20230319-315

案例二：单图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
name: 福斯特
avatar: https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn17%2F0%2Fw400h400%2F20181111%2F89f9-hnstwwq6307162.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630729931&t=e8c4135ba966d5fbfd5d30adf96551c0

date: 2021-08-04T23:57:46+08:00

tags:
 - 图片
 - 最新moment

pictures: 
 - https://bu.dusays.com/2022/11/15/6372826ed3118.jpg

note: 这是加入图片的moment
---

你可以为每条moment附带图片。

比如说，好看的风景：

01-单图-20230319-544

案例三：图片集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
---
name: 赛肯德
avatar: img/avatar.jpg

date: 2021-08-04T11:57:49+08:00

tags:
 - 图片集
 - 美食

pictures:
 - https://p8.itc.cn/images01/20210119/628400a0528c4dc696efdac8749b176d.jpeg
 - https://cdn.pixabay.com/photo/2016/01/11/07/18/cupcakes-1133146_1280.jpg
 - https://cdn.pixabay.com/photo/2016/10/13/11/44/chocolates-1737503_1280.jpg
 - https://cdn.pixabay.com/photo/2016/01/11/07/18/cupcakes-1133146_1280.jpg

note: 这是附带图片集的moment
---

你也可以为每条moment附带更多的图片，做成图片集。

比如最近打卡的美食们：

02-多图-20230319-252

案例四：网络链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
---
name: 瑟德
avatar: 

date: 2021-08-03T11:57:40+08:00

tags:
 - 链接
 - Github
 - 不知道贴什么标签

link: https://www.github.com
link_logo:
link_text: GitHub - Where the world builds software · GitHub

note: 这是加入链接的Moment
---
你也可以像这样附带网络链接。

GitHub是通过Git进行版本控制的软件源代码托管服务平台，由GitHub公司（曾称Logical Awesome）的开发者Chris Wanstrath、P. J. Hyett和汤姆·普雷斯顿·沃纳使用Ruby on Rails编写而成。（引用自Wikipedia）

03-附带网络连接-20230319-897

样式小改

这个主题其实本来就很简单，很好看了，只是我想更改合适我个人的。

修改时间摆放位置

修改前

01-原样式-20230323-888

修改后

02-修改后-20230323-598

修改

打开hugo主题文件夹/themes/moments/layouts/partials/文件夹，我们需要修改row.html文件，

  1. 将6~12行注释掉，即注释掉class="pure-u-1 pure-u-sm-1-3"该类。
  2. 将115~118行注释掉，即注释掉class="moment-note"该类
  3. 将以下内容替换成第二步的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="moment-note">
    <p class="note">
        <span>{{ .Date.Format "15:04" }}</span> 
        <span>
            <span class="month-day">
                <span class="year">{{ .Date.Format "2006"}}</span>
                {{ .Date.Format "Jan 2"}}
                {{ if in (slice 1 21 31) .Date.Day}}
                {{ else if in (slice 2 22) .Date.Day}}日
                {{ else if in (slice 3 23) .Date.Day}}日
                {{ else }}日{{ end }}</span>
            
        </span>
        &nbsp;&nbsp;&nbsp;
        <!-- [{{ .Params.note }}]  -->
        {{ if .Params.note }}【{{ .Params.note }}】
        {{ else }} {{ .Params.note }}
        {{end}}
        <!-- 【】是为了将note的备注括起来，好看一点，也容易区分 -->
    </p>
    <div style="padding-right: 12px;"><i class="far fa-heart"></i></div>
</div>
  1. 打开打开hugo主题文件夹/themes/moments/assets/文件夹，编辑style-refractored.scss文件，将278行的text-indent: 20px;改为text-indent: 0px;

修改页码

修改前

01-原版-20230323-457

修改后

02-修改后-20230323-916

修改

进入hugo主题文件夹/themes/moments/layouts/文件夹

  1. 打开index.html文件，将15行和18行的Prev修改为上一页,将32行和35行的Next修改为下一页

  2. 还在当前目录下，打开_default/list.html文件，将15行和19行的Prev修改为上一页,将34行和38行的Next修改为下一页

  3. 编辑hugo主题文件夹/themes/moments/assets/style-refractored.scss文件，在89行，添加一个颜色变量

1
$greey: #3aaaa1;
  1. 在102行的&.active下替换background-color的值为刚刚添加的变量$greey，再添加一个圆角属性。

改前：

1
2
3
4
&.active{
    background-color: $blue;
    color: #ffffff;
}

改后：

1
2
3
4
5
&.active{
    background-color: $greey;
    color: #ffffff;
    border-radius: 20px 20px 20px 20px;
}

修改页脚

修改前

01-修改前-20230323-689

修改后

02-修改后-20230323-427

修改

  1. 进入hugo主题文件夹/themes/moments/layouts/文件夹，将以下内容替换footer.html文件内容。
1
2
3
<div class="footer">
<span><a href="https://beian.miit.gov.cn/">粤ICP备2022125102号</a>  By <a href="https://github.com/FarseaSH/hugo-theme-moments">Moments</a></span>
</div>
  1. 编辑hugo主题文件夹/themes/moments/assets/style-refractored.scss文件，将309行的text-decoration的值改为none，修改如下：
1
2
3
4
5
a{ 
    // text-decoration: underline !important; 
    text-decoration: none; 
    color:#6c757d !important;
}

修改moments主题文章存放处

为什么？

Q：我们为什么要改文章的存放位置？

A：Qexo默认hugo新建的文章时在content/post位置，但moments新建文章的位置默认是在content/moments，这对于在Qexo新建动态就有点点不方便了。

分析问题

新建动态文件

我们使用moments主题时，我们新建的文章使用的命令是hugo new moments/文件名.md，我们需要在/content/post存放我们的文章，那我们在新建文章时应该修改一下命令，我们应该使用：

1
hugo new post/文件名.md

主页html文件

那还有一个问题，我们打开moments的网站时，我们猜测这个网站应该是有多个动态文件拼接成一个html的问题，我们先在终端生成一些hugo的html文件，在终端输入hugo生成一下html文件，html文件在[hugo根目录]/public文件夹下，我们打开该文件夹，找到index.html文件，打开看看。

00-生成html文件-20230325-234

index.html文件映射

我们打开[hugo根目录]/public/index.html文件发现是我们的动态主页，同时，我们再打开[hugo根目录]/public/moments/index.html文件，你会发现，这个文件和刚刚那个文件是一模一样的，说明Hugo在编译html文件时，自动将public/moments目录下的index.html文件复制到上一层的public文件夹下了。

02-moments文章映射到public下--20230325-887

新增post

打开终端，我们新建一个在文章在content/post文件夹下，使用以下命令：

1
hugo new post/01测试文件.md

使用该命令会在[hugo根目录]/content/post目录下生成一个01测试文件.md文件，打开该文件，随便在里面写点啥。

然后重新编译一下文章，使用以下命令：

1
hugo

你会发现，在[hugo根目录]/public有一个post文件夹，打开post文件夹下的index.html，里面的内容就是你刚刚在01测试文件.md写的内容。

01-文章编译后存放处-20230325-945

总结

文章生成的位置是可以改变的，只是moments主题默认将content/moments文件夹的.md文件作为文章的默认存储位置而已。

我们可以试着改变一下文章的存储位置，将moments的文章默认存储位置改为post，并且显示到页面也是显示post文件夹的内容，而不是显示，moments文件夹的内容。下面来带你改变一下默认存储位置。

解决问题

打开[hugo根目录]/themes/moments/layouts文件夹，用编辑器打开index.html文件，将moments改为post就好了。

然后重新编译一下文件，打开[hugo根目录]/public/index.html文件，你会发现，打开的内容就是[hugo根目录]/content/post文件夹下的.md文件内容了。

03-修改文章生成映射的位置-20230325-273

给Hugo添加在线写动态功能

我们使用的是Qexo这个项目，完全免费，我们部署在Vercel上面，数据库使用MongoDB的免费数据库。

官方仓库：https://github.com/Qexo/Qexo

具体实现方式，可以参考这本站这篇文章给Hexo添加在线后台管理

给Hexo添加后台博客管理系统和给Hugo是一样的步骤，完全一样，Qexo也支持Hugo，在部署成功后，在配置博客时，将使用配置的Hexo修改为hugo就可以了，其他都按照视频的步骤走就行。

01-使用配置修改为hugo-20230324-20230326-259

小问题

引入站内外链404

我们的资源文件一般是放在static文件夹里面，但我引入的时候没有成功，显示404，我们需要修改一下引入外链的路径，在首部去掉/就可以了，不要根路径就可以了，

如果加根路径实际上执行的是该路径http://localhost:1313/外链地址.css

如果不加根路径，实际的是http://localhost:1313/link/moments/外链地址.css，其中，/link/moments是baseURL路径下的路径，在部署时，localhost:1313路径会自动替换为我的博客路径，也就是https://blog.hikki.site。

你可以F12查看请求的路径，根据自己的问题修改。

01-引入其他文件修改herf-20230323-189