各个版本更新及其重要更新内容详见

Releases · xaoxuu/hexo-theme-stellar (github.com)

配置默认布局

在 1.26.0 版本中,站点主结构树有较大的变化,支持自定义每种页面的组件显示情况,侧边栏会按照指定的顺序从组件库中读取组件并显示:

old

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
######## Sidebar ########
sidebar:
logo:
title: '[<img no-lazy height="32px" src="/assets/website/avatar/avatar.png"/>](/)'
menu:
post: '[<i class="fa-solid fa-house-chimney"></i>](/)'
wiki: '[<i class="fa-solid fa-book"></i>](/wiki/)'
explore: '[<i class="fa-solid fa-icons"></i>](/bookmark/)'
friends: '[<i class="fa-brands fa-squarespace"></i>](/friends/)'
more: '[<i class="fa-solid fa-plus fa-flip"></i>](/about/)'
widgets:
#### 自动生成的页面 ####
# 主页
home: search, welcome, recent, timeline # for home
# 博客索引页
blog_index: search_blog, recent, timeline # for categories/tags/archives
# 文档索引页
wiki_index: search_docs, recent, timeline # for wiki
# 其它(404)
others: search, welcome, recent, timeline # for 404 and ...
#### 手动创建的页面 ####
# 文章内页
post: ghrepo,search, toc, ghissues # for pages using 'layout:post'
# 文档内页
wiki: ghrepo,search_docs, toc, ghissues, related # for pages using 'layout:wiki'
# 其它 layout:page 的页面
page: welcome,search, toc # for custom pages using 'layout:page'

new

Stellar:自定义小组件的配置与使用(9个) - XAOXUU

侧边栏主功能导航菜单

old

1
2
3
4
5
6
menu:
post: '[<i class="fa-solid fa-house-chimney"></i>](/)'
wiki: '[<i class="fa-solid fa-book"></i>](/wiki/)'
explore: '[<i class="fa-solid fa-icons"></i>](/bookmark/)'
friends: '[<i class="fa-brands fa-squarespace"></i>](/friends/)'
more: '[<i class="fa-solid fa-plus fa-flip"></i>](/about/)'

new

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 侧边栏主功能导航菜单
menubar:
columns: 5 # 一行多少个
items: # 可按照自己需求增加,符合以下格式即可
- id: post # 页面中高亮的 menu_id
theme: '#1BCDFC' # 高亮时的颜色,仅 svg 中 fill="currentColor" 时有效
icon: solar:documents-bold-duotone # 支持 svg/img 标签,可以定义在 icons.yml 文件中,也支持外部图片的 URL
title: 博客 # 标题
url: / # 跳转链接,支持相对路径和绝对路径
- id: wiki
theme: '#3DC550'
icon: solar:notebook-bookmark-bold-duotone
title: 文档
url: /wiki/
- id: explore
theme: '#FA6400'
icon: solar:planet-bold-duotone
title: 探索
url: /bookmark/
- id: social
theme: '#F44336'
icon: solar:chat-square-like-bold-duotone
title: 社交
url: /friends/
- id: more
theme: '#F44336'
icon: solar:chat-square-like-bold-duotone
title: 更多
url: /about/

官方文档

Stellar:侧边栏配置 - XAOXUU

置顶

pin: true–>sticky: 数字

wiki相关

old

1
path: /wiki/vue/

new

1
base_dir: /wiki/vue/

返回项目的按钮移除了

notes

主要问题为不显示首页的avatartitlesubtitle

解决如下

blog\source\_data\wiki\notes.yml
1
2
3
4
5
6
7
8
9
10
11
# name: 备忘录
# title: 备忘录
# icon: # 列表页图标
# cover: # 封面页大图
# coverpage: [cover, title, description] # 封面页显示的内容
# coverpage: false # 封面页显示的内容

logo:
avatar: '[${config.avatar}](/)'
title: '[${config.title}](/)'
subtitle: '我秃了头 | 可我却还不是程序员'
blog\source\notes\Vue.md
1
2
3
4
5
6
7
---
date: 2023-12-31 18:58:39
# layout: wiki
wiki: notes # 这个跟上面的 /wiki/notes.yml 关联起来
menu_id: explore # 这个跟配置文件中的 `sidebar.menu.notes` 关联起来,这很重要,如果没有这个,就像普通的wiki项目一样了
title: Vue
---

