Moments的添加

鸣谢

本次改造是基于砖瓦匠杜重的Hugo主题Moments进行的，这里我把它的主要功能作为一个子模块嵌入到stack主题中，同时为适应stack主题，这里也做了小修改。

体验

大家可以访问 https://blog.kellehod.top/moments/链接体验。点击每个瞬间的内容文字可以进入每个瞬间的详情页，并进行评论。

集成步骤

Moments主题github地址 https://github.com/FarseaSH/hugo-theme-moments.git，先将这个项目下载到本地，然后继续接下来的步骤。

修改配置文件

添加moments的permalinks

为moments添加permalinks，将之前的permalinks由

1
2
3


permalinks:
    post: /p/:slug/
    page: /:slug/

改为

1
2
3
4


permalinks:
    post: /p/:slug/
    page: /:slug/
    moments: /moments/:year/:month/:day/:slug/

修改params

在params中添加下面的参数

1
2
3
4
5
6


params:
    name: Aiden
    momentsSection:
        - moments
    moments:
        paginate: 6

修改params

其中name是当你发布的Moment时名字为空时的默认名字，moments下的paginate是控制Moments一页有多少个moment的参数，这里的分页栏是stack主题提供的。

添加模板文件

因为文件有点多，这里我将需要添加的文件整理了一下，放到这个仓库中 https://github.com/kellehod/moments-extension.git，请根据对应的路径添加到你主题的指定位置。

添加HTML文件

先在layouts下添加仓库的layouts\moments这一整个文件夹
在layouts\partials下添加仓库的layouts\partials\moments这一整个文件夹
在layouts\shortcodes下添加仓库的layouts\shortcodes\moments这一整个文件夹

添加SCSS文件

在assets\scss\partials\layout下添加仓库的moments.scss文件，这个文件是控制Moments样式的
记得在项目中引入这个样式，具体是在assets\scss\style.scss中添加

1

@import "partials/layout/moments.scss";

这里适配了stack主题的暗色模型，并且对移动端的效果进行了些许调整

添加资源文件

在static目录下添加仓库中static下的所有内容。

使用

发布Moment类似于发布博客文章，在content目录下新建一个moments的子目录，然后类似写文章的编写markdown文件。具体写法请参照下载的Moments主题中的README.md文件。

一些使用示例

 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

title: test3

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）

带链接的moment

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


---
name: 赛肯德
avatar: https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg11.360buyimg.com%2Fn1%2Fjfs%2Ft22180%2F273%2F1048905858%2F16927%2Fc863f2d8%2F5b1ee306Nc3fa41e8.jpg&refer=http%3A%2F%2Fimg11.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630730078&t=818b15beaf41cabfa800ddea79f89445

date: 2021-08-04T11:57:49+08:00
title: hello
tags:
 - 图片集
 - 美食

pictures:
 - https://p8.itc.cn/images01/20210119/628400a0528c4dc696efdac8749b176d.jpeg
 - bilibili.webp
 - 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
 - https://img1.baidu.com/it/u=78864137,3397842120&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500

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

比如最近打卡的美食们：

带多张图片的moment

一些修改说明

图片的引用，这里适配了本地图片的引用，你可以在md文件的Front Matter中写图片路径时直接使用本地图片。类似下面：

本地图片引用

Front Matter中的title参数，因为Hugp好像是链接的生成时/moments/:year/:month/:day/:slug/中slug占位符是用title生成的（不是很了解），所以为了避免同一天的moment链接覆盖了（重复了），请写一个unique的title参数！！