## 碎碎念终于！在一月八号晚上，我的第三个(?)博客问世了！而这次我也下定决定开始真正去写一些我想写的东西。 ### 之前的博客这次在开发之前，我先简单复盘了一下之前的两版博客系统。第一版是用hexo去搭建的一个静态博客，搭建这个的主要原因其实很简单，就是想有一个在各个地方都能看我写的笔记的这样一个网页。当时我还在读大二，大一的时候在学校工作室接触到了markdown这么个东西，用过之后发现这东西非常适合我用来记一些课堂笔记和开发文档，即刻下载了Typora，大二的整个操作系统课程笔记我全部使用md来记，虽然说最后脑子里确实也没留下什么东西，至少在硬盘里是存了几kB。 markdown这个东西对软件专业的同学实在是太友好了，每天上课带电脑，直接听到什么记什么，代码也能直接格式化，也不需要调整样式。但是md有一点比较痛苦，就是这东西很难在多个设备上同步，之前上课的时候就在和同学安利md做笔记，得到回复：“OneNote可以云同步”。他说的是对的，虽然说软件专业基本上离不开电脑，但是有些场景下确实存在着云端浏览的需求，比如期末考试前往考场走的时候，我感觉这几分钟内的复习效率才是巅峰，能在手机上打开笔记边走边看实在是方便。后面经过一顿调研，最后决定用hexo配合github pages整一个个人博客。博客内容直接把笔记加上一些frontmatter就搬过来，样式也搞的非常花里胡哨，主题使用[hexo-theme-butterfly](https://github.com/jerryc127/hexo-theme-butterfly)，搭配上一些live2d纸片人。最后效果嘛，不管别人看起来觉得怎么样，自己看起来倒是很乐呵，手机上也能在网页右下角摸小芙兰头实在是赞👍。到了大三的时候，人人卷考研，所以我决定直接准备找工作，少走三年弯路（。可能也是因为客户端做的实在是不太顺心，原生Android概念太复杂，Flutter当时还处于起步阶段并不成熟，我还是决定转做前端了。那既然选择了这条路，就得有些能拿出手说说的项目，不然实在难以混过面试难关，毕竟有项目就可以问项目，没项目就只能问八股，让人背的头疼啊。在这个背景下，我开始从头搞我的博客，也就是第二版博客。第二版博客的重心就不在浏览使用上了，我将重心更多放在体现技术水平上，搞很多花活。比如当时非常前卫的SSR，直接用Next.js撸；css特效也加满，什么视差滚动毛玻璃都往上搞；代码层面虽然没有啥特别复杂的逻辑和创新点，但是尽量写的挺工整。最后导致博客看起来有点四不像的意思，有的地方非常简洁大方，有的地方特效过猛，甚至会出现较为严重的性能问题。这种项目写在简历上实属不妥，最后还是决定弃用了。 ### 现在的博客至于为什么我突然又把博客捡起来了，主要还是有三点原因吧。首先是社交圈子的结构调整，少了可以倾诉日常的聊天对象，把想说的话积压起来对自己的精神状态一定会有影响，所以我还是觉得要有一个地方来记录一下自己的日常（这个说的似乎有些过于隐晦了`流汗滑稽.gif`）。另外一个原因是工作方面的，自从转型做策略算法工作之后，工作的物理强度明显下降，但是精神压力也大幅提升，这就导致上班时间虽然没干什么活，但是非常折磨。唉！真的怀念之前在公司当前端时候的忙碌又开心的生活节奏啊～呃，好像之前也不是前端。反正截至目前的情况就是这样，上班能挤出不少空余时间来发牢骚。抒发一下策略做负时的绝望，有利于自己的身心健康`流汗滑稽.gif`。最后一个原因就是自我成长，虽然说搞一个博客网站并不能带来什么实质性的能力提升，但是至少能起到一个自我监督的作用。我本人是和自律二字不怎么沾边的，而且三分钟热度，这次搞这个博客竟然能搞出一个能用的东西我觉得就比较可贵了，好不容易没烂尾啊（。偶尔发一些小的生活记录，也能让自己及时发现之前的问题，捡起之前想要养成但是最后被遗忘的习惯。当然提升表达能力也是比较重要的一个点，多写东西一定会在某种程度上提升表达能力，等到了季度汇报的时候不至于词穷。 ## 博客开发记录一开始想写这个文档的时候其实就是想把开发记录多写一些，结果没想到上面瞎扯的内容竟然写了不少，哈人，，，还是赶快进入正题，把博客开发的流程和一些点记下来，不然后面突发奇想打算迭代的时候真的会两眼一黑（上一个博客弃坑也有这方面的原因）。 ### 技术选型提到做博客的话，我感觉大多数人一定会想到WordPress或jekyll、hexo、hugo这种静态站点生成工具。考虑到WordPress需要云服务器，我的家用小server的可靠性实在是难以支撑这东西稳定运行，而且ip地址变化的话ddns并不能做到立刻更新，这个方案就不在考虑范围内了。静态站点生成器其实很符合我的需求，之前用hexo的时候感觉使用体验非常良好，主题选择也不少，不过我想这些静态站点生成器还是有些“拘束”，也就是所谓的“opinionated”，扩展一些功能不是特别方便，存在较高的学习成本，我期望还是要有一些能够放飞自我的空间，加一些完全没有用但是好玩儿的小东西。所以我考虑从前端脚手架开始搞，借助ChatGPT提效，开发效率还是很高的，不比研究配置hexo主题差。对比了几个常用的SSR或静态前端框架，最后发现还是Next.js比较合适，原因有几点： - Next.js是SSR框架，Vercel可以直接部署Next.js应用，这个非常吸引人； - App Router特性比较成熟，相比之前Next.js 13的时候，开发体验有了巨幅提升，至少不会说好多特性要用的时候发现还WIP，，，； - 对我来说学习成本比较低，我是React阵营的前端仔，直接上手Next.js门槛比较低，而且之前我也用Next.js撸过一些小的项目，虽然是Pages Router，不过开发体验没有特别明显的区别。果断Next.js搞起～语言上还是选择了Typescript，我个人其实是偏好Javascript + JsDoc的，不过Typescript在企业中的覆盖率还是太广了，多写写对工作也是有帮助的。而且在前公司写了一年ts之后，我发现类型体操其实也没有那么乱，搞个博客系统用不到特别复杂的东西。至于样式框架，Css-Modules对我来说是不错的选择。现在比较流行的TailwindCSS也非常不错，但是我不太喜欢它在我的tsx里面倒垃圾，写的时候非常爽，维护的时候很困扰，可能需要购买一个43寸的超长带鱼屏（。还是决定用Css-Modules配合Sass来维护样式。Sass的嵌套特性增强了样式表的可读性和开发效率，我选择Sass主要也是这个原因，Css3现在也在搞原生的Nesting，不过浏览器支持率太低啦。 ### 源码说明 #### 项目结构项目采用Next.js的App Router架构，页面目前只有四个，也只想到四个：主页、归档、关于、文章内容页。组件有文章入口组件和导航栏组件、以及一个nprogress-bar的包装组件。目录结构如下： ```markdown . ├── app │ ├── about │ │ ├── page.tsx │ │ └── page.module.scss │ ├── archive │ │ ├── page.tsx │ │ └── page.module.scss │ ├── blog │ │ └── [slug] │ │ ├── page.tsx │ │ └── page.module.scss │ ├── layout.tsx │ ├── global.scss │ ├── page.tsx │ └── page.module.scss ├── components │ ├── article-entry.tsx │ ├── article-entry.module.scss │ ├── nav-bar.tsx │ ├── nav-bar.module.scss │ └── progress-bar-provider.tsx ├── types │ └── article.d.ts ├── utils │ ├── markdown.ts │ ├── mixins.scss │ ├── new.mjs │ └── touch.mjs └── content └── *.md ``` #### Layout 全局的Layout非常简单，body中直接容纳`NavBar`和子元素。样式限制了最小高度为`100vh`，这样能确保随便点开一个页面都能完整的展示背景图，看起来更像一个网站，而不是一篇文稿。y轴溢出行为直接设置成了`scroll`，避免页面突然出现滚动条时出现的背景图大小变化（其实应该可以更改滚动条position设置？）。 ```scss :root { font-size: 18px; font-family: var(--font-crimson-pro), var(--font-noto-serif-sc), serif, sans-serif; color: whitesmoke; background: url("/background.jpg") no-repeat fixed, linear-gradient(150deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%) no-repeat fixed; background-size: cover; background-position: center; body { margin: 0; min-height: 100vh; overflow-y: scroll; } ::selection { background: burlywood; } } ``` 全局字体设置成了18px的大小，看起来没那么费眼。字体选择就纯属个人爱好了，我这次在正文使用了衬线字体，给人有一种纸面媒体的感觉，拉丁字符使用Crimson Pro字体，中文字符使用Noto Serif SC，等宽文字使用JetBrains Mono。字体都是通过变量的方式导入，并非直接使用字体对应的className。 ```typescript className={[ fontCrimsonPro.variable, fontNotoSerifSC.variable, fontJetbrainsMono.variable, ].join(' ')} ``` #### 主页受之前使用的博客主题的影响，我后面设计主页时都会加一个整屏的封面，里面只放博客标题和下面的slogan。不过现在的主页也只有一个封面的作用，目前还没想到要在主页上放什么东西，可能要放一个随机贴文推荐？也可能搞点什么友情链接之类的？甚至是二次元（不行。 ```typescript export default function HomePage() { return (

