Posted 2024-09-16Updated 2024-09-28Notea few seconds read (About 90 words)

因为oh-my-live2d官网崩了，所以需要自己私有托管一下live2d服务才能让博客网上的小埋复活。(bonus:可以借此尝试自己制作一个live2d形象)
更于9/25，拖着很久没搞，然后官网自己复活了，好好好，直接快进到customized live2d。

Posted 2024-09-03Updated 2024-09-28Note3 minutes read (About 385 words)

Hexo Comment System -- Twikoo

因为之前使用gitalk评论系统在国内用不了了，所以尝试更换为一些国内可用的方案。其中一个是国内开发者开发@imaegoo搭建的Twikoo系统

拜一下，我的博客网也是改自他的魔改版hexo-icarus主题

对，然后针对icarus系的主题，官网有提供详细例程
主要分为云函数部署部分和前端配置部分

云函数

归根结底就是为静态的博客网提供一个可以响应用户数据提交和显示的服务。
主要分为两块

Mongodb: 用于云存储用户评论数据
Huggingface: 用于部署一个云服务器，响应用户需求，与db交互。

那么首先就需要去mongodb申请一个数据库，依照这个例程：https://twikoo.js.org/mongodb-atlas.html

密码保密)

随后huggingface的服务就通过这串链接字符串来与这个数据库交互

随后去huggingface开启云服务器:https://twikoo.js.org/backend.html#hugging-face-%E9%83%A8%E7%BD%B2
我的云仓库为：https://huggingface.co/spaces/CallMeChen/BlogComment
启动服务成功后可以看到如下log:

前端配置

参照 https://www.anzifan.com/post/icarus_to_candy_2

关于评论头像

访客还可以通过输入数字 QQ 邮箱地址，使用 QQ 头像发表评论。

后续

添加图床方便上传图片(已解决)

Posted 2024-07-15Updated 2024-09-28Note5 minutes read (About 717 words)

Hexo plugin -- hexo-photo-wall

Why

因为觉得hexo post的图片排版太烂了，手打html插入图片又很烦，于是乎决定写一个hexo的插件，能够通过一些关键字，识别图片组，然后再把这些图片以照片墙的方式组合在一起。
顺带可以了解一下hexo的渲染管道和javascript。

How

Hexo 渲染顺序

初始化阶段：
- Hexo 读取配置文件和初始化插件。
- 加载主题和其配置文件。
内容处理阶段：
- before_generate：生成前触发，可用于在生成前进行一些准备工作。
- before_post_render：在文章渲染之前触发，可用于在文章内容渲染之前对其进行修改。
- after_post_render：在文章渲染之后触发，可用于在文章内容渲染之后对其进行修改。
- before_exit：Hexo 退出前触发，可用于在退出前进行一些清理工作。
生成阶段：
- 生成静态文件，包括 HTML、CSS、JavaScript 等。
- 将内容写入 public 目录。
部署阶段：
- 部署生成的静态文件到目标服务器或平台

我们需要做的就是在内容处理阶段，重新生成图片墙部分的html代码。

Hexo Filter

过滤器的工作原理

过滤器是通过 hexo.extend.filter.register() 方法来注册的。每个过滤器都绑定在特定的生命周期事件上，当这些事件触发时，Hexo 会依次执行所有注册在该事件上的过滤器。

before_generate：生成站点之前触发。
before_post_render：在文章内容渲染之前触发。
after_post_render：在文章内容渲染之后触发。
before_exit：Hexo 进程退出之前触发。
after_render：HTML 内容渲染之后触发。
after_render：CSS 内容渲染之后触发。

after_render：JavaScript 内容渲染之后触发。

hexo.extend.filter.register('after_post_render', function(data) {
  // 查找所有 img 标签并将 src 属性替换为 HTTPS 协议
  data.content = data.content.replace(/<img src="http:\/\/(.*?)"/g, '<img src="https://$1"');
  return data;
});

过滤器的返回值

对于大多数过滤器函数，需要返回处理后的数据。例如，after_post_render 过滤器需要返回修改后的文章内容。
某些过滤器（如 before_exit）不需要返回值。

实现

首先创建一个存放插件的文件夹，我放在hexo_root/plugins/hexo-photo-wall
文件夹中创建一个js入口文件index.js
文件中注册filter并且实现替换功能

