Posted 2024-10-28Updated 2024-12-21Note4 minutes read (About 566 words)

前摇部分

基本原理

本地增添博客内容(markdown文件)->hexo根据文件内容生成网页源码->上通过指令上传(push)到github->github自行部署静态页面

基本准备

安装git

https://www.cnblogs.com/xueweisuoyong/p/11914045.html

Github shh key

因为把本地写的内容传到github，需要绑定一个ssh密钥
参见：https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

1	ssh-keygen -t ed25519 -C "guanshengyuanlu@163.com"

把这串公钥添加到github ssh settings里面

安装npm

https://blog.csdn.net/lizhong2008/article/details/133844070
最新版本即可

本地部署

设定本地的git config

1 2	git config --global user.email "guanshengyuanlu@163.com" git config --global user.name "Draumurvakna"

克隆仓库

1 2	git clone git@github.com:Draumurvakna/MIGAO-Blog-Src.git cd MIGAO-Blog-Src

安装环境

git submodule update --recursive --init   
npm update
cd themes/icarus
npm update

更新网站

1	./show.sh #预览

1	./deploy.sh #可以直接通过网页访https://draumurvakna.github.io/

正文

网站上的每一篇文章在本地都是一份markdown文本文件，存在source/_posts中

例如这里就有两篇示例文章

通过指令hexo new "article title" 来创建一篇新博客

然后到对应文件里面编辑就行了
markdown的编辑器推荐用typora，当然如果足够硬核的话用txt文本编辑器也毫无问题！

如果想添加图片的话，就往同文件夹下的资源文件夹（和这篇博客名字相同的文件夹）中添加照片然后在文中输入

可以参考Sample Blog

添加完自己想要的内容之后用./deploy.sh部署一下网站，稍等片刻，进到网站里就可以看到最新的变化了。

后

我想给博客换个背景

进到themes/icarus/source/img文件夹📁

把`lightBG.png`, `darkBG.jpg`换成别的图片，名字一致

如果重新部署后发现没有更改，那就网页里按一下<Ctrl>+F5

我想换个头像👤

如上图，改avatar.png

关于评论系统的话需要自己搞定o

参考 https://chen-yulin.github.io/2024/09/03/%5BOBS%5Dhexo-Hexo%20Comment%20System%20--%20Twikoo/

Posted 2024-10-08Updated 2024-12-21Note6 minutes read (About 892 words)

Hexo AI Assistant

参见 https://dingfen.github.io/2024/07/21/2024-7-21-ai_assist/

阿里云的大模型之前在搞wechat bot的时候接触过，这次再加上一个云函数的服务，就搞定了。
LLM:https://bailian.console.aliyun.com/?spm=a2c4g.11186623.0.0.2db33048PGTSE6#/app-center
云函数:https://fcnext.console.aliyun.com/applications?spm=5176.fcnext.0.0.65f378c8HmZpOP

在本地主要需要做的是在hexo中注入代码
添加文件scripts/injector.js

hexo.extend.injector.register('body_end',`
<link rel="stylesheet" crossorigin href="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.11/index.css" />
<script type="module" crossorigin src="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.11/index.js"></script>
<script>
  window.CHATBOT_CONFIG = {
    endpoint: "/chat", // 可以替换为 https://{your-fc-http-trigger-domain}/chat
    displayByDefault: false, // 默认不展示 AI 助手聊天框
    aiChatOptions: { // aiChatOptions 中 options 会传递 aiChat 组件，自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat
      conversationOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#conversation-options
        conversationStarters: [
          {prompt: '哪款手机续航最长？'},
          {prompt: '你们有哪些手机型号？'},
          {prompt: '有折叠屏手机吗?'},
        ]
      },
      displayOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#display-options
        height: 600,
      },
      personaOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#chat-personas
        assistant: {
          name: '你好，我是你的 AI 助手',
          // AI 助手的图标
          avatar: 'https://img.alicdn.com/imgextra/i2/O1CN01Pda9nq1YDV0mnZ31H_!!6000000003025-54-tps-120-120.apng',
          tagline: '您可以尝试点击下方的快捷入口开启体验！',
        }
      }
    }
  };
</script>
<style>
  :root {
    /* webchat 工具栏的颜色 */
    --webchat-toolbar-background-color: #1464E4;
    /* webchat 工具栏文字和按钮的颜色 */
    --webchat-toolbar-text-color: #FFF;
  }
  /* webchat 对话框如果被遮挡，可以尝试通过 z-index、bottom、right 等设置来调整位置 */
  .webchat-container {
    z-index: 100;
    bottom: 10px;
    right: 10px;
  }
  /* webchat 的唤起按钮如果被遮挡，可以尝试通过 z-index、bottom、right 等设置来调整位置 */
  .webchat-bubble-tip {
    z-index: 99;
    bottom: 20px;
    right: 20px;
  }
</style>`
);

