博客迁移#

0x00 前言#

之前的博客使用的是Hexo框架，但是用久了感觉有点low，配不上我了，就给换了。刚好逛github看见一个美丽的主题(这个我肯定不换了，我会爱一辈子的)，可惜是用的Astro，所以还麻烦我学习了一番，现在也是部署成功了喵喵喵

0x01 本地运行#

打开fuwari项目，按照文档fork项目，然后clone到本地，然后执行命令即可

下列指令均需要在项目根目录执行：

Command	Action
`pnpm install` 并 `pnpm add sharp`	安装依赖
`pnpm dev`	在 `localhost:4321` 启动本地开发服务器
`pnpm build`	构建网站至 `./dist/`
`pnpm preview`	本地预览已构建的网站
`pnpm new-post <filename>`	创建新文章
`pnpm astro ...`	执行 `astro add`, `astro check` 等指令
`pnpm astro --help`	显示 Astro CLI 帮助

本地调试只要用到前两个，pnpm dev之后就能在本地看到网页了

0x03 魔改主题#

之前一直不换，主要因为原本的博客有个live2d模型，hexo搞这个很方便，但是Astro我完全不熟，但是都决定转过来了，那还是老老实实学着搞一下吧，结果搜半天也没搜到相关的，这扯不扯，还得自己搞

直接使用live2d这个库，简直好用到爆炸，我的模型也用的这个仓库里的(我用过的你们就不准用了，看在我教你们搞的份上qwq)

首先去展示页面挑个自己喜欢的模型，然后记好路径，下载仓库，进去找到对应模型文件夹

然后进入fuwari的目录，找到/src/layouts/Layout.astro，我们主要修改这个文件

一、添加live2d模型#

1. 添加 Live2D 脚本引用#

定位方法：在 Layout.astro 中搜索 </head>

找到后，在 </head> 标签之前添加：

1
<!-- Live2D -->
2
<script src="/live2d/live2d.js"></script>

2. 添加 Live2D 容器#

定位方法：在 Layout.astro 中搜索 <div id="page-height-extend"

找到这行：

1
<!-- increase the page height during page transition to prevent the scrolling animation from jumping -->
2
<div id="page-height-extend" class="hidden h-[300vh]"></div>

在这行之前添加：

1
<!-- Live2D Widget -->
2
<div id="live2d-widget" class="fixed bottom-0 left-0 z-50 hidden md:block">
3
    <canvas id="live2d" width="280" height="350"></canvas>
4
</div>

3. 添加 Live2D 初始化函数#

定位方法：在 Layout.astro 中搜索 function init() {

你会看到类似这样的代码：

1
function init() {
2
  // disableAnimation()()    // TODO
3
  loadTheme();
4
  loadHue();
5
  initCustomScrollbar();
6
  showBanner();
7
}

修改步骤：

在 function init() { 之前添加新函数：

1
function initLive2D() {
2
    if (typeof loadlive2d !== 'undefined') {
3
        try {
4
            loadlive2d("live2d", "/live2d/model/model.json");
5
        } catch (error) {
6
            console.error("Failed to load Live2D model:", error);
7
        }
8
    }
9
}

在 init() 函数内部，showBanner(); 这行之后添加：

1
initLive2D();

4. （可选）添加自定义样式#

定位方法：搜索 <style is:global

在这个样式块的 } 结束标记之前添加：

1
/* Live2D styles */
2
#live2d-widget {
3
    pointer-events: none;
4
    opacity: 0.9;
5
}
6
#live2d {
7
    pointer-events: auto;
8
}

然后然后，把模型和js文件放到/public/live2d/下(这个文件夹自己创建)，结构如下：

1
live2d.
2
│  LAppDefine.js
3
│  live2d.js
4
│
5
└─model
6
    │  model.json
7
    │  model.moc
8
    │  physics.json
9
    │
10
    ├─model.1024
11
    │      texture_00.png
12
    │
13
    └─motions
14
            broken_1.mtn
15
            broken_2.mtn
16
            broken_3.mtn
17
            broken_4.mtn