hexo.extend.filter.register('before_generate', () => {
  console.log('This is my custom Hexo plugin!');
});
hexo.extend.filter.register('before_post_render', function(data) {
  const startTag = '
';

  const regex = new RegExp(`${startTag}[\\s\\S]*?${endTag}`, 'g');

  data.content = data.content.replace(regex, match => {
    const pictures = match
      .replace(startTag, '')
      .replace(endTag, '')
      .trim();

    const pictureArray = pictures.split('\n').map(item => item.trim()).filter(item => item);

    pictureArray.forEach(picture => {
        const srcMatch = picture.match(/!\[.*?\]\((.*?)\s+\"(.*?)\"\)/);
        if (srcMatch && srcMatch[1]) {
        console.log(`Found image: ${srcMatch[1]}, title: ${srcMatch[2]}`);  // 输出匹配到的图片路径和标题
        }
    });

    let pictureWallHtml = '<div class="picture-wall">';

    pictureArray.forEach(picture => {
      const srcMatch = picture.match(/!\[.*?\]\((.*?)\)/);
      if (srcMatch && srcMatch[1]) {
        pictureWallHtml += `<div class="picture-wall-item"><img src="${srcMatch[1]}" alt=""></div>`;
      }
    });

    pictureWallHtml += '</div>';

    console.log(pictureWallHtml);

    return pictureWallHtml;
  });

  return data;
});

此处的照片墙的排版和原本应该并没有区别，只是处于同一个class="picture-wall"的div下。后续需要通过修改css或者直接更改html来实现照片墙的效果。

Posted 2024-04-05Updated 2024-04-06Review12 minutes read (About 1827 words)

博客两周年，带来了什么？

前言

根据github托管仓库的提交记录，我的这个博客网建于2022/4/10，倒也是马上就要了两周年了，去年这会很忙，倒是没想到做一个一周年回顾，这次就一起补上吧。
近日小小燃起了一下修缮博客的激情，比如加了桌宠，播放器，亚克力风格的卡片，圆角，目录卡片之类的。也奇怪，似乎我就是非常热衷于做这些很游离的事情，做了，会花很多时间，不做也不会怎么样。想说自己还是有颗匠人/艺术家的心，还是很痴迷于这种永远在路上的项目的。做这些可爱的，美美的东西，真的很治愈啊。很多项目，很多科研，换个人，一样做，但博客，模组，辩论这些东西才是真正反映我们内核的东西。

小小的回顾

我对于hexo的初识源于我的室友，他当时先入了hexo的坑，然后和我说，hexo好啊，拿来写博客针不戳。
不得不说，虽然hexo的架构非常简洁高效，但原landscope主题实在是太丑了，丑到让人感觉是原始人刚驯服互联网时捣鼓出来的东西。
于是乎在建站的第一天，我就踏上了主题，美化的不归路。那几天就真的也没干别的事情，就是不停地在github上找合眼缘的主题，然后磕磕绊绊地替换，部署，再更改主题内容，最终选了一个icarus的魔改版，当时真的觉得圆满啦！
现在想起来当时真的啥也不懂，安装个npm的包都能耗这么长时间（毕竟当时专业完全没接触网页相关的计算机知识啦），明明这些事情半个小时就能搞定。也庆幸自己当年的初生牛犊，今天的自己做这些事情从容了很多。不过自己当时好像github都不咋会用，这有点不应该呀。

之后就主要在vim里面写写markdown博客，但也没有坚持多久，可能就陆陆续续发了几篇技术文档，就把hexo冷落了。

再往后主要就是用obsidian记录技术文档了，因为写起来很方便，所以记录了很多东西，但obsidian是一个本地的文档管理系统，没有部署网页的功能。我考虑到hexo和obsidian使用的都是markdown文档，于是决定写一个文档迁移的脚本，一口气把obsidian下几十篇文档全搬到了网页上。于是工作流就变成了，在obsidian里快乐写文档，写完之后到hexo下一键deploy，网站上就有最新的文档了，真的很舒服。

再之后也看到了别的学长姐的博客，意识到原来还可以记这么多其他东西，和我很不一样。

再往后就遇到了那个她，开始在博客上记录自己那股悸动的感觉，因为这种感觉不记录下来的话，就会溺死在往后的岁月里。当时真的从未想过我们会在一起，我感觉就是一个很特别的我喜欢的女孩子，她肯定有很多爱她的人并不渴求我的爱，毕竟牡丹这么多年了，这恋爱观念的惯性可不小。后来，她也看到了这篇博客，就这样，双向奔赴的我们以这种非常浪漫的方式在一起了。从此博客对我的意义，已经不再是可有可无了，是我的生活了。

近日，整理了一下项目结构，在笔记本上也成功部署了博客网，自此，博客网不再是台式机wsl上的孤品了，我终于有自信在任意电脑上部署网站环境。

没有带来什么

首先，维护本站并没有让我懂得互联网技能，我并没有学会如何布局网页，写css，写js，做前端，后端，网络通讯。首先hexo是一个静态网页，也就是说不涉及后端服务器内容，前端的显示又是由hexo及对应主题负责的，对此我并未过多涉足。我本来更感兴趣的确实是后端内容，但主要是自己也没有组服务器，也没闲钱去租服务器，所以只能暂且罢休。不可否认拥有自己的，前后端齐备的非静态网站是很酷的，心向往之。

我也没有变成技术博客的大佬，我敢说，除了我自己，没有谁能跟着我的技术博客真正做好一个项目。总之我写的不是教程，更像是自己的踩坑记录，但在很多时候这些都很有用（对于我自己）。

带来了什么

熟练辗转于某hub捻取众长，看文档的本事大概是在搭建博客的时候（还有就是整nvim的时候）练起来的，真正把某hub当做了自己的精神故土。接触到了各种各样的，把代码放在互联网上交流协作的人，世界如果少了这个开源社区，那将会是多么闭塞。让我想起来了刘慈欣在《三体》中描绘的，从四维空泡返回三维世界的描述。

在后期，在尝试在博客中记录很多很多非技术的内容，感觉博客里的空气都变得很快活啦哈哈，也是这个时候，真正把这里当成了家，不再只是技术的展牌，同时也是我情感的归宿。懂得了通过记录的方式解决自己的内耗，慢慢地就能够抓住体内游离的情绪，凝练再落笔为文，也很开心自己有了忠实的读者，虽然就一位，但她的意义太特殊了（后面再提吧）。也是这个时候有了读者思维，慢慢的就觉得，用对话的方式展开博客也很有意思。

其实还有很多能说的，比如固化了我使用markdown的偏好等等，但最重要的是，填坑为坦途，这段经历会成为永远的回忆，并指导我在今后的各种或大或小的项目中告诉自己，轻舟总会过万重山的。最后，愿所有的漂流瓶都不会被辜负，海波微兴，浮沉着说不清道不完的宝藏。

Posted 2024-04-05Updated 2024-09-28a few seconds read (About 12 words)

Customize hexo Icarus

神仙记录帖

云函数