Changelog

TOC

Open TOC

TODO

2024.7

2024.2

集成 Expressive Code

Terminal window
npm i is-interactive
npm i astro-expressive-code

除了可以配置代码块主题外，还有一些有趣的特性：

  1. ANSI escape sequences
Terminal window
ANSI colors:
- Regular: Red Green Yellow Blue Magenta Cyan
- Bold:    Red Green Yellow Blue Magenta Cyan
- Dimmed:  Red Green Yellow Blue Magenta Cyan


256 colors (showing colors 160-177):
160 161 162 163 164 165
166 167 168 169 170 171
172 173 174 175 176 177


Full RGB colors:
ForestGreen - RGB(34, 139, 34)


Text formatting: Bold Dimmed Italic Underline
  1. Marking full lines & line ranges
// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"
  1. Using diff-like syntax
this line will be marked as inserted
this line will be marked as deleted
this is a regular line

2023.9

flow

开发『数字生命』

DIKW 模型将广义上的知识分为 Data - Information - Knowledge - Wisdom 四层金字塔结构。经过近三年的试错，目前我尝试通过分层的方式构建自己的「知识体系」，其信息流如下：

最后，出于求异和 put together 的目的：

blog

升级博客主题至 AstroPaper v3

渐变效果 👍

2023.7

外部资源汇总

子域名

来自软工三助教的建议

期望 xxx.vgalaxy.work 可以重定向到 vgalaxy.work:xxxx

两步走：

  1. 在 DNSPod 中添加对应的解析
  2. 修改 /etc/nginx/nginx.conf 添加下述内容
