qubyte codes

量子字节代码

该存储库包含静态站点生成器和 https://qubyte.codes 的内容。

发电机

生成器主要包含在index.js 中。大部分繁重的工作是由自定义图形构建系统和标记完成的，该系统获取 Markdown 文件并将其处理为 HTML 内容。但它并不完美，一些猴子补丁是必要的。 lib/render.js 模块进行此修补，并添加语法突出显示和数学公式的格式。

serve.js 是一个开发服务器。当文件更改时，构建图的某些部分将重新运行以获取更新的输出。

源文件包含在 src 和 content 目录中。构建时，会创建一个公共目录，并复制其中一些源文件（不需要编译的文件，例如 Service Worker）。其他文件必须生成并在创建时放置在公共目录中。

netlify.toml 是 Netlify 的配置，它托管我的博客（我强烈推荐它）。在撰写本文时，此文件仅包含标头配置。它们针对安全性和 CSS 的浏览器缓存进行了优化。最初我使用 NGINX 在 DigitalOcean Droplet 上托管此博客。其配置仍然是此存储库 nginx.conf 的一部分。

CSS

我使用postcss来编译CSS。原则上，没有它也可以使用CSS。大多数情况下，postcss 用于连接和缩小 CSS。输出 CSS 被散列，并且散列成为 CSS 文件名的一部分。这是为了缓存破坏，因为 CSS 被赋予了较长或不确定的缓存时间，以避免它在加载一次后阻塞页面加载。

除了语法突出显示之外，该网站很大程度上避免使用 HTML 中的类作为 CSS 的挂钩，而是断言语义标记为 CSS 提供了足够的上下文来坚持。

图标

该博客是一个渐进式网络应用程序（PWA），并相应地具有各种尺寸的图标。其中之一也是图标。

帖子（内容）

该目录包含已发布帖子的 Markdown 来源。每个帖子都有一个包含各种元数据的 JSON 序言：

姓名	描述
日期时间	帖子的发布时间戳。如果这是在将来，那么该帖子将不会被渲染。
标题	帖子的标题。
描述	帖子的描述。这将作为元描述和元 twitter 描述添加到 HTML 头部。 Twitter 使用后者来填充 Twitter 卡。
草稿	如果为 true，则不会呈现该帖子。
标签	标签列表。这些显示在每个条目的顶部，并且在通过每个帖子底部的链接分享到 Twitter 和 Mastodon 时也会使用。
网络提及	其他博客中的网络提及列表。
脚本	带有href字段的对象列表。这些将作为模块类型脚本添加到帖子的头部。

模板

我使用把手模板将内容渲染到页面中。其中一些是包含页面，另一些是页面的公共组件。他们是相当老派的人，但做得很好。

Service Worker 和清单

Service Worker 和清单是使该博客能够充当 PWA 的文件。在大多数情况下，这提供了自定义缓存。它还允许在 Android 上“安装”此博客（尽管我对此功能并不真正感兴趣）。