各个版本更新及其重要更新内容详见
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: 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 blog_index: search_blog, recent, timeline wiki_index: search_docs, recent, timeline others: search, welcome, recent, timeline post: ghrepo,search, toc, ghissues wiki: ghrepo,search_docs, toc, ghissues, related page: welcome,search, toc
|
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 theme: '#1BCDFC' icon: solar:documents-bold-duotone 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
new
返回项目的按钮移除了
notes
主要问题为不显示首页的avatar
,title
和subtitle
解决如下
blog\source\_data\wiki\notes.yml1 2 3 4 5 6 7 8 9 10 11
|
logo: avatar: '[${config.avatar}](/)' title: '[${config.title}](/)' subtitle: '我秃了头 | 可我却还不是程序员'
|
blog\source\notes\Vue.md1 2 3 4 5 6 7
| --- date: 2023-12-31 18:58:39
wiki: notes menu_id: explore title: Vue ---
|
简化版wiki,专栏
我觉得十分欣喜,是一个好的设计,我没什么项目可以写在wiki里面的,只是一些学习笔记,梳理起来不是像wiki那种介绍项目那样
使用方法
Stellar:实现博客专栏/专题 - XAOXUU
1. 创建专栏
在 blog/source/_data/
文件夹中创建一个 topic
文件夹,在其中放入各个专栏的描述文件,文件名就是项目的 id
(我这里是stellar.yaml):
blog\source\_data\topic\stellar.yml1 2 3 4
| name: Stellar title: Stellar - 每个人的独立博客 description: 关于搭建独立博客相关的知识和经验分享,以及 Stellar 的高级用法、版本更新相关的注意事项。 order_by: -date
|
2. 发布文章
在此专栏文章的 md
文件的 front-matter
部分指定所属的专栏 id
(即上一步创建的文件名 id.yml
)
blog/source/_posts/文章.md1 2 3 4 5 6
| --- title: 这是文章标题 topic: id ---
文章正文
|
ghuser
Stellar:自定义小组件的配置与使用(9个) - XAOXUU
作用是显示 GitHub 用户基础信息卡片,但是在最新版本的样式,把menu移开了,感觉不是很好
搜索框永远在menu的上边,因为搜索框变成了一个单独的组件,不能再sidebar
中进行设置了,所以我也不知道怎么才能隐藏search和调整search的位置
notes
写法部分改动
old
blog\source\_data\wiki\notes.yml1 2 3 4 5 6
| sidebar: - toc - layout: search override: search filter: /notes/ placeholder: 在此处搜索...
|
new
blog\source\_data\wiki\notes.yml1 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
wiki: notes menu_id: explore title: Vue ---
|
如何去掉顶部导航
new
1 2 3 4
| --- breadcrumb: false
---
|
achieve
假若在front-matter
再加入h1: ''
可以直接将友链去掉
搜索(wiki)
old
blog\source\_data\wiki\Vue.yml1 2 3 4 5
| sidebar: - search: override: search filter: /wiki/vue/ placeholder: '在 Vue笔记 中搜索...'
|
new
blog\source\_data\wiki\Vue.yml1 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.yml1 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.yml1 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.css1 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.yml1 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.css1 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
| --site-bg: --card: --block: --block-border: --block-hover: --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: --sidebar-bg: --text: --text-p0: --text-p1: --text-p2: --text-p3: --text-p4: --text-meta: --text-code: } @media screen and (max-width: 667px) { --site-bg: } }
--blur-bg: rgba(0,0,0,0.5); }
--blur-bg: rgba(0,0,0,0.4); }
--theme: --theme-bg1: --theme-bg2: --theme-border: --text-p0: --text-p1: --text-p2: }
--theme: --theme-bg1: --theme-bg2: --theme-border: --text-p0: --text-p1: --text-p2: }
--theme: --theme-bg1: --theme-bg2: --theme-border: --text-p0: --text-p1: --text-p2: }
--theme: --theme-bg1: --theme-bg2: --theme-border: --text-p0: --text-p1: --text-p2: }
--theme: --theme-bg1: --theme-bg2: --theme-border: --text-p0: --text-p1: --text-p2: }
--theme: --theme-bg1: --theme-bg2: --theme-border: --text-p0: --text-p1: --text-p2: }
--theme: --theme-bg1: --theme-bg2: --theme-border: --text-p0: --text-p1: --text-p2: }
--theme: --theme-bg1: --theme-bg2: --theme-border: --text-p0: --text-p1: --text-p2: }
--theme-border: --theme-bg1: --theme-bg2: --text-p0: --text-p1: --text-p2: --text-p3: --text-code: }
--theme-border: --theme-bg1: --theme-bg2: --text-p0: --text-p1: --text-p2: --text-p3: --text-code: }
--text-p0: --text-p1: --text-p2: --text-p3: --text-code: }
/* --theme: var(--text-p1); */ --theme-border: var(--block-border); --theme-block: var(--block); --theme-codeblock: var(--block); }
box-shadow: none; }
color: var(--text-p2); }
border-radius: 12px; background: var(--alpha50); box-shadow: none; }
transition: 0.38s ease-out; position: relative; z-index: 0; background: linear-gradient(to right, background-size: 1000%; color: text-shadow: 0 0 1px rgba(0,0,0,0.12); animation: glow 60s linear infinite; }
/* aplayer音乐播放器样式 */
background: 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; }
position: relative; height: 32px; line-height: 32px; padding: 0 15px; font-size: 12px; border-top: 1px solid cursor: pointer; transition: all .2s ease; overflow: hidden; margin: 0; } /* 当前选择歌曲 */
background: color: font-size: small; font-weight: bold; } /* 经过字体颜色和大小变化 */
background: color: 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评论样式 */
padding: .375em; font-weight: bold; font-size: 1.25em; color: }
--waline-white: --waline-light-grey: --waline-dark-grey: /* 布局颜色 */
--waline-color: --waline-bgcolor: var(--block); --waline-bgcolor-light: --waline-border-color: --waline-disable-bgcolor: --waline-disable-color: /* 特殊颜色 */ --waline-bq-color: /* 其他颜色 */ --waline-info-bgcolor: --waline-info-color: }
color: }
/* 不是ai制作标识 */
content: url("/assets/website/Written-By-Human-black.png"); }
|
JS
blog\source\js\darkmode.js1 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.yml1 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.yml1 2 3 4 5 6 7
| 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.yml1 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大佬提供的帮助
old
1
| header: false # 不显示左上角的 logo 和 menu
|
这个front-matter
也无了
如何设置专栏icon(未解决)