简化版wiki,专栏

我觉得十分欣喜,是一个好的设计,我没什么项目可以写在wiki里面的,只是一些学习笔记,梳理起来不是像wiki那种介绍项目那样

使用方法

Stellar:实现博客专栏/专题 - XAOXUU

1. 创建专栏

blog/source/_data/ 文件夹中创建一个 topic 文件夹,在其中放入各个专栏的描述文件,文件名就是项目的 id(我这里是stellar.yaml):

blog\source\_data\topic\stellar.yml
1
2
3
4
name: Stellar # 在面包屑导航上会显示较短的名字
title: Stellar - 每个人的独立博客 # 在列表页会显示完整的专栏标题
description: 关于搭建独立博客相关的知识和经验分享,以及 Stellar 的高级用法、版本更新相关的注意事项。
order_by: -date # 默认是按发布日期倒序排序

2. 发布文章

在此专栏文章的 md 文件的 front-matter 部分指定所属的专栏 id (即上一步创建的文件名 id.yml

blog/source/_posts/文章.md
1
2
3
4
5
6
---
title: 这是文章标题
topic: id # 这是专栏id,对应 blog/source/_data/topic/id.yml
---

文章正文

ghuser

Stellar:自定义小组件的配置与使用(9个) - XAOXUU

作用是显示 GitHub 用户基础信息卡片,但是在最新版本的样式,把menu移开了,感觉不是很好

搜索框永远在menu的上边,因为搜索框变成了一个单独的组件,不能再sidebar中进行设置了,所以我也不知道怎么才能隐藏search和调整search的位置

notes

写法部分改动

old

blog\source\_data\wiki\notes.yml
1
2
3
4
5
6
sidebar: 
- toc
- layout: search
override: search
filter: /notes/
placeholder: 在此处搜索...

new

blog\source\_data\wiki\notes.yml
1
2
3
4
5
6
search:
override: search
filter: /notes/
placeholder: 在此处搜索...
sidebar:
- toc
1
2
3
4
5
6
7
---
date: 2023-12-31 18:58:39
# layout: wiki
wiki: notes # 这个跟上面的 /wiki/notes.yml 关联起来
menu_id: explore # 这个跟配置文件中的 `sidebar.menu.notes` 关联起来,这很重要,如果没有这个,就像普通的wiki项目一样了
title: Vue
---

如何去掉顶部导航

new

1
2
3
4
---
breadcrumb: false
# 表示本页面不显示顶部导航,如果你需要显示的话,把这一行删除即可
---

achieve

假若在front-matter再加入h1: ''可以直接将友链去掉

搜索(wiki)

old

blog\source\_data\wiki\Vue.yml
1
2
3
4
5
sidebar: 
- search:
override: search
filter: /wiki/vue/
placeholder: '在 Vue笔记 中搜索...'

new

blog\source\_data\wiki\Vue.yml
1
2
3
search:
filter: /wiki/stellar/
placeholder: Stellar 中搜索...

图片显示大图的坑

如果你之前将blog\themes\stellar\_config.yml的对应配置部分的代码完整的复制到blog\_config.stellar.yml那么就会出现下面的问题,解决办法很简单,就是注释掉对应的js和css部分,让它自动去找themes部分的配置即可,也可以再次复制

error:

1
fancybox.umd.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'alt')

old

blog\_config.stellar.yml
1
2
3
4
5
plugins:
fancybox:
enable: true
js: https://gcore.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js
css: https://gcore.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css

new

blog\_config.stellar.yml
1
2
3
4
5
plugins:
fancybox:
enable: true
js: https://cdn.bootcdn.net/ajax/libs/fancyapps-ui/5.0.22/fancybox/fancybox.umd.min.js
css: https://cdn.bootcdn.net/ajax/libs/fancyapps-ui/5.0.22/fancybox/fancybox.min.css

样式美化

添加悬挂龙生肖

blog\source\css\newYear.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@media screen and (min-width: 850px){
.NewYear {
width: 260px;
height: 300px;
display: inline-block;
background: url(图片地址) no-repeat 50%/100%;
/* background: url(/assets/other/longgyaj.gif) no-repeat 50%/100%; */
vertical-align: middle;
position: fixed;
left: 85.8%;
top: 55px;
z-index: 999;
cursor: pointer;
animation: new-year 1.2s ease-in-out 0s infinite alternate;
margin-left: -1px;
transform-origin: 50% 0;
pointer-events: none;
}
}
@keyframes new-year{
0% {
transform: rotate(10deg);
}
100%{
transform: rotate(-10deg);
}
}

