记录网站变故的更新日志
为什么要重构啊？
在使用长达四年的hexo-theme-amazingremake主题后，也许应该是时候把整个博客重新构建一下了。
对于博客来说，我认为对内容的持续积累与更新才是最重要的。而一个用起来是否省心的主题才是能否决定你能静下心来去记录自己成长的关键。
Stellar是一个用起来非常省心同时也非常好看的主题。接下来的时间就决定是你了！
目前的网站还处于早期阶段，所以看起来还是很粗糙的。之前的老文章和友链什么的都会找时间重新整理并发布过来的。希望这个新网站能够相较上个走得更远。
记录一些对主题的魔改记录：
2025.11.23
找图标还需要去icons.yml里注册实在太复杂了。遂注册一个FontAwesome的CDN，享受随时引用图标的快感。
需要在_config.stellar.yml中加入注入语句：
_config.stellar.yml1
2
3
4
5
6
|
inject:
head:
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
另外当我们想使用<i class="fa-brands fa-github"></i>这样的格式引用图标时，Stellar主题的icon辅助函数处理逻辑上会将fa-处理为CSS类名，而不是直接输出HTML标签。所以：
\scripts\events\lib\utils.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
hexo.utils = {
icon: (key, args) => {
if (key.startsWith('<')) {
return key
}
const { icons } = hexo.theme.config
var result = ''
...
}
}
|
现阶段的移动端浏览器界面上下一般都会有可收缩的地址栏和工具栏。当向上滚动页面时，工具栏和地址栏收缩会导致背景图片显示错误。
由于背景图片紧贴视口底部，当这些工具栏收起时视口高度会发生变化，并且收起过程中不会实时更新视口高度。
main.styl1
2
3
4
5
6
7
8
9
10
|
body>.sitebg
position fixed
top: 0
left: 0
width: 100%
height: 100vh
z-index: -1
|
height: 100vh应该能解决这个问题吧（
2025.11.20
在Stellar原主题的基础上，为font-matter添加cover_ratio与banner_ratio键值，用户调整cover和banner在引用图片时显示的高度。
若不设置参数则值默认为2，数值越大图片越矮。
使用Poster显示模式也支持使用cover_ratio来调节显示高度。（正考虑要不要把Poster的字体样式改一下...）
article_banner.ejs1
2
3
4
5
6
7
8
9
10
11
12
13
| if (banner.url?.length > 0) {
el += `<img class="lazy bg" data-src="${banner.url}">`
var styles = [];
if (banner.color) {
styles.push('--text-banner:' + banner.color);
}
if (page.banner_ratio) {
styles.push('aspect-ratio:' + page.banner_ratio);
}
if (styles.length > 0) {
style = ' style="' + styles.join(';') + '"';
}
}
|
post_card.ejs1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| if (cover_url) {
el += '<div class="post-cover">';
var img_style = '';
if (post.cover_ratio) {
img_style = ' style="aspect-ratio:' + post.cover_ratio + '"';
}
el += '<img src="' + cover_url + '"' + img_style + '/>';
el += '</div>';
}
...
var img_style = '';
if (post.cover_ratio) {
img_style = ' style="aspect-ratio:' + post.cover_ratio + '"';
}
el += '<img src="' + obj.image + '"' + img_style + '/>';
|