TranceDream的博客

After we're gone, the spirit carries on.

) } ``` #### 归档归档页面显示了所有的文章信息，就是一个`ArticleEntry`的列表。分页本来是做了，不过实在想不到该怎么让分页器的样式变得好看，结合我现在的贴文数量，最后我决定先把分页器删了，以后文章数量多了再想办法搞吧，第一版嘛，功能就不搞太多了，能用就够啦。 ```typescript export default function ArchivePage() { const posts = getAllPosts() return (

{article.title}

{dayjs(article.date).format('YYYY-MM-DD')}

{article.tags.map(tag => ( #{tag} ))}

{article.description}

) } ``` #### utils utils里面东西不多，但是比较杂。markdown.ts包含了处理md和文件读取的一些方法；mixins.scss定义样式mixin，主要是响应式处理的封装；new.mjs用来创建新的帖子，提供一个交互式的脚本，省的自己编写frontmatter了；touch.mjs提供了一个快速更新文件日期的功能，主要解决的问题是发布时文章日期与创建文件的日期相差太远，用dayjs更新要比手动填写要更准确。 ### 后续规划现在这博客完全是一个初版原型的形态，后面要迭代的功能实在是不少，目前能想到的我先列在下面吧。 - [ ] 想想About页面能放什么东西，要不把我的简历搞里头？ - [ ] 主页下面放什么功能呢？我觉得可以先整一个最新文章x3 - [ ] 归档的分页器想想怎么设计，代码都有，研究一下怎么写样式 - [ ] 现在文章tags还没啥用，要不要搞个分tag页面 - [ ] 添加更多语法支持，如LaTeX、GFM、Mermaid等 - [x] 上面的文字里掺杂了好多`流汗滑稽.gif`这种“表情占位符”，我希望最好有一个自定义的表情语法可以实现无痛插入表情图 - [ ] 添加评论区，看看Gitalk能不能整一个

关于"TranceDream的博客"