一直都想要一个好看并简洁的个人动态，之前部署了一个Artitalk，发现界面不好看，虽然可以评论交互，但界面真的不好看，知道看到hugo这个主题，哇，惊艳到我了，真的好好看，Hugo和Hexo类似，都差不多是全静态博客，都是需要本地构建，既然是这样，那也是可以放在GitHub Actions自动构建，这样还是挺方便的。
安装
安装Go
Hugo使用的Go语言编译，速度飞快，所以我们还要先安装Go语言。
{% note blue ‘fas fa-link’ flat %}
Go语言下载地址：https://golang.google.cn/dl/
{% endnote %}
我这里是AMD处理器，你根据自己的情况下载合适的版本，下载完直接安装就好，安装过程可以自己选择安装路径，它会自动配置环境。安装软件应该养成一个好习惯，安装软件自己应该知道每一个软件的安装位置。
安装完后打开命令行，查看go是否安装成功，如果已经安装了成功，但是没有显示以下内容，则自己主动去环境变量，在系统变量中的Path变量，在Path变量中添加Go/bin的安装路径即可，重新打开终端输入以下内容就好了。
go version
安装Hugo
{% note blue ‘fas fa-link’ flat %}
Hugo仓库地址：https://github.com/gohugoio/hugo
{% endnote %}
我这里建议下载hugo_extended_0.85.0_windows-bit64版本，我在此之前使用的最新版，发现总是有奇怪的bug，询问了作者，作者建议使用该版本，该版本没有问题，可以正常使用。
下载完该压缩包后，将该压缩包的hugo.exe文件粘贴到Go/bin目录下即可。
拉取主题
{% note blue ‘fas fa-link’ flat %}
主题仓库地址：https://github.com/FarseaSH/hugo-theme-moments
预览1：https://farseash.github.io/demo-hugo-theme-moments/
预览2：https://blog.hikki.site/link/moments/
{% endnote %}
在本地电脑Hexo博客目录旁边打开bash，打开命令行，执行以下三条命令：
hugo new site Hugo # 新建一个Hugo站点
cd Hugo # 进入Hugo文件夹
git clone https://github.com/FarseaSH/hugo-theme-moments themes/moments # 拉取主题
配置个人信息
下载好主题后，进入Hugo/moments目录，该目录下有个config.toml文件，打开它，按照以下模板配置自己的信息。
# 你所部署发布的网站地址。如果你的主页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://images.hikki.site/blog-static/641496c1ec727-YMPOC9.jpg" # 封面顶端图
name = "小码同学" # 发布人名字
avatar = "img/avatar.jpg" # 发布人头像
baseURL: 你所部署发布的网站地址。如果你的主页url是在域名子路径下（如 http://site.com/subpath/），请务必设定此项。paginate: 单一页面上，显示的Moment的数量title: 页面顶端的标题signature: 页面顶端的签名cover: 页面顶端的封面图name: Moment默认发布人avatar: Moment默认发布人的头像
创建第一条个人动态
打开命令行，输入以下内容：
hugo new moments/第一条动态.md
运行完该命令后，在/Hugo/moments/content/moments文件夹下有一个第一条动态.md文件，该文件写入以下内容：
---
# 置顶 (如需置顶这片Moment, 则将值设定为大于0的整数, 值越小越靠前，例如1会将moment放在最顶端)
top: 1
# 名称（不填写则为设置的默认名称）
name: 小码同学
# 头像（不填写则为设置的默认头像）
avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
# 发布时间
date: 2023-03-18T00:43:14+08:00
# 给Moment添加标签
tags:
- 博客
# 附加信息（选填1项或者不填写）
# 附加信息类型1:单个图片
pictures:
- https://images.hikki.site/blog-static/6372826ed3118-HVH95z.jpg
# 附加信息类型2:网页链接
# link：127.0.0.1
# link_text：必填，链接显示的文字；
# link_logo：选填，网页logo，现在支持部分网站自动找到对应图标，无需自己添加图标
link:
link_text: 这是啥
link_logo: https://images.hikki.site/blog-static/64149ddb788bc-NjqD8c.png
# 备注信息
note:
---
<!-- 动态正文内容 -->
终于有个喜欢的博客动态了，采用*FarseaSH*小姐姐的动态系统，有点点像微信的朋友圈，感觉这种更加合适个人动态，没有过多的花里胡哨，只有简洁的文字和图片。该系统使用的*Hugo*博客框架，构建速度飞快，使用Hugo和Hexo也类似，在本地写文章，push到gitee，gitee同步仓库到GitHub，使用GitHub Actions自带构建，构建完后将静态文件部署到服务器。
效果如下：
启动本地服务器
在Hugo/moments文件夹下进入命令行，使用以下命令启动本地服务器，功能类似hexo sever一样的。
hugo server
使用
案例一：纯文字
---
name:
avatar:
date: 2021-08-01T11:33:28+08:00
tags:
- default
-
note: 这是纯文字的moment
---
当然，你也可以什么都不附带，只发送纯文字moment。
案例二：单图
---
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://images.hikki.site/blog-static/6372826ed3118-Xrv6PE.jpg
note: 这是加入图片的moment
---
你可以为每条moment附带图片。
比如说，好看的风景：
案例三：图片集
---
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附带更多的图片，做成图片集。
比如最近打卡的美食们：
案例四：网络链接
---
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）
样式小改
这个主题其实本来就很简单，很好看了，只是我想更改合适我个人的。
修改时间摆放位置
修改前
修改后
修改
打开hugo主题文件夹/themes/moments/layouts/partials/文件夹，我们需要修改row.html文件，
- 将
6~12行注释掉，即注释掉class="pure-u-1 pure-u-sm-1-3"该类。 - 将
115~118行注释掉，即注释掉class="moment-note"该类 - 将以下内容替换成第二步的内容
<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>
<!-- [{{ .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>
- 打开打开
hugo主题文件夹/themes/moments/assets/文件夹，编辑style-refractored.scss文件，将278行的text-indent: 20px;改为text-indent: 0px;
修改页码
修改前
修改后
修改
进入hugo主题文件夹/themes/moments/layouts/文件夹
-
打开
index.html文件，将15行和18行的Prev修改为上一页,将32行和35行的Next修改为下一页 -
还在当前目录下，打开
_default/list.html文件，将15行和19行的Prev修改为上一页,将34行和38行的Next修改为下一页 -
编辑
hugo主题文件夹/themes/moments/assets/style-refractored.scss文件，在89行，添加一个颜色变量
$greey: #3aaaa1;
- 在
102行的&.active下替换background-color的值为刚刚添加的变量$greey，再添加一个圆角属性。
改前：
&.active{
background-color: $blue;
color: #ffffff;
}
改后：
&.active{
background-color: $greey;
color: #ffffff;
border-radius: 20px 20px 20px 20px;
}
修改页脚
修改前
修改后
修改
- 进入
hugo主题文件夹/themes/moments/layouts/文件夹，将以下内容替换footer.html文件内容。
<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>
- 编辑
hugo主题文件夹/themes/moments/assets/style-refractored.scss文件，将309行的text-decoration的值改为none，修改如下：
a{
// text-decoration: underline !important;
text-decoration: none;
color:#6c757d !important;
}
修改moments主题文章存放处
为什么？
{% note blue ‘fas fa-truck’ %}
Q：我们为什么要改文章的存放位置？
A：Qexo默认hugo新建的文章时在content/post位置，但moments新建文章的位置默认是在content/moments，这对于在Qexo新建动态就有点点不方便了。
{% endnote %}
分析问题
新建动态文件
我们使用moments主题时，我们新建的文章使用的命令是hugo new moments/文件名.md，我们需要在/content/post存放我们的文章，那我们在新建文章时应该修改一下命令，我们应该使用：
hugo new post/文件名.md
主页html文件
那还有一个问题，我们打开moments的网站时，我们猜测这个网站应该是有多个动态文件拼接成一个html的问题，我们先在终端生成一些hugo的html文件，在终端输入hugo生成一下html文件，html文件在[hugo根目录]/public文件夹下，我们打开该文件夹，找到index.html文件，打开看看。
index.html文件映射
我们打开[hugo根目录]/public/index.html文件发现是我们的动态主页，同时，我们再打开[hugo根目录]/public/moments/index.html文件，你会发现，这个文件和刚刚那个文件是一模一样的，说明Hugo在编译html文件时，自动将public/moments目录下的index.html文件复制到上一层的public文件夹下了。
新增post
打开终端，我们新建一个在文章在content/post文件夹下，使用以下命令：
hugo new post/01测试文件.md
使用该命令会在[hugo根目录]/content/post目录下生成一个01测试文件.md文件，打开该文件，随便在里面写点啥。
然后重新编译一下文章，使用以下命令：
hugo
你会发现，在[hugo根目录]/public有一个post文件夹，打开post文件夹下的index.html，里面的内容就是你刚刚在01测试文件.md写的内容。
总结
文章生成的位置是可以改变的，只是moments主题默认将content/moments文件夹的.md文件作为文章的默认存储位置而已。
我们可以试着改变一下文章的存储位置，将moments的文章默认存储位置改为post，并且显示到页面也是显示post文件夹的内容，而不是显示，moments文件夹的内容。下面来带你改变一下默认存储位置。
解决问题
打开[hugo根目录]/themes/moments/layouts文件夹，用编辑器打开index.html文件，将moments改为post就好了。
然后重新编译一下文件，打开[hugo根目录]/public/index.html文件，你会发现，打开的内容就是[hugo根目录]/content/post文件夹下的.md文件内容了。
给Hugo添加在线写动态功能
我们使用的是Qexo这个项目，完全免费，我们部署在Vercel上面，数据库使用MongoDB的免费数据库。
{% note blue ‘fas fa-link’ flat %}
官方仓库：https://github.com/Qexo/Qexo
{% endnote %}
具体实现方式，可以参考这本站这篇文章给Hexo添加在线后台管理
给Hexo添加后台博客管理系统和给Hugo是一样的步骤，完全一样，Qexo也支持Hugo，在部署成功后，在配置博客时，将使用配置的Hexo修改为hugo就可以了，其他都按照视频的步骤走就行。
小问题
引入站内外链404
我们的资源文件一般是放在static文件夹里面，但我引入的时候没有成功，显示404，我们需要修改一下引入外链的路径，在首部去掉/就可以了，不要根路径就可以了，
如果加根路径实际上执行的是该路径http://localhost:1313/外链地址.css
如果不加根路径，实际的是http://localhost:1313/link/moments/外链地址.css，其中，/link/moments是baseURL路径下的路径，在部署时，localhost:1313路径会自动替换为我的博客路径，也就是https://blog.hikki.site。
你可以F12查看请求的路径，根据自己的问题修改。