引入

blog\_config.yml
1
2
3
inject:
head:
- <link rel="stylesheet" href="/css/newYear.css"> # 龙年贴纸

把这个加到任何能够显示的html段落中,我就加到footer

1
<div class="NewYear"></div>

来源:

右上角添加悬挂年兽喜增龙年喜气 - 乙未博客 (yvii.cn)

话说今年应该是条小青龙,不过红红火火更加喜庆。

手动黑夜模式

注意stellar不再内置awesome

需要自己引入

1
2
3
inject:
head:
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
CSS
blog\source\css\darkmode.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
#Dark:root {
--site-bg: #1c1e21;
--card: #373d43;
--block: #26292c;
--block-border: #383d42;
--block-hover: #2f3337;
--alpha20: rgba(0,0,0,0.2);
--alpha50: rgba(0,0,0,0.5);
--alpha60: rgba(0,0,0,0.6);
--alpha75: rgba(0,0,0,0.75);
--alpha100: #000;
--sidebar-bg: #383d42;
--text: #fff;
--text-p0: #fff;
--text-p1: #ccc;
--text-p2: #b3b3b3;
--text-p3: #858585;
--text-p4: #707070;
--text-meta: #4d4d4d;
--text-code: #ff6333;
}
@media screen and (max-width: 667px) {
#Dark:root {
--site-bg: #000;
}
}
#Dark:root {
--blur-bg: rgba(0,0,0,0.5);
}
#Dark .float-panel {
--blur-bg: rgba(0,0,0,0.4);
}
#Dark .tag-plugin.tag {
--theme: #ff6333;
--theme-bg1: #3d1e14;
--theme-bg2: #2f2522;
--theme-border: #5c2d1f;
--text-p0: #ffc4b3;
--text-p1: #dfae9f;
--text-p2: #f1997e;
}
#Dark .tag-plugin[color='red'] {
--theme: #f44336;
--theme-bg1: #3d1714;
--theme-bg2: #2f2322;
--theme-border: #5c231f;
--text-p0: #ffb8b3;
--text-p1: #dfa49f;
--text-p2: #f1867e;
}
#Dark .tag-plugin[color='orange'] {
--theme: #fa6400;
--theme-bg1: #3d2514;
--theme-bg2: #2f2722;
--theme-border: #5c371f;
--text-p0: #ffd1b3;
--text-p1: #dfb99f;
--text-p2: #f1ac7e;
}
#Dark .tag-plugin[color='yellow'] {
--theme: #ffbd2b;
--theme-bg1: #3d3014;
--theme-bg2: #2f2b22;
--theme-border: #5c491f;
--text-p0: #ffe7b3;
--text-p1: #dfcb9f;
--text-p2: #f1cd7e;
}
#Dark .tag-plugin[color='green'] {
--theme: #3dc550;
--theme-bg1: #143d1a;
--theme-bg2: #222f24;
--theme-border: #1f5c27;
--text-p0: #b3ffbd;
--text-p1: #9fdfa8;
--text-p2: #7ef18e;
}
#Dark .tag-plugin[color='cyan'] {
--theme: #1bcdfc;
--theme-bg1: #14353d;
--theme-bg2: #222d2f;
--theme-border: #1f4f5c;
--text-p0: #b3efff;
--text-p1: #9fd2df;
--text-p2: #7ed9f1;
}
#Dark .tag-plugin[color='blue'] {
--theme: #2196f3;
--theme-bg1: #142b3d;
--theme-bg2: #222a2f;
--theme-border: #1f415c;
--text-p0: #b3ddff;
--text-p1: #9fc3df;
--text-p2: #7ebef1;
}
#Dark .tag-plugin[color='purple'] {
--theme: #9c27b0;
--theme-bg1: #37143d;
--theme-bg2: #2d222f;
--theme-border: #531f5c;
--text-p0: #f4b3ff;
--text-p1: #d69fdf;
--text-p2: #e07ef1;
}
#Dark .tag-plugin[color='light'] {
--theme-border: #fff;
--theme-bg1: #e0e0e0;
--theme-bg2: #fff;
--text-p0: #000;
--text-p1: #111;
--text-p2: #1f1f1f;
--text-p3: #555;
--text-code: #fff;
}
#Dark .tag-plugin[color='dark'] {
--theme-border: #000;
--theme-bg1: #1f1f1f;
--theme-bg2: #111;
--text-p0: #fff;
--text-p1: #fff;
--text-p2: #e0e0e0;
--text-p3: #ddd;
--text-code: #fff;
}
#Dark .tag-plugin[color='warning'],
#Dark .tag-plugin[color='light'] {
--text-p0: #000;
--text-p1: #111;
--text-p2: #1f1f1f;
--text-p3: #555;
--text-code: #fff;
}
#Dark .tag-plugin {
/* --theme: var(--text-p1); */
--theme-border: var(--block-border);
--theme-block: var(--block);
--theme-codeblock: var(--block);
}
#Dark .social-wrap a.social:hover {
box-shadow: none;
}
#Dark .widget-wrapper.timeline .tag-plugin.timeline .timenode .header p {
color: var(--text-p2);
}