主要要更改的是window.CHATBOT_CONFIG.endpoint, 改为触发器的公网访问地址

然后更改avatar，添加浮动的对话泡图标balabala

hexo.extend.injector.register('body_end',`
<link rel="stylesheet" crossorigin href="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.11/index.css" />
<script type="module" crossorigin src="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.11/index.js"></script>
<script>
  window.CHATBOT_CONFIG = {
    endpoint: "https://webchat-bot-iqu-knzhgrvznd.cn-hangzhou.fcapp.run/chat", // 可以替换为 https://{your-fc-http-trigger-domain}/chat
    displayByDefault: false, // 默认不展示 AI 助手聊天框
    aiChatOptions: { // aiChatOptions 中 options 会传递 aiChat 组件，自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat
      conversationOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#conversation-options
        conversationStarters: [
          {prompt: '你是谁？'},
          {prompt: '博主又是谁？'},
          {prompt: '博主喜欢的人是？'},
          {prompt: '想要博主联系方式！'},
        ]
      },
      displayOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#display-options
        height: 600,
      },
      personaOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#chat-personas
        assistant: {          name: '博主的AI助手，十四行诗参上！',
          // AI 助手的图标
          avatar: 'https://chen-yulin.github.io/thumb/14.png',
          tagline: '要不要试试问下面的问题呢？',
        }
      }
    }
  };
</script>
<style>
  :root {
    /* webchat 工具栏的颜色 */
    --webchat-toolbar-background-color: #1464E4;
    /* webchat 工具栏文字和按钮的颜色 */
    --webchat-toolbar-text-color: #FFF;
  }
  /* webchat 对话框如果被遮挡，可以尝试通过 z-index、bottom、left 等设置来调整位置 */
  .webchat-container {
    z-index: 100;
    bottom: 10px;
    right: 10px;
  }
  /* webchat 的唤起按钮如果被遮挡，可以尝试通过 z-index、bottom、left 等设置来调整位置 */
  .webchat-bubble-tip {
    z-index: 99;
    bottom: 20px;
    right: 20px;
  }
  .webchat-bubble-tip {
    overflow: visible !important;
  }
  @keyframes float {
    0% {
      transform: translateY(0px) translateX(-50%);
    }
    50% {
      transform: translateY(-10px) translateX(-50%);
    }
    100% {
      transform: translateY(0px) translateX(-50%);
    }
  }

  .webchat-bubble-tip::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 70%;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    animation: float 3s ease-in-out infinite;
  }
</style>
);

最终效果：

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

live2d 复活计划

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

Posted 2024-09-03Updated 2024-12-21Note4 minutes read (About 566 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 头像发表评论。

后续

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

维护

10/20发现评论系统不能用了，发现是mongodb暂停了数据库服务，想起来它应该是每个月都需要自己connect一下（也算是释放不活跃用户的资源吧）。

每周维护的时候需要进到 https://cloud.mongodb.com/v2/6610ebcc85d7126b38c3837b#/overview connect一下

随后发现huggingface的仓库一直卡在build，遂更换为Netlify云函数平台。
https://app.netlify.com/sites/admirable-sunburst-4762e3/configuration/general

这个仓库的函数会把评论存贮在test/comment下，和之前的twikoo/comment不同，导致历史评论无法显示，所以在twikoo/comment下使用aggregation **$merge**

1
2
3

{
     into: { db: "test", coll: "comment" },
}

Posted 2024-07-15Updated 2024-12-21Note5 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-11-02Review12 minutes read (About 1828 words)

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

前言

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

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

Customize hexo Icarus

神仙记录帖