server {
        listen 80;
        server_name fat12.vgalaxy.work;
        location / {
                proxy_pass http://150.158.197.57:4000;  # 将子域名转发到指定端口
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

notion

偶然体验了 notion 导入和导出 markdown 的功能，感觉还可以接受，于是考虑将 todo 部分迁移至 notion

迁移过程中遇到了下述问题：

site

添加了更多的 social icons

blog

又换博客框架力，照例记录下原博客

89027d648ded4b959af5e12625d44f99.png

实习摸鱼的时候调研了下静态网页生成框架，我的需求其实很简单，在 Typora 中记录的文档最多通过添加一些元信息即可通过框架生成对应的页面，同时尽可能保证 Typora 中可视化的结果与最终的页面一致。

一波网络冲浪之后看到了 AstroPaper 这个基于 Astro 前端框架的主题，于是尝试迁移，迁移过程中遇到了一些波折：

参考 https://docs.astro.build/en/reference/configuration-reference/#markdownremarkplugins 和 https://github.com/remarkjs/remark-math 即可

详见文档，写个 Python 脚本迁移一轮即可

一个简单的例子比如

f04ea5dcd02b44c38d07e8968efe7fb2.png

主题可以自动为 post 生成 OG image，主要利用了框架的动态路由功能，配合 vercel 在构建阶段为每篇 post 生成对应的 svg 文件，并渲染为 png 文件作为 OG image

注意 [xxx].svg.ts 这个文件，其中 xxx 的取值即为最终 svg 文件的文件名，考虑到 post title 往往存在空格，于是考虑将每篇 post 的 postSlug 作为文件名，同时在 props 中传入 title，用于之后生成 svg 文件

export function getStaticPaths() {
  return posts
    .filter(({ data }) => !data.ogImage)
    .map(({ data }) => ({
      params: { ogSlug: data.postSlug }, props: { ogTitle: data.title }
    }));
}

之后可以游玩 Vercel OG Image Playground，最终的效果如下

bad1ab4353a84235b0a86f0d2278f6fe.png

TOC 替换，要求 TOC 的 heading 层级与需要形成目录的最外围 heading 层级一致，具体可以参考

https://github.com/remarkjs/remark-toc#use

对于 inline code 主题作者是这样去除的

prose-code:before:!content-[''] prose-code:after:!content-['']

对于 blockquote 可以考虑这样去除 (待验证)

p::before {
  content: "" !important;
}
p::after {
  content: "" !important;
}
c++ -> cpp

否则无法识别

aliyun oss 外网流出流量飙升，记下价格

00:00 ~ 08:00 - 0.25 元 / GB
08:00 ~ 24:00 - 0.50 元 / GB

目前的博客主题框架较新，兼容性也比较激进，已经观察到了页面布局异常的情况

如图所示，情况还比较复杂

e4e86b250e1e4824b9e84d06facb8271.png

目前将 dark mode 也设置成一个 light mode 暂时规避

参考 https://github.com/temando/remark-mermaid

首先是安装

Terminal window
npm install @dendronhq/remark-mermaid

配置 simple mode 为 true，即原地生成 svg 代码

然后参考 Mermaid | Calling the JavaScript API，添加

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

由于博客中存在其他 elements 也是 svg，所以需要添加样式

div.mermaid svg {
  @apply w-full h-auto
}

这个问题在移动端较为明显，甚至发现了一个相关的 issue

可参考 word-break - CSS: Cascading Style Sheets

感谢某前端 RD 指点

当然数学公式块就没有办法了

参考 https://github.com/satnaing/astro-paper/pull/102 即可

记得加上 word-break: keep-all;

2023.1

site

优化个人主页，使用 svg + href 的风格，例如

<div class="social-icons">
    <!-- github -->
    <a href="https://github.com/VGalaxies" target="_blank" rel="noopener noreferrer me" title="github">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path
                  d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22">
            </path>
        </svg>
    </a>
</div>

由于 PaperMod 对 icons 的支持有限，所以需要手动修改 index.html，添加自定义的 svg 代码，同时锁定主题为 light 风格

后来发现可以扩展 layouts/partials/svg.html

assets

扩展图床的概念，目前支持如下文件类型

其对应的正则表达式如下 (Python)

pattern_md = r".*?!(\[.*?\])\((.*?)\).*?"
pattern_html = r".*?<(img|video|audio) src=\"(.*?)\" alt=(\".*?\").*/>.*?"

对于视频和音频格式，可以参考这里，这里要求加上 alt 属性

但是在实际的 blog 中，无法像 Typora 那样进行预览，所以仅用于备份

对于 pdf 格式，参考了这个 gist，但是没有达到预期的效果，可以考虑存储在 Google Drive 中，和图床区分开来

目前不考虑本地化 <iframe> 引用的资源，其来源有

font

参考这个项目，将博客默认字体设置为 LXGW WenKai Mono，但需要客户端安装对应的字体

后来发现 @font-face 压根没起作用 🤣 在 <head> 中引用下面的内容即可

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont/style.css">

2022.12

图床

向云端部分妥协

由于考虑将记笔记的工作从 Typora 部分迁移到 Obsidian，而 Obsidian 对于 <img> 标签引用的本地图片支持并不完善，所以考虑使用 PicGo 配合华为云图床，以支持 markdown 文档中的图片甚至视频资源。

自动化方面，由于图片链接已经自动转换为了图床形式，所以部署实际上只需要一步拷贝即可。由于图床中可能包含一些未被任何 markdown 文档引用的冗余资源，所以考虑定期下载图床中所有被引用的资源到本地，然后删除图床中的 assets 文件夹，将所有资源随机化重命名后，再次上传到图床。

Auto Correct

笔记写作风格的统一，对我而言一直是一个比较头疼的问题。大一上学期我一直使用 OneNote 在云端记笔记，由于大一寒假的时候险些发生过一次大面积的笔记丢失惨案，所以从那时开始，我与所有的云端笔记软件光速切割，开始尝试使用 Typora 记笔记。那时候记笔记比较随意，最致命的一点就是中英文之间不加空格。后来逐渐了解到了一些中文文档的写作规范，但是之前已经写了大量的笔记，如果一个一个改，工作量过大。

热知识：在 Typora 中键入 <Shift + F12> 打开开发者工具

在比较之后，我使用了下述三个脚本进行文档的 Auto Correct

  1. https://github.com/huacnlee/autocorrect
  2. https://github.com/lint-md/lint-md
  3. https://github.com/hjiang/scripts/blob/master/add-space-between-latin-and-cjk
Terminal window
autocorrect --fix tmp.md ; lint-md tmp.md --fix ; curl -s https://gist.githubusercontent.com/VGalaxies/d07d39ccfcb10655baeb63b71bd009e2/raw/6ef0d9cab1a88dc6391f022643fc6eebf3c45292/fix.py | python3 - tmp.md

由于文档的复杂性 (之前过于随意)，在 Auto Correct 后仍然需要一定的时间进行校对

之后这些脚本可以用于 lint 而非直接 fix

Image Loading

需要为图片懒加载添加一个加载图片。最初的想法是添加一个透明背景的 gif 图片，为此参考了这个视频进行手动抠图，结果发现在 dark mode 下透明背景还是会被转换为白色背景。最终选择了 loading cat 作为加载图片

25bf349c1fd64e37b00eee59d11e5f43.png

2022.11

自动化部署

流程

公式渲染

在使用了脚本简化了博客部署全过程后，可以仔细分析公式渲染的问题

博客目前使用的渲染器为 MathJax，参考 https://github.com/mathjax/MathJax/issues/2312

使用如下代码渲染多行公式

\begin{array}{l}
aaa \newline
bbb \newline
\end{array}

左对齐

\begin{align}
aaa \newline
bbb \newline
\end{align}

右对齐

部分公式仍无法正确渲染，例如

u=\left\{\begin{array}{l} \frac{3}{16} & u = 3 \newline \frac{3}{8n} & \text{otherwise}\end{array}\right.

此时需要使用 cases env

u=\begin{cases}{c} \frac{3}{16} & n = 3 \newline \frac{3}{8n} & \text{otherwise}\end{cases}
\{\}

2022.8

ssh

需求

为此需要为云服务器绑定密钥，可以参考

Terminal window
ssh -i <已下载的与实例关联的私钥文件的路径> <username>@<IP address or domain name>

scp 命令也适用

更一般的多密钥情形，可以参考

对于第二个需求，可以参考

https://superuser.com/questions/355029/how-to-automatically-run-commands-on-ssh-login

修改 ~/.bashrc

Terminal window
if [[ -n $SSH_CONNECTION ]] ; then
    echo "I am logged in remotely"
    sudo nginx -s reload
fi

domain

https://console.cloud.tencent.com/domain/all-domain

https://console.cloud.tencent.com/cns

https://console.cloud.tencent.com/beian

然后对主题的 footer 进行修改

diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
index 4b041a3..b732430 100644
--- a/layout/_partial/footer.ejs
+++ b/layout/_partial/footer.ejs
@@ -37,4 +37,5 @@
       <% } %>
     </div>
   <% } %>
+  <p align="center"><a href="https://beian.miit.gov.cn/">苏 ICP 备 2022034061 号</a></p>
 </div>

或者修改 _config.oranges.yml 中的 footer

https://console.cloud.tencent.com/ssl

SSL 证书 Nginx 服务器 SSL 证书安装部署

修改配置文件 /etc/nginx/nginx.conf

放置在 http 块内

server {
        # SSL 默认访问端口号为 443
        listen 443 ssl;
        # 请填写绑定证书的域名
        server_name vgalaxy.work;
        # 请填写证书文件的相对路径或绝对路径
        ssl_certificate ssl/vgalaxy.work_bundle.crt;
        # 请填写私钥文件的相对路径或绝对路径
        ssl_certificate_key ssl/vgalaxy.work.key;
        ssl_session_timeout 5m;
        # 请按照以下协议配置
        ssl_protocols TLSv1.2 TLSv1.3;
        # 请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;
        location / {
            # 网站主页路径。此路径仅供参考，具体请您按照实际目录操作。
            root /var/www/blog;
            index index.html index.htm;
        }
}

然后 sudo nginx -t 即可

2022.7

先截图记录一下原博客

706979ae07f84f93a63792a1b278af76.png

336f14f0ff734f2490d14334ca271be8.png

本来尝试使用 Hugo + PaperMod

初始化

git clone git@github.com:VGalaxies/hugo-site.git
hugo new site hugo-site --force -f yml
cd hugo-site/
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod
hugo serve -D
hugo -D

简单配置一下

baseURL: https://vgalaxies.github.io
title: V_Galaxy's site
theme: "PaperMod"


params:
  profileMode:
    enabled: true
    title: "Hi there \U0001F44B" # optional default will be site title
    imageUrl: "https://vgalaxy.gitee.io/img/avatar.JPG" # optional
    imageWidth: 120 # custom size
    imageHeight: 120 # custom size
    buttons:
      - name: "Blog \U0001F4DA"
        url: "https://vgalaxy.gitee.io/"
      - name: "Github \U00002328"
        url: "https://github.com/VGalaxies"

将网页部署到 github 上

页面配置模板

参考 https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-variables/#page-variables

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
author: ["V_Galaxy"]


categories:
tags:
description: ""
weight:


draft: false


hidemeta: false
searchHidden: true
hideSummary: true
disableShare: true
comments: false
ShowCodeCopyButtons: true
ShowWordCount: true
ShowBreadCrumbs: true


showtoc: true
tocopen: true
---

使用 KaTeX 渲染数学公式

更多参考

https://www.sulvblog.cn/posts/blog/

后来看到 jjppp 的 blog，决定使用 Hexo + oranges

Hexo 还是那几条命令

hexo server
hexo generate
hexo clean
hexo deploy

使用 MathJax 渲染数学公式，发现了公式不换行的问题

参考 https://github.com/mathjax/MathJax/issues/2312

将 \\ 替换为 \newline

部分公式仍无法正确渲染，可能是因为写法不规范 or 解析器 or 渲染器的问题

需要递归的从远程仓库拉取代码

git clone --recursive git@github.com:VGalaxies/hexo-site.git
npm install

并修改 source/images/avatar.xxx

或者考虑删除子仓库的 .git

2022.2

从 Jekyll + Github Page 变为 Hexo + Github Page 方案，主题为 Butterfly

建站

新建文件夹 hexo-blog

npm install -g hexo-cli
npx hexo init .
npm install

其中可能需要 npm audit fix —force

部署

修改 _config.yml

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/VGalaxies/VGalaxies.github.io.git
  branch: main

再安装

npm install hexo-deployer-git --save

然后键入如下命令

npx hexo clean
npx hexo g
npx hexo d

请记住这三件套

主题

Butterfly - A Simple and Card UI Design theme for Hexo

官方文档很详细，不再赘述

配置方向如下：

已知问题

工作流

2021.8

Jekyll + NexT

这是博客的模版 NexT

使用中发现的一些问题：

713fc970b7854549aee063a21790cb17.png