#Dark .widget-wrapper.timeline .tag-plugin.timeline .timenode .body {
border-radius: 12px;
background: var(--alpha50);
box-shadow: none;
}
#Dark a.button.start.gradient {
transition: 0.38s ease-out;
position: relative;
z-index: 0;
background: linear-gradient(to right, #4c95fa, #38c9fa, #24f9c4, #24f9c4, #38c9fa, #4c95fa);
background-size: 1000%;
color: #fff;
text-shadow: 0 0 1px rgba(0,0,0,0.12);
animation: glow 60s linear infinite;
}

/* aplayer音乐播放器样式 */
#Dark .aplayer {
background: #26292c;
font-family: Arial,Helvetica,sans-serif;
margin: 5px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
border-radius: 12px;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: normal;
position: relative;
}

#Dark .aplayer .aplayer-list ol li {
position: relative;
height: 32px;
line-height: 32px;
padding: 0 15px;
font-size: 12px;
border-top: 1px solid #383d42;
cursor: pointer;
transition: all .2s ease;
overflow: hidden;
margin: 0;
}
/* 当前选择歌曲 */
#Dark .aplayer .aplayer-list ol li.aplayer-list-light {
background: #f4f4f4;
color: #373737;
font-size: small;
font-weight: bold;
}
/* 经过字体颜色和大小变化 */
#Dark .aplayer .aplayer-list ol li:hover {
background: #efefef;
color: #ff5722;
font-size: small;
font-weight: bold;
}


.aplayer .aplayer-list ol li.aplayer-list-light,
.aplayer .aplayer-list ol li:hover {
font-size: small;
font-weight: bold;
}

.aplayer .aplayer-info .aplayer-music .aplayer-title {
font-size: 17px;
}

/* waline评论样式 */
#Dark .wl-count{
padding: .375em;
font-weight: bold;
font-size: 1.25em;
color: #fff;
}
#Dark .cmt-body.waline{
--waline-white: #000;
--waline-light-grey: #666;
--waline-dark-grey: #999;
/* 布局颜色 */

--waline-color: #fff;
--waline-bgcolor: var(--block);
--waline-bgcolor-light: #272727;
--waline-border-color: #333;
--waline-disable-bgcolor: #444;
--waline-disable-color: #272727;
/* 特殊颜色 */
--waline-bq-color: #272727;
/* 其他颜色 */
--waline-info-bgcolor: #272727;
--waline-info-color: #666;
}

#Dark .wl-user-name {
color: #999;
}

/* 不是ai制作标识 */
#Dark #notbyai {
content: url("/assets/website/Written-By-Human-black.png");
}
JS
blog\source\js\darkmode.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/**
* 监听系统主题
* @type {MediaQueryList}
*/
var OSTheme = window.matchMedia('(prefers-color-scheme: dark)');
OSTheme.addListener(e => {
if (window.localStorage.getItem('Theme_Mode') === 'auto') {
ThemeChange('auto');
}
})
/**
* 自动模式 6:00-18:00-Light 18:00-6:00-Dark,开启后每三十分钟检查一次
*/
const AutoMode = (htmlElement) => {
var date = new Date();
var hours = date.getHours();
if (hours < 18 && hours >= 6) {
document.querySelector("html").id = "Light";
} else {
document.querySelector("html").id = "Dark";
}
// if (htmlElement.id === "Light") { // 闪瞎你的眼模式(速度快一点的话)
// htmlElement.id = "Dark";
// } else { htmlElement.id = "Light"; }
}