18
            broken_5.mtn
19
            daiji.mtn
20
            login.mtn
21
            shake.mtn
22
            wait_1.mtn

每个人模型里的文件不一样，结构和我一样就行了，然后执行pnpm dev打开网页应该就有效果了qwq

配置完可以稍微设置一下

1
/* Live2D styles */
2
#live2d-widget {
3
    pointer-events: none;
4
    opacity: 0.8;  /* 透明度：0-1之间，0.8 = 80%透明度 */
5
    position: fixed;
6
    left: 10px;    /* 距离左边的距离 */
7
    bottom: 10px;  /* 距离底部的距离 */
8
    transform: scale(0.8);  /* 缩放：0.8 = 80%大小 */
9
    transform-origin: bottom left;  /* 缩放中心点设在左下角 */
10
}
11
#live2d {
12
    pointer-events: auto;
13
}

二、添加文章置顶功能#

1.更新配置文件#

frontmatter.json：添加 pinned 字段的配置

1
          "title": "language",
2
          "name": "language",
3
          "type": "string"
4
+        },
5
+        {
6
+          "title": "pinned",
7
+          "name": "pinned",
8
+          "type": "boolean"
9
        }
10
      ]
11
    }

src/content/config.ts：在文章 schema 中添加 pinned

1
        tags: z.array(z.string()).optional().default([]),
2
        category: z.string().optional().default(""),
3
        lang: z.string().optional().default(""),
4
+       pinned: z.boolean().optional().default(false),
5

6
        /* For internal use */
7
        prevTitle: z.string().default(""),

2.更新新建文章脚本#

scripts/new-post.js：在模板中添加 pinned: false 默认值

1
 tags: []
2
 category: ''
3
-draft: false
4
+draft: false
5
 lang: ''
6
+pinned: false
7
 ---

3.更新文章排序逻辑#

src/utils/content-utils.ts：修改排序函数，置顶文章优先显示

1
 const sorted = allBlogPosts.sort((a, b) => {
2
+    // First sort by pinned status (pinned posts come first)
3
+    if (a.data.pinned && !b.data.pinned) return -1;
4
+    if (!a.data.pinned && b.data.pinned) return 1;
5
+
6
+    // Then sort by date (newest first) for posts with the same pinned status
7
     const dateA = new Date(a.data.published);
8
     const dateB = new Date(b.data.published);
9
     return dateA > dateB ? -1 : 1;

4.更新 PostCard 组件#

src/components/PostCard.astro：添加 pinned 属性和图钉图标

在 interface 中添加：

1
     draft: boolean;
2
     style: string;
3
+    pinned?: boolean;
4
 }

在解构中添加：

1
     description,
2
     style,
3
+    pinned,
4
 } = Astro.props;

在标题处添加图钉图标：

1
         before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
2
         ">
3
+            {entry.data.pinned &&
4
+                <Icon class="inline-block text-[1.2rem] text-[var(--primary)] mr-1 align-middle translate-y-[-2px]" name="material-symbols:push-pin" />
5
+            }
6
             {title}
7
             <Icon class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute" name="material-symbols:chevron-right-rounded" ></Icon>

5.更新 ArchivePanel 组件#

src/components/ArchivePanel.astro：导入 Icon 组件并添加图钉显示

添加导入：

1
 import { getPostUrlBySlug } from "../utils/url-utils";
2
+import { Icon } from "astro-icon/components";

在文章标题处添加：

1
                             text-75 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden"
2
                             >
3
+                                    {post.data.pinned &&
4
+                                        <Icon class="inline-block text-[1rem] text-[var(--primary)] mr-1 align-middle translate-y-[-1px]" name="material-symbols:push-pin" />
5
+                                    }
6
                                     {post.data.title}
7
                             </div>

6.更新 PostPage 组件#

src/components/PostPage.astro：传递 pinned 属性

1
                 draft={entry.data.draft}
2
+                pinned={entry.data.pinned}
3
                 class:list="onload-animation"

使用方法：在文章的 frontmatter 中设置 pinned: true 即可将文章置顶。

三、添加评论系统#

