Blog | 主题重新施工，和书影游展示墙
装修博客是人类永恒的事业——by 塔托雅。
参考链接
How to output the number of blog articles in a Hugo website?
尘归尘，土归土
第一步是文章逐渐增加，想把生活类文章和折腾类区分一下，讨论的时候朋友提出可以用il8n，利用多语言进行切换，这方法非常好，但我觉得我还没有必要区分得这么楚河汉界，于是从菜单栏上做文章。
最终的实现效果：不同菜单区别显示不同内容，每个菜单栏点进去有独立的归档页面
做起来很简单，以我的Weekly/Others为例：
-
在
content下新建一个Weekly文件夹，以想要的组织方式建立文件结构，再把需要的md文件统统拖进去。 -
在
config.toml中处理菜单栏：[[menu.main]] name = "Weekly" url = "/weekly" weight = 2 [[menu.main]] name = "Others" url = "/posts" weight = 3 -
在
layout中新建Weekly文件夹，复制posts中的single.html，粘贴进去，这一步是为了Weekly中的文章能够正常显示meta，比如文章字数统计。 -
修改
footer.html，这一步是为了页尾能正常显示文章篇数将{{ len (where .Site.RegularPages "Section" "posts") }} 篇文章 修改为{{ len (where .Site.RegularPages "Section" "!=" "") }}篇文章
修改后Weekly文件夹中的文章链接会发生变化。
豆瓣内外：如数家珍
上一个博客的时候用HEXO-douban插件做过一个书影展示页面，原理是爬取豆瓣ID的标注数据并且生成html页面，之前去看过一次，长期缺乏维护，果不其然挂了。
前两天正好翻到林木木的微博，看到了新的轮子，又蠢蠢欲动起来，看了一下实现方式，前半部分和HEXO插件差不多，但看上去更便利维护，如果有一天豆瓣的爬取出了问题，html模板在本地，完全可以自己手动维护CSV表格来继续更新页面。
于是来折腾吧！
Github，Action！
Github Action配置方面和作者说的一样非常简单，但我的需求有一些不一样：我不太用豆瓣标注书影，有很多集中标注记录和缺记漏记，当数据抓取完毕，需要手动修改生成的CSV表格，之后再在修改后的表格上加上新的数据，因此连带着不能用作者写好的定时抓取，需要改一下Gtihub Action，设置当仓库更新的时候才抓取数据。
找个不太用的Gihtub Repo，新建一个Workflow，注意这里的ID字段要填写豆瓣ID而不是昵称，如果没有修改过，一般是一串数字。填写完毕后保存Workflow为douban.yml，提交commit后触发，大约1-2分钟左右执行完毕，就可以在Repo的data/douban文件夹中看到movie.csv和book.csv两个文件。
展示页面，Action！
在对CSV表动手前，先试试让展示页面上线，满足一下短平快的平凡喜悦——用到的是林木木写好的两个页面，并根据喜好，对筛选部分稍作修改，代码大概长这样：movies.html
删去了根据影片Tag的筛选，只保留了年份和超喜欢/超不喜欢的筛选，保存为moives.html，阅读与游戏的部分也一样，只是把代码中的moive换成book或者game。
如果CSV表格路径有修改，需要把{{$movies := getCSV "," "data/douban/movie.csv" }}这句中的data/douban/movie.csv换成自己的路径。
如果无法显示豆瓣图片，检查一下是否少了<meta name="referrer" content="no-referrer">这一句。
之后再新建movies.md，写入如下内容，意思是将movies.html文件作为页面模板。
---
title: "探觉石和观测装置"
layout: "movies"
---
三个文件放置的位置分别如下：
movie.csv放置在data/doubn下
movies.md放置在content目录下
movies.html放置在layout/_default目录下
之后hugo server，访问http://localhost:1313/movies/，就能够看到电影展示页面了！
加减乘除，Action！
前面说到，我的豆瓣标注非常混乱，因此需要修改CSV表格来调整数据展示，同时豆瓣对游戏的支持很差，所以游戏库数据最好自己来填，下一步！编辑CSV表格！
CSV本质上是纯文本，用逗号分割值来区分列，一般我们用Excel类程序来编辑CSV表格，保存时会提示“该文档可能含有不能以「CSV 文本」格式保存的格式或内容。（或是提示不兼容的格式）”，保存时要去掉多余的格式。
之前只需要本地查看的时候我习惯用WPS，但是实际用WPS编辑了几次后发现保存后会乱码以及无法读取，最后用了LirbreOffice，开源免费支持中文，还有便携版！
如果要自己增添数据的话，只需要写入title、poster(图片地址)、url（点击图片后跳转地址）、star、star_time（标注时间）五个列，其中，如果使用上面的html代码，star为5时，会出现在“超喜欢”筛选中，star为1时，会出现在“超不喜欢”筛选中。
展示页面会按照表格排序（而不是标注时间）进行排序，所以调整表格后记得重新排一下序。
游戏数据方面，我参考了这一篇：你到底要用多少个游戏标记网站，最后综合了bangumi番组计划和豆瓣游戏页面的信息。
我会送花给你
做完了展示页就开始想怎么放在博客上比较好，最直接的想法当然是放在菜单栏，但我不打算这么做，会影响主页的美观性——那么做个多级菜单呢？看文档还挺简单的，但比划了一下觉得还是很难看，正巧，看到Mengru做了一个标签墙小工具，非常好看，那么就它了！
直接查看标签墙Live demo的源代码可以看到html代码和JS代码，保存JS代码为tags-wall.js，放置在static/js目录中，其中修改下面这句的颜色代码，可以改动Tag的随机颜色。
const Color = (Array.isArray(Config.color) ? Config.color : [
html则保存为tags-wall.html放在layout/_default目录下，Mengru做的标签墙会随机分布Tag位置，我想要整齐排列不重叠的样式，于是修改了一下代码：tags-wall.html
需要注意的是，由于Tag直接写在html中，所以链接部分必须转义，用/来替代/，同时如果不写入标签大小，也需要加入一个转义符来转义一下。
FINAL FANTASY XIV/9/是玩家/https://ff14.link/
改写成：FINAL FANTASY XIV/9/是玩家/https://ff14.link/
倾听感受思考//FF14
改写成：倾听感受思考///FF14
配色部分用了HUE / 360 The Color Scheme Application这个网站，选择合适的参数后沿着色轮点选一圈就可以找到观感统一的颜色，这方面知识我还是看開樂设计的视频学到的。
最终的结果就是这个新的About页面了！用了FF14 6.0的任务名来命名，页面标题和相关名称也都用了FF14的任务名，非常喜欢，请大家来看：我会送花给你