let autoTimer;

/**
* 修改博客主题
* @param theme 亮为light,暗为dark,自动为auto
* @constructor
*/
const ThemeChange = (theme) => {
// 清除计时器
clearInterval(autoTimer);
// 抽取元素
const htmlElement = document.querySelector("html");
let themeBtnIcon;
try {
themeBtnIcon = document.querySelector("#start > aside > div > footer > div > a:last-child > i")
}
catch {
// 元素不存在
}

if (theme === 'light' || (theme === 'auto' && !OSTheme.matches)) {
htmlElement.id = "Light";
if (themeBtnIcon) {
themeBtnIcon.className = 'fa-solid fa-sun fa-spin fa-spin-reverse';
}
} else {
htmlElement.id = "Dark";
if (themeBtnIcon) {
themeBtnIcon.className = 'fa-solid fa-moon fa-fade';
}
}
if (theme === 'auto') {
if (themeBtnIcon) {
themeBtnIcon.className = 'fa-solid fa-circle-half-stroke fa-flip';
}
AutoMode(htmlElement);
autoTimer = setInterval(function () {
AutoMode(htmlElement);
}, 1000 * 60 * 30); // 半小时一次
}
window.localStorage.setItem('Theme_Mode', theme);
}

/**
* 初始化博客主题
*/
switch (window.localStorage.getItem('Theme_Mode')) {
case 'light':
ThemeChange('light');
break;
case 'dark':
ThemeChange('dark');
break;
default:
ThemeChange('auto');
}
/**
* 切换主题模式
*/
// 绑定按钮点击事件
try {
document.querySelector("#start > aside > div > footer > div > a:last-child").onclick = () => {
if (window.localStorage.getItem('Theme_Mode') === 'auto') {
hud.toast('🌞白天模式');
ThemeChange('light');
} else if (window.localStorage.getItem('Theme_Mode') === 'light') {
hud.toast('🌙 夜间模式');
ThemeChange('dark');
} else {
hud.toast('🌞/🌙 自动模式');
ThemeChange('auto');
}
}
} catch {
// 元素不存在
}
引入
blog\_config.yml
1
2
3
4
5
inject:
head:
- <link rel="stylesheet" href="/css/darkmode.css"> # 黑夜样式
script:
- <script type="text/javascript" src="/js/darkmode.js"></script> # 黑夜控制
侧边按钮设置
blog\_config.stellar.yml
1
2
3
4
5
6
7
######## Footer ########
footer:
social:
# 注意这里为最后一个按钮
mode:
icon: '<i class="fa-solid fa-circle-half-stroke fa-flip"></i>'
url: javaScript:void(0);

Github Actions无法响应问题

指在[fork](xaoxuu/issues-json-generator: 自动提取本仓库每个 issue 中的第一段 JSON 代码块并保存到仓库中,可用于友链、书签等数据收集。 (github.com))之后的actions无响应

1
2
3
标签评论者:.githorb#L1。
Ubuntu-18.04环境已弃用,请考虑切换到ubuntu-20.04(ubuntu-Latest)或ubuntu-22.04。
有关更多详细信息,请访问https://github.com/actions/virtual-environments/issues/6002

修改对应的环境配置,指定Ubuntu版本

.github/workflows/label-commenter.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
name: Label Commenter

on:
issues:
types:
- labeled
- unlabeled

jobs:
comment:
runs-on: ubuntu-20.04
steps:
- uses: actions/checkout@v2
- name: Label Commenter
uses: peaceiris/actions-label-commenter@v1
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
config_file: .github/configs/label-commenter-config.yml

效果

特别感谢SafeKiller_Zone大佬提供的帮助

不显示logo和menu(未解决)

old

1
header: false # 不显示左上角的 logo 和 menu

这个front-matter也无了

如何设置专栏icon(未解决)


本破站由 @BXZDYG 使用 Stellar 主题创建。
本博客部分素材来源于网络,如有侵权请联系1476341845@qq.com删除
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

本"页面"访问 次 | 👀总访问 次 | 总访客
全部都是博主用心学编写的啊!不是ai啊 只要保留原作者姓名并在基于原作创作的新作品适用同类型的许可协议,即可基于非商业目的对原作重新编排、改编或者再创作。