这里直接用Twikoo，创建账号后端部署什么的自己去看官方文档，我这里直接改前端代码了

1.创建Twikoo组件#

首先在/src/components/misc/创建Twikoo.astro作为评论组件

1
---
2
interface Props {
3
  path: string;
4
}
5

6
const config = {
7
  el: "#comment",
8
  path: Astro.props.path,
9
};
10
---
11

12
<div id="comment"></div>
13
<script define:vars={{ config }}>
14
let twikooInitialized = false;
15

16
function loadTwikoo() {
17
  if (twikooInitialized) return;
18

19
  const commentContainer = document.getElementById('comment');
20
  if (!commentContainer) return;
21

22
  const script = document.createElement("script");
23
  script.src = "https://cdn.jsdelivr.net/npm/twikoo@1.6.41/dist/twikoo.all.min.js";
24
  script.defer = true;
25
  script.onload = () => {
26
    twikoo.init({
27
      ...config,
28
      envId: "https://yuukiii.netlify.app/.netlify/functions/twikoo",
29
      lang: "zh-CN",
30
    });
31
    twikooInitialized = true;
32
  };
33
  document.body.appendChild(script);
34
}
35

36
window.loadTwikoo = loadTwikoo;
37
document.addEventListener("loadComment", loadTwikoo);
38

39
if (document.readyState === 'complete') {
40
  setTimeout(loadTwikoo, 100);
41
} else {
42
  window.addEventListener('load', () => {
43
    setTimeout(loadTwikoo, 100);
44
  });
45
}
46
</script>

2.在Layout中注册#

进到/src/layouts/layout.astro新增如下函数

1
function initCommentComponent() {
2
  // 方法1: 分发事件（保留原有方式）
3
  const event = new Event("loadComment");
4
  document.dispatchEvent(event);
5

6
  // 方法2: 直接调用函数（新增的方式）
7
  if (typeof window.loadTwikoo === 'function') {
8
    window.loadTwikoo();
9
  } else {
10
    // 如果函数还没准备好，稍后重试
11
    setTimeout(() => {
12
      if (typeof window.loadTwikoo === 'function') {
13
        window.loadTwikoo();
14
      }
15
    }, 200);
16
  }
17
}
18

19
// 添加到全局作用域
20
window.initCommentComponent = initCommentComponent;

在init中调用

1
// 延迟调用评论组件初始化，并且多次尝试
2
  const tryInitComment = () => {
3
    const commentContainer = document.getElementById('comment');
4
    if (commentContainer) {
5
      window.initCommentComponent();
6
    } else {
7
      // 如果评论容器还不存在，稍后重试
8
      setTimeout(tryInitComment, 100);
9
    }
10
  };
11

12
  setTimeout(tryInitComment, 100);

1
window.swup.hooks.on(
2
    "content:replace",
3
    () => {
4
      lightbox?.destroy?.()
5
+      window.initCommentComponent();
6
    },
7
    { before: true },
8
  )

3.（可选）添加自定义样式#

默认样式在网站里显得十分不和谐，这里自定义一下样式

在/src/style/下随便创建个css，然后自己改改样式，这里是我的，抄的网上别人的

1
:root {
2
  --tk-text: black;
3
}
4

5
html.dark {
6
  --tk-text: #d1d5db;
7
}
8

9
.tk-comments {
10
  @apply text-[var(--tk-text)];
11
}
12

13
.tk-submit {
14
  .tk-avatar {
15
    @apply hidden;
16
  }
17
}
18

19
/* Text Area */
20
.tk-row {
21
  .tk-col {
22
    @apply flex-col-reverse;
23
    .tk-input {
24
      textarea {
25
        @apply rounded-[var(--radius-large)] py-4 px-6 !min-h-[150px] focus:border-[var(--primary)];
26
      }
27
    }
28
  }
29
}
30

31
.el-input {
32
  @apply !rounded-lg;
33
}
34

