闲来无事，因hexo主题的博客网站已经长草多年，且网站主题风格太古董了点。最近也在使用Typora+PicGo+Cloudflare R2(图床)的方案写点文字记录日常。
需求
由于喜欢Typora-Gothic等主题风格，想着移植到自己的博客上，网上也找了一些开源方案（可在web端在线编辑的markdown）：
-
https://b3log.org/ 有些有意思的开源博客项目和在线markdown编辑器Vditor（类似Typora，可以满足所见即所得的即时渲染效果），由于他们的博客开源项目的风格不符合我的审美故不采用，但这个mardown编辑器还是可以折腾一下的。
-
WordPress老牌独立站和博客站的海外开源项目（装插件可支持md），可自定义主题，有前后端且需有自己的服务器，有点笨重。原本想着用来自己大展身手来设计一下主题和页面设计来着，想法就是黑白灰简约风，加上一些动漫的元素（什么龙珠/火影/海贼王/乌龙院/游戏王/老夫子/宫崎骏）作为背景图，但是现实是残酷的，在花瓣收集了一些动漫图就没下文了，还想着整合成一张背景图啥的（还想着用AI自动合成，发现太拉胯了，卒弃…）
-
码道人markdowner （卒了，只找到几篇相关的介绍文，想法和风格还是可以的，项目没了）
-
Mweb：收费的客户端IDE，解决了Typora没有云服务这个弊端，且支持同步文章到各大主流的平台，支持API接入同步等等
-
Hugo：很符合我的胃口，之前有前后端开发经验的话，上手很快。里面的模板语法和自定义开发一些小功能比Hexo友好太多了，照着别人的主题功能，做一两次就能上手了。参考博客和主题如下：
实现
基于zozo主题进行的一些调整和优化，这里只说一些我自己优化的点，已有的参考就不赘述了
-
调整页头页尾的艺术字体
本身自己是书法爱好者，在这方面有一丢丢自己理解和研究的艺术修养，喜欢书法字体。原先是参考字里行间（已下架好久了，那时候因为在上面写过一篇西藏旅游记录，然后通知我迁移保留数据），后面知道这款产品负责人周楷雯，便关注他相关信息（微博和少数派的文章），看完了他写的一本电子书《Producter：让产品从0到1》和把玩了一下苹果应用"小记"。 用了他书里分享的康熙字体，但是字体太大了，首次加载耗时几秒钟，这个是不能接受的，后续用了阿里的方案。
- 第一字体
- 在线字体转图片
- 阿里妈妈智造字：使用了隶书字体风格，只需要输入自己想要转换的字体（只支持这几个字），然后下载到本地或者复制代码直接使用阿里的cdn加速字体即可。
- 开源字体子集JS方案：可按需输入你想转换的字，根据这些字生成体积更小的font-family的字体子集，到达优化网站的加载速度。
- 文悦字库：有我喜欢的康熙字体
-
右侧回到顶部的导航扩展（参考链接：https://www.jsdaima.com/js/3577.html）
基于回到顶部优化，在右侧按钮加上了导航栏显示，参考做了一些调整（具体F12参考） 如需源码，请留言…
-
摄影图片可自动获取图片日期/参数/定位地点等信息（节省录入日期时间~懒人~）
想法来源是：https://camarts.cn/，可以看到图片参数/地点/相机/镜头，评级这个好像可以通过右键修改图片参数信息。 基于exif.js获取图片的日期和拍摄相机相关参数，然后通过经纬度获取定位地点（百度/谷歌/高德地图都是有额度限制的，后续通过chatgpt获得一个海外的API，具体实现F12查看网页源码，参考实现即可）
部署
参考了木木老师的hugo-github-cloudflare部署自动化方案，看木木老师的图片原本以为要把主体放在外面才行，然后首次就报错：fatal: No url found for submodule path ‘xxx/xxx‘ in .gitmodules gitsubmodule。
后续还是保留之前的目录结构，删掉重新部署了好几次才行…
后续上线加上了卜算子的文章和站点访问统计，还有自带的文章字数和阅读时长，上线前前后后大概花了一周多的时间，包括整理写文章和找回/挑选摄影图片比较费时。
生活嘛~折腾不止~生命不息~