1.文章搜索功能
方案一 fusejs、markjs 参考链接:https://zhuanlan.zhihu.com/p/569677497
方案二(本网站使用) algolia 使用hugo 命令后,public文件夹下生成index.json文件 参考链接https://ieblyang.github.io/hugo-algolia/#4-%E7%94%9F%E6%88%90%E7%B4%A2%E5%BC%95%E6%96%87%E4%BB%B6
2.字数浏览量统计
方案一 不蒜子 themes\Sakura\layouts\partials\footer.html 引入
方案二 waline自带的统计功能
3.首页
3.1导航栏
themes\Sakura\layouts_default\baseof.html 中引入 themes\Sakura\layouts\partials\header.html 中定义
3.2首页文章列表 分页功能
themes\Sakura\layouts\index.html 使用hugo提供的分页器实现
3.3 首页文章卡片
文章卡片用于首页展示最新文章样式 themes\Sakura\layouts\partials\widgets\post\post-card.html
首页中文章卡片和网站首页底部的评论数和阅读数都是首页上引入id=waline的 waline功能实现的
4.文章样式
themes\Sakura\layouts\posts\single.html 文章统计信息 字数 hugo自带、评论数 waline功能、访问次数 不蒜子实现、阅读时间 hugo自带
5.目录、标签 分类样式
6.评论功能
单个文章themes\Sakura\layouts\posts\single.html 评论模块themes\Sakura\layouts\partials\comment.html waline 辅助提供文章浏览数和文章评论数功能 我自己的waline评论部署到vercel上了
7.footer页脚部分
themes\Sakura\layouts\partials\footer.html
7.1 网站统计信息
文章数 hugo提供变量 访问总次数 访客总人数
7.2网站介绍信息
7.3备案号
7.4加载脚本
8.文章归档页面 /archives
主要功能:文章发布历史归档页面
匹配模板样式关系:
content\archives\index.md 表示新页面,md文件前置元数据参数layout指archives优先匹配themes\Sakura\layouts_default\archives.html
参考:
匹配规则见官方文档https://gohugo.io/templates/lookup-order/
themes\Sakura\layouts_default\archives.html页面样式内容介绍
按照文章创建时间遍历网站所有文章https://gohugo.io/variables/pages/
.Date支持方法https://gohugo.io/methods/time/ {{ $post.Date | time.Format “:time_medium”}} //返回日期 11:44:58 pm
参考https://gohugo.io/functions/time/format/
9.回忆录
10.友链
11. 主题切换按钮
位置 themes\Sakura\layouts_default\baseof.html 可以参考这篇文章,这个是hexo的但hugo也一样 Sakura主题添加背景切换功能