35
.tk-meta-input {
36
  @apply min-h-10 relative mt-3;
37
  .el-input-group__prepend {
38
    @apply !bg-inherit;
39
  }
40
  div {
41
    @apply py-1 rounded-l-lg;
42
    min-height: inherit;
43
  }
44
  input {
45
    @apply px-4 rounded-r-lg focus:!border-[var(--primary)];
46
    min-height: inherit;
47
  }
48
}
49

50
/* Button */
51
.tk-row.actions {
52
  @apply w-full !ml-0 !mt-0;
53
  .__markdown {
54
    @apply !hidden;
55
  }
56
  .tk-preview,
57
  .tk-send,
58
  .tk-cancel {
59
    @apply border-none rounded-lg px-3 py-0 h-8
60
       !bg-[var(--btn-regular-bg-active)] disabled:!bg-[var(--btn-regular-bg)]
61
      !text-[var(--btn-content)] disabled:!text-[#ffffffa1];
62
  }
63
}
64

65
/* Comment title */
66
.tk-comments-title {
67
  .__comments svg {
68
    @apply fill-[var(--primary)];
69
  }
70
}
71

72
.tk-comment {
73
  @apply border-[1px] border-[rgba(144,147,153,0.31)] p-4 rounded-2xl hover:shadow-md transition-all;
74
  .tk-action-icon svg {
75
    @apply fill-[var(--primary)];
76
  }
77
}
78

79
.tk-action {
80
  .tk-action-count {
81
    @apply text-[var(--btn-content)];
82
  }
83
}
84

85
.tk-meta {
86
  .tk-tag {
87
    @apply border-none rounded-lg text-[var(--btn-content)];
88
  }
89

90
  .tk-tag-green {
91
    @apply bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)] dark:text-[var(--deep-text)];
92
  }
93
}
94

95
.tk-content,
96
.tk-preview-container {
97
  a {
98
    /* 使用纯 CSS 避免 Tailwind 语法限制 */
99
    text-decoration: underline;
100
    color: var(--primary);
101
    font-weight: 500;
102
    transition: color 0.2s ease;
103
  }
104

105
  a:hover {
106
    color: var(--primary);
107
    opacity: 0.8;
108
  }
109

110
  .tk-ruser {
111
    @apply no-underline;
112
  }
113

114
  :not(pre) > code {
115
    @apply bg-[var(--inline-code-bg)] rounded-md px-1 py-0.5 font-semibold;
116
    color: var(--inline-code-color);
117
  }
118

119
  li{
120
    @apply before:content-['•'] before:text-[var(--primary)];
121
  }
122
}
123

124
/* Replies */
125
.tk-replies {
126
  .tk-comment {
127
    @apply bg-[var(--page-bg)];
128
    .tk-content {
129
      > span:first-of-type {
130
        @apply text-xs;
131
      }
132
    }
133
  }
134
}
135

136
.twikoo .code-block {
137
  pre {
138
    @apply !rounded-xl;
139
  }
140

141
  .copy-btn-icon {
142
    width: inherit !important;
143
    height: inherit !important;
144
  }
145
}
146

147
.tk-expand-wrap .tk-expand,
148
.tk-collapse-wrap .tk-expand {
149
  @apply hover:rounded-lg mt-1 hover:bg-[var(--btn-plain-bg-hover)];
150
}

0x03 部署网站#

之前使用HEXO的时候是挂在Github Page上的，但是国内访问Github似乎不是很友好，所以这次选择部署到Netlify。由于刚刚是在本地修改的代码，现在需要先把他push到github

1
cd 你的项目目录
2
git status
3
git add .
4
git commit -m "修改了XXX功能"
5
git push origin main

然后去Netlify导入Github的对应项目，然后一路默认选项即可，后面你push代码之后，Netlify会自动帮你构建发布，太尼玛人性化了，等我工作有米了我必须狠狠支持你一下。

然后就是自定义域名的问题，项目部署完成之后，可以点击第2步Set up a custom domain，然后进去自己随便配置一下就ojbk了，这个应该都会的，然后就搞定了

0x04 小结#

又浪费了我两天时间，但是我有强迫症，这个事情做不完我会很难受。好在结果还行ξ( ✿＞◡❛)