Welcome to Hexo! 🧡🧡🧡
This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick Start
Create a new post
1 | $ hexo new "My New Post" |
More info: Writing
Run server
1 | $ hexo server |
More info: Server
Generate static files
1 | $ hexo generate |
More info: Generating
Deploy to remote sites
1 | $ hexo deploy |
More info: Deployment
图片排列
如何使用文档系统
Stellar 独创了其它 Hexo 主题所没有的 Wiki 系统，可以自动找到一个项目的所有文档分页，生成一个目录树，还可以手动指定顺序、标题、分组，而非依赖文件路径、文件名来排序和显示。
创建一个项目
在 blog/source/ 文件夹中创建一个 wiki 文件夹，在其中放入各个项目的文档。以 Stellar 项目为例：
1 | blog/source/wiki/stellar/index.md |
设置布局模板和项目名称：
1 |
|
建议用这个文件作为项目的主页，并在文件夹内创建其它分页。Stellar 会把同一个项目的所有分页中 order 最小的一页作为项目的主页（其默认值为0）。
完善项目信息
在数据文件中创建项目文件，以 Stellar 为例：
1 | Stellar: |
是否显示封面
项目可以显示一个全屏封面，封面占据一个屏幕的高度，会居中依次显示项目的 logo、标题、描述。开启项目封面方法如下：
1 | Stellar: |
如果 logo 中已经包含了项目标题，可以这样设置不显示项目标题：
1 | Stellar: |
项目文档标签
如果您有很多项目，有些项目是有相关性的，可以相同的 tags 值：
1 | Stellar: |
也可以设置多个 tags 值：
1 | Stellar: |
项目的 GitHub 仓库信息
设置了 repo 值就会在侧边栏显示项目仓库的相关链接：
1 | Stellar: |
项目评论设置
如果希望项目的所有分页使用相同的评论数据，可以在这里覆盖评论配置：
1 | Stellar: |
是否需要被索引
如果您有些项目希望在项目列表中隐藏，可以设置 index 值：
1 | Stellar: |
文档排序
一个项目文档的多个分页之间以 order 的值作为排序依据，数字越小越靠前，最小的是项目主页。
侧边栏设置
侧边栏组件
如果您希望自定义某个项目的侧边栏组件，可以设置 sidebar 值：
1 | Notes: |
对目录树进行分组
如果您的项目文档分页较多，可以对目录树进行分组：
1 | Stellar: |
左边是显示的标题，右边是 order 的区间，例如某页文档的 order 是 150，那么这页文档将会显示在「日常问题解决方案」这个组中。
指定 wiki 路径
在根目录中添加 wiki_dir 指定 Wiki 主页的路径，若不指定路径，您在点击返回所有项目时会回到主页而非回到所有项目。
1 | wiki_dir: wiki |
例如书籍类的“项目”可以改为：
1 | wiki_dir: books |
例如商品/产品类的“项目”可以改为：
1 | wiki_dir: products |
自定义小组件的配置与使用（8个）
实现并显示一个小组件需要两个步骤：
- 【配置】在组件库中声明组件
- 【使用】在需要的位置调用
组件库在 _data/widgets.yml 文件中，需要自己创建，内容形如：
1 | '我的小组件1': |
使用的地方有：【主题配置】、【项目配置】、【页面】，后者可以覆盖前者，例如：
1 |
|
组件库
在创建组件时，您可以使用以下这些 layout 布局：
这是文章/文档的目录树组件，显示文章和文档的目录结构：
1 | toc: |
toc 的 fallback 默认是 recent，即一篇文章没有 TOC 的时候会显示一个 recent
1 | recent: |
在 wiki 板块显示的是最近更新的 wiki 页面，其余地方显示最近更新的文章。
hexo 的覆盖规则是合并而不是替换，所以若不想使用 recent，除了在 _config.stellar.yml 中删除 recent 你还需要将此处的 recent 置空，即
1 | recent: |
然后自己需要的地方用自己另建的一个 my_recent 组件
1 | my_recent: |
相关文档组件，用于显示具有相同 tags 的其它项目列表，暂不支持自定义内容：
Stellar 1.12.0 已将 wiki_more，更名为 related
1 | related: |
这是一个自由度很高的标签，可以显示 markdown 文本内容：
1 | welcome: |
标签云组件：
1 | tagcloud: |
显示 GitHub 用户基础信息卡片：
1 | ghuser: |
因为它和侧边栏左上角默认的 header 功能存在重复，所以建议隐藏默认的 header 组件：
1 |
|
显示 GitHub 仓库基础信息，需要搭配 repo 一起使用：
1 | ghrepo: |
需要在需要显示的文章页面的 front-matter 中按照如下格式写上仓库持有者和仓库名：
1 |
|
如果需要显示在 wiki 项目中，则在 _data/projects.yml 中填写到对应项目的信息中：
1 | Stellar: |
时间线组件，这个功能在 1.12.0 版本后开始支持：
动态数据是从 GitHub Issues 中拉取的，使用方法为：
在 widgets.yml 中新建配置
1 | timeline: |
这个功能在 1.13.0 版本后开始支持。
https://xaoxuu.com/wiki/stellar/fcircle/
1 | # 愣着干啥，新建啊 |
这个功能在 1.18.0 版本后开始支持：
1 | weibo: |
无论是哪种动态数据，你都可以在 _config.stellar.yml 中设置引用
1 | sidebar: |
或者在你需要显示的页面引入，页面内引入优先于配置文件引入：
1 |
|
配置默认布局
主题配置中可以配置默认布局顺序，在这些页面中，侧边栏会按照指定的顺序从组件库中读取组件并显示：
1 | sidebar: |
灵活用法
继承（覆盖）组件
适合有多个相似组件的情况，例如有多个时间线组件，显示规则相同，仅 api 地址不同：
1 | my_timeline_lite: |
在不同的页面设置不同的 api 地址：
1 |
|
匿名组件：仅在使用时创建
适合仅在一个页面或项目中才需要用到的组件，例如在某个页面的侧边栏放一个公告：
1 |
|
又或者在项目的配置文件中创建专属于这个项目的组件：
1 | Stellar: |
网站和主题基本信息配置
站点信息
Stellar 会读取站点根目录下的 _config.yml 文件中的一些信息来生成您的网站，所以您需要修改以下值：
1 | title: 您的网站名称 |
更多关于 Hexo 文件的配置请移步官方文档
官方文档多语言设置
主题中的默认文案都支持多语言，以简体中文为例，您可以在 themes/stellar/languages/zh-CN.yml 中修改文案。
更改网站优先语言，需要在站点根目录下的配置文件中进行修改：
1 | language: |
创建主题配置文件
在博客根目录的 _config.yml 文件旁边新建一个文件： _config.stellar.yml ，在这个文件中的配置信息优先级高于主题文件夹中的配置文件。
头部标签自定义
Open Graph
默认生成 Open Graph 标签，如果您不希望生成它，可以在主题配置文件中关闭：
1 | open_graph: |
容器类标签（7个）
box 普通块容器
note 标签就是使用 box 容器实现的，它们样式是相同的：
更名记录（Stellar 1.18.0）
因为原 noteblock 标签在升级到 hexo 6.0 之后跟官方库冲突了，官方一直没有解释原因，后不得不改名：
noteblock -> grid -> border -> box
详情见：#172
1 | {% box [title] [color:color] [child:codeblock/tabs] %} |
1 | {% box Stellar v1.12.0 color:warning %} |
彩色代码块
设置 child:codeblock 并设置 color:颜色枚举 可以实现 10 种不同颜色的代码块，彩色代码块一般可以用在代码正确与错误的示范对比场景。
推荐的写法
1 | func test() { |
不推荐的写法
1 | func test() -> () { |
嵌套其它标签
例如嵌套一个 tabs 标签：
folding 折叠容器
折叠块标签的语法格式为：
1 | {% folding title [codeblock:bool] [open:bool] [color:color] %} |
1 | codeblock: true/false |
彩色可折叠代码块
备注标签相较于旧版进行了增强，可以实现更多种颜色，还可以通过设置 child:codeblock 来实现可折叠的代码块。以下是一个默认打开的代码折叠框：
默认打开的代码折叠框
1 | func test() { |
代码如下：
1 | {% folding child:codeblock open:true color:yellow 默认打开的代码折叠框 %} |
危险，请不要打开这个
通过设置颜色，以实现更醒目的作用，但不要滥用色彩哦～
警告，真的很危险
通过设置颜色，以实现更醒目的作用，但不要滥用色彩哦～
最后一次警告，千万不要打开这个
不要说我们没有警告过你，Windows 10 不是為所有人設計，而是為每個人設計。
folders 多个折叠容器聚合
样式相比 folding 简单一些，适用于多个折叠标签平铺显示的场景，例如题目列表：
题目1
这是答案1
题目2
这是答案2
题目3
这是答案3
代码如下：
1 | {% folders %} |
tabs 分栏容器
这个标签移植自 NexT 主题，但做了以下修改：
- 支持设置
align:center来使内容居中 - 设置默认激活的标签方式为
active:1而非, 1（使用默认格式降低学习成本，且显式声明可读性更强） - 不需要
<!-- endtab -->来作为结束标识（因为 Stellar 会自动判断） - 不需要
tabs id来保证唯一性（因为 Stellar 会设置唯一标识） - 不支持
@icon方式设置图标（因为 Stellar 不再内置fontawesome图标库） - 轮廓样式简化，可以搭配其它容器类标签嵌套使用。
1 | let x = 123 |
| a | b | c |
|---|---|---|
| a1 | b1 | c1 |
| a2 | b2 | c2 |
grid 网格分区容器
这个功能在 1.12.0 版本后开始支持，目前只支持显示一行两列，且手机端因宽度较窄会恢复为单列显示。
The Galactic Center is the rotational center of the Milky Way galaxy. Its central massive object is a supermassive black hole of about 4 million solar masses, which is called Sagittarius A*. Its mass is equal to four million suns. The center is located 25,800 light years away from Earth.
Ōwhiro Bay, Wellington, New Zealand
Published on May 31, 2022
SONY, ILCE-6000
Free to use under the Unsplash License
普通块样式：
卡片样式：
示例代码：
1 | {% grid bg:block %} |
bg为可选参数，默认没有背景，可设置为block/card两种样式
about 关于块容器
方便在关于页面显示一段图文信息，比普通块容器稍微有一点点不一样：
1 | {% about avatar:/assets/xaoxuu/avatar/rect-256@2x.png height:80px %} |
请发表您的建议 #198
swiper 轮播容器
默认一张图片是 50% 宽度，通过设置 width:min 设置为 25% 宽度，width:max 设置为 100% 宽度。
1 | {% swiper effect:cards %} |
1 | {% swiper width:min/max %} |
1 | {% swiper effect:cards/coverflow %} |
一个页面只能设置一次，第一个 swiper 容器的效果全局生效。
数据集合类标签（5个）
timeline 时间线
支持静态和动态时间线数据源，用法非常多，详见这篇文章：
https://xaoxuu.com/blog/20221029/
静态时间线
静态数据是写死在 md 源文件中的，在 deploy 时就已经确定了。
主要部分功能已经开发的差不多了。
今天除夕，也是生日，一个人在外地过年+过生日，熬夜开发新主题，尽量在假期结束前放出公测版。
1 | {% timeline %} |
动态时间线
动态数据是从 GitHub Issues 中拉取的，使用方法为：
- 建一个仓库
- 创建一个
issue并添加一个label进行测试 - 写
timeline标签时加上api:https://api.github.com/repos/your-name/your-repo/issues
例如：
1 | {% timeline api:https://api.github.com/repos/xaoxuu/blog-timeline/issues?direction=asc&per_page=3 %}{% endtimeline %} |
1 | 效果如下： |
https://xaoxuu.com/wiki/stellar/fcircle/
1 | {% timeline type:fcircle api:https://raw.githubusercontent.com/xaoxuu/friends-rss-generator/output/data.json %} |
- fork 爬虫 仓库 ，修改自己的仓库名
- 修改
.github/workflows/main.yml中的微博ID为你想爬取的ID，修改完后每天会自动爬取你的微博，存储为 json 文件，输出文件在 output 分支
1 | {% timeline limit:20 type:weibo api:你的json文件地址 %}{% endtimeline %} |
静态 + 动态
用法同静态和动态单独使用时一样，例如：
1 | {% timeline reversed:true api:https://api.github.com/repos/xaoxuu/blog-timeline/issues?per_page=2 %} |
数据筛选
只显示某个人的数据
筛选最近3条todo
筛选评论最多的3条建议
上述示例代码如下：
1 | {% folders %} |
更多用法详见：
https://docs.github.com/en/rest/issues/issues#list-issues-assigned-to-the-authenticated-user
friends 友链
您可以在任何位置插入友链组，支持静态数据和动态数据，静态数据需要写在数据文件中：
1 | '开源大佬': |
在需要的位置这样写：
1 | {% friends 开源大佬 %} |
实现动态友链
从 xaoxuu/issues-json-generator 作为模板克隆或者 fork 仓库
修改 config.yml 并打开 github action 的运行权限
1 | # 要抓取的 issues 配置 |
不出意外的话，仓库中已经配置好了 issue 模板，只需要在模板中指定的位置填写信息就可以了。然后在自己的仓库里提交一个 issue 并将 Label 设置为 active 进行测试。
提交完 issue 一分钟左右，如果仓库中出现了 output 分支提交，可以点击查看一下文件内容是否已经包含了刚刚提交的 issue 中的数据，如果包含，那么前端页面就可以使用友链数据了：
1 | {% friends api:https://raw.githubusercontent.com/xaoxuu/friends/output/v2/data.json %} |
数据托管与加速
特别感谢小冰博客的加速访问方案，解决了直接请求 GitHub API 速度过慢的问题，详见 小冰博客 的教程。
支持把数据托管到任何其他地方来使用，例如：
1 | {% friends api:https://api.vlts.cc/output_data/v2/xaoxuu/friends %} |
动态数据 API 升级至 v2 版本，原使用 issue-api 仓库的需要将友链仓库同步更新。
v1 版本已经停止维护。
你可以有 N 种办法加速访问 GitHub 仓库里的文件。
sites 网站卡片
您可以在任何位置插入网站卡片组，支持静态数据和动态数据，静态数据需要写在数据文件中：
1 | '分组名': |
在需要的位置这样写：
1 | {% sites 分组名 %} |
原 friends 和 sites 标签数据合并至 links.yml 文件，动态数据使用方法同友链，数据源格式相同，与友链共享数据，仅样式不同，也可以用 sites 标签做友链。
ghcard 卡片
1 | {% ghcard xaoxuu %} |
https://github.com/anuraghazra/github-readme-stats
toc 文档目录树
1 | {% toc wiki:xxx [open:true] [display:mobile] title %} |
表达类标签（14+个）
emoji 表情
内置了可配置的表情标签 
使用方法如下：
1 | {% emoji 爱你 %} |
1 | {% emoji [source] name [height:1.75em] %} |
其中 source 可省略，默认为配置中的第一个 source（详见「引入表情包」部分）
如果对高度有特别要求，可以指定高度，例如：
1 | {% emoji blobcat ablobcatrainbow height:4em %} |
表情速查表1：stellar表情标签索引
表情速查表2：Stellar内嵌blobcat小表情
1 | tag_plugins: |
在配置文件中，文件名用
${name}代替。
mark 行内文本标记
支持多彩标记，包括：默认 红 橙 黄 绿 青 蓝 紫 浅 深 警告 错误 一共 12 种颜色。
1 | 支持多彩标记，包括：{% mark 默认 %} {% mark 红 color:red %} {% mark 橙 color:orange %} {% mark 黄 color:yellow %} {% mark 绿 color:green %} {% mark 青 color:cyan %} {% mark 蓝 color:blue %} {% mark 紫 color:purple %} {% mark 浅 color:light %} {% mark 深 color:dark %} {% mark 警告 color:warning %} {% mark 错误 color:error %} 一共 12 种颜色。 |
image 图片标签
图片标签是一个精心设计的应对各种尺寸插图的标签，对于大图，可以放置一个「下载」按钮，语法格式如下：
1 | {% image src [description] [download:bool/string] [width:px] [padding:px] [bg:hex] %} |
1 | src: 图片地址 |
大尺寸图片
无论在什么宽度的设备上都希望横向铺满的图片，一般不需要额外操作。可以在链接后面写上图片描述，如有必要，可以通过设置 download:true 使其显示一个「下载」按钮链接指向图片地址，如果下载链接与显示的图片地址不同，可以 download:下载链接 来使其能够下载原图。
1 | {% image /assets/wiki/stellar/photos/183e71e0ad995.jpg 来自印度的 Rohit Vohra 使用 iPhone 12 Pro Max 拍摄。 download:https://www.apple.com.cn/newsroom/images/product/iphone/lifestyle/Apple_ShotoniPhone-rohit_vohra_12172020.zip %} |
小尺寸图片优化
宽度较小而高度较大的图片，可以设置宽、高、填充间距、背景色等对其布局进行优化，使得它在不同宽度的屏幕下都能获得不错的视觉体验：
有底色的图片，可以填充图片底色：
1 | {% image /assets/xaoxuu/mirror/apple/documentation/watchkit/06d45110-1dd7-49a4-a413-9f5159ecdd0e.png width:200px padding:16px bg:white %} |
鼠标拖拽一下图片可以看看原图
如果不进行约束，在宽屏设备上阅读体验很糟糕
没有底色的图片，可以填充 bg:var(--card) 动态颜色，能够适配暗黑模式：
1 | {% image /assets/wiki/stellar/icon.svg bg:var(--card) padding:16px %} |
支持 Fancybox 插件点击放大
由于 Stellar 主题的插件具有按需加载的特性，所以 Fancybox 插件默认也是已经配置好了的，在任意 image 标签中增加 fancybox:true 参数即可为特定图片开启缩放功能。如果一个页面没有任何地方使用，则不会加载 Fancybox 插件。
如果您希望全站所有的 image 标签都开启此功能，可在主题配置文件中修改以下参数：
1 | ######## Tag Plugins ######## |
quot 引用
适合居中且醒目的引用：
Stellar 是最好用的主题
支持自定义引号：
热门话题
其中自定义引号素材在主题配置文件的 tag_plugins.quot 中配置：
1 | tag_plugins: |
写法如下
1 | 适合居中且醒目的引用：{% quot Stellar 是最好用的主题 %} |
特别引用
此外，加上
el:h2/h3/h4/h5/h6可以作为标题使用
poetry 诗词
莫笑农家腊酒浑，丰年留客足鸡豚。
山重水复疑无路，柳暗花明又一村。
箫鼓追随春社近，衣冠简朴古风存。
从今若许闲乘月，拄杖无时夜叩门。
1 | {% poetry 游山西村 author:陆游 footer:诗词节选 %} |
note 备注块
1 | {% note [title] content [color:color] %} |
1 | title: 标题（可选） |
具有标题的备注块
直接写备注内容，默认是和代码块一样的样式，第一个空格前面的是标题，后面的是正文，如果标题中需要显示空格，请使用 代替。
这是正文 哈哈。
1 | {% note 这 是标题 这是正文 哈哈。 %} |
彩色备注块
color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
1 | {% note 一共支持12种颜色，可以满足几乎所有的需求了。 color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 %} |
link 链接卡片
。。。。
外链卡片标签的语法格式为：
1 | {% link href [title] [icon:src] [desc:true/false] %} |
参数含义：
1 | href: 链接 |
1 | 不带摘要的样式： |
copy 复制行
对于单行内容，可以使用 copy 标签来实现复制功能：
您可以设置 git:https 或者 git:ssh 或者 git:gh 来快速放置一个 git 仓库链接：
1 | {% copy curl -s https://sh.xaox.cc/install | sh %} |
radio 单选
1 | {% radio 没有勾选的单选框 %} |
1 | checked: true/false |
checkbox 复选
1 | {% checkbox 普通的没有勾选的复选框 %} |
1 | checked: true/false |
navbar 导航栏
文章内也可以插入一个导航栏：
1 | {% navbar active:1 [文章](/) [项目](/wiki/) [留言](#comments) [GitHub](https://github.com/xaoxuu/) %} |
frame 设备框架
1 | {% frame iphone11 img:/assets/wiki/prohud/toast/demo-loading.png video:/assets/wiki/prohud/toast/demo-loading.mp4 focus:top %} |
文本修饰标签集
- 这是
密码 标签 - 这是 下划线 标签
- 这是
着重号 标签 - 这是
波浪线 标签 - 这是
删除线标签 - 这是 上角标 标签
- 这是 下角标 标签
- 这是 键盘样式 标签，试一试：⌘ + D
1 | - 这是 {% psw 密码 %} 标签 |
侧边栏配置
Logo
左上角的 logo 和标题取自站点根目录的配置文件：
1 | title: 网站名称 |
设置鼠标指上 subtitle 后翻转另一行字（您可以将鼠标移至左上角的Stellar查看效果）
1 | subtitle: 标题1 | 标题2 |
如果您想用一个图片作为 logo，可以直接在主题配置文件 sidebar.logo.title 中设置：
1 | sidebar: |
Navbar（主导航栏）
1 | sidebar: |
侧边栏宽度有限，如何在不影响观感的情况下设置更多的主导航栏按钮呢？建议设置一个「更多」按钮，然后在「更多」页面的侧边栏放上列表组件。
Search（搜索）
在 1.17.1 版本后开始支持，无需安装插件，默认开启。
1 | # 文章搜索 |
请提交PR…
在 _config.stellar.yml 中设置搜索选项并配置你想在侧边栏中显示的位置。
然后在 widgets.yml 文件中配置侧边栏搜索组件
1 | search: |
您可以设置 filter 按地址过滤搜索结果，默认 auto 是智能选择，规则如下：
layout: wiki：只在/wiki/当前项目中搜索- 其它：站内搜索
你可以在某些页面中通过覆盖 search 组件的 filter 参数来定制化搜索范围，例如:
1 | sidebar: |
如果想始终进行不加过滤的站内搜索，那么设置为 filter: '' 即可。
Footer（页脚）
1 | footer: |
自定义组件
Stellar 支持丰富的自定义小组件，详见这篇文档：
https://xaoxuu.com/wiki/stellar/widgets/
编写文章以及独立页面
文章封面
在文章列表页面或者其他位置显示的文章摘要卡片上面的图片称之为「文章封面」
自动生成封面
根据 tags 作为关键词为每一篇文章在线搜索封面：
1 | article: |
引用外部图片
在文章的 front-matter 中写上 cover: xxx 即可。例如：
1 |
|
显示效果
上面这种方式会显示title与description或者摘要，若你想要图片全显示，可以加入如下参数：
1 |
|
Stellar v1.14.0 更换 cover-title cover-cat cover-subtitle cover-text-color 为 poster
为了显示美观，建议
topic和caption选择其一与headline搭配使用。
显示效果
填写 topic 与 headline 时大标题位于上方
只填写 headline 或填写 headline 与 caption 时大标题位于下方
如果您想使用 Unsplash 搜索图片作为封面，可以在 cover 设置搜索关键词（用英文逗号隔开）：
1 |
|
内容摘要
自动生成摘要
建议您通过 description 或者 excerpt 方式生成摘要，但如果您希望自动从文章内容截取一定字数的文字作为摘要，可以这样设置：
1 | article: |
手动设置摘要
一篇文章开头一段文字描述就是摘要，摘要和正文用 <!-- more --> 隔开，前后一定要有空行。例如：
1 |
|
文章模板
使用 Hexo 自带模板实现命令行创建新文章时自动生成相关信息。
根目录下 scaffolds 文件夹中编辑 post.md 的 font-matter：
1 |
|
文章页
横幅图片
文章页面顶部区域可以显示长长的横幅图片，设置方法如下：
1 | banner: /assets/xaoxuu/blog/[email protected] |
如果您想使用 Unsplash 搜索图片作为横幅，可以在 banner 中设置搜索关键词（用英文逗号隔开）：
1 |
|
指定一级标题
默认的一级标题是文章的 title，如果希望使用别的文字作为一级标题，可以指定 h1，例如：
1 |
|
文章索引与推荐
文章如果有分类和标签就会自动在主页出现「分类」、「标签」选项卡实现分类浏览，不需要手动添加页面。
文章分类
在文章列表页面会显示文章所属的第一级分类，例如：
1 |
|
这样写就只会显示「设计开发」一级分类，而在文章页面顶部则会显示完整的面包屑导航。
文章标签
文章标签目前不可见，用于关键词、搜索、按标签检索、相关文章推荐等功能，例如：
1 |
|
相关文章推荐
要实现相关文章推荐功能，您需要安装插件：
然后在主题配置文件中开启：
1 | article: |
开启后会在每篇文章的下方推荐相同类型的文章。
参考资料
填写引用文章的标题和链接：
1 |
|
效果见这篇文章：
https://xaoxuu.com/blog/20200927/#references
更多的独立页面
Stellar 同时具有博客和 Wiki 两个大模块，为了能够正确进行导航栏高亮，引入了 menu_id 来进行区分，通常情况下，layout: post 和 layout: wiki 两种布局模板可以自动为 sidebar.menu.post 和 sidebar.menu.wiki 的导航栏按钮高亮。自己创建的独立页面也可以在 front-matter 中指定 menu_id 来使某个按钮处于选中状态。
例如您有关于、友链两个页面，都希望高亮「更多」按钮：
1 |
|
1 |
|
在主题配置文件中设置导航栏：
1 | sidebar: |
友链页面
友链被设计成标签，您可以在任何页面任何位置插入友链，详见：
#友链标签关于页面
没有单独的关于页面布局，您可以自由组合丰富的标签来实现个性化的关于页面，例如：about、tabs、navbar、quot、timeline 标签。
实现「笔记」页面
创建一个项目，设置为不索引：
1 | Notes: |
然后笔记页面的 front-matter 中指定要高亮的 menu_id：
1 |
|
这样就可以啦～
使用「友链朋友圈」极简版
主题内置版本数据服务由 友链朋友圈 极简版提供。
这个功能在 1.13.0 版本后开始支持。
修改 hexo_circle_of_friends/fc_settings.yaml 文件：
1 | - {link: "https://xaoxuu.com/friends/", theme: "stellar"} # 友链页地址1，修改为你的友链页地址 |
修改 hexo_circle_of_friends/fc_settings.yaml 文件：
1 | GITHUB_FRIENDS_LINKS: { |
见官方教程 #simplemode
支持首页文章导航栏、文章任意位置，创建一个文件，以本站 friends/rss/index.md 为例：
1 |
|
其中，api 部分替换为自己仓库地址及其对应的 data.json 文件真实路径。
其中，post_list: true 意味着页面会显示首页文章导航栏，搭配主题配置文件中的：
1 | post-index: |
即可实现在首页增加一个「朋友文章」栏目的效果。
- 你依然可以按照官方教程使用完整版。
- 本站示例仓库：@xaoxuu/friends-rss-generator
如果把data.json输出到 output 分支，可以直接使用下面的 API 来访问文件：
1 | https://api.vlts.cc/output_data/v1/xaoxuu/friends-rss-generator |
使用 Stellar 主题的博客
如果您也使用了 Stellar 并希望显示在这里，可以在 hexo-theme-stellar-examples 中提交 issue 告知您的站点信息，在您提交后的大约 3 分钟内生效。
评论插件配置（6个）
Beaudar
Beaudar 是 Utterances 的中文版本，相比 Utterances 有更多的体验优化，可以按时间倒序排序。
1 | comments: |
Beaudar 的配置方法很简单，创建一个仓库，在仓库中创建一个 域名白名单文件，然后在 此处 授权安装即可。
utterances
A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!
1 | comments: |
utterances 的配置方法很简单，创建一个仓库，在仓库中创建一个 域名白名单文件，然后在 此处 授权安装即可。
giscus
giscus 是由 GitHub Discussions 驱动的评论系统。让访客借助 GitHub 在你的网站上留下评论和反应吧！本项目受 utterances 强烈启发。
1 | comments: |
Twikoo
1 | comments: |
Waline
1 | comments: |
Artalk
1 | comments: |
评论的灵活用法
共用评论数据
如果您有多个页面需要共用评论数据，可以在 front-matter 中覆盖评论参数，例如：
1 | title: 关于 |
1 | title: 友链 |
使用其它评论数据
如果您有多个页面需要另外一个数据库的评论数据，以 Beaudar 为例，您可以这样：
1 | title: 快速开始您的博客之旅 |
探索号专题教程分享
如果您也有与 Stellar 相关的文章并希望显示在这里，可以直接在 hexo-theme-stellar 中选择【文章分享】模板按照格式提交即可，立即生效。
探索个性化配置
主题色
支持 HEX & HSL 表示颜色
1 | style: |
字体
系统字体
1 | style: |
外部字体
要想引用外部字体，你需要先在 _config.yml 中 inject 引入
举例，引用 Noto Serif SC 在 _config.yml 中写入
1 | inject: |
并在 _config.stellar.yml 中填写你引入的字体名称
1 | style: |
选择在线字体：
本地字体
若您想引用本地字体，举例，引用得意黑（SmileySans-Oblique.ttf）这个字体，先将字体放置于 blog/source/font/ 目录下，然后改动一下主题文件
1 | @font-face |
font-family 是你引入的字体家族名，src 中填写字体文件相对于 source 文件夹的路径
同样，你需要在 _config.stellar.yml 中填写你引入的字体名称（font-family）
1 | style: |
但是我个人并不推荐引用本地字体，相比于英文字体，中文字体囊括了众多的字符，这也无法避免地导致字体文件体积的增加，拿 Noto Serif SC 来说，单个ttf文件就有9mb之大，这对于您的站点而言加载速度可想而知。
文本对齐方向
1 | style: |
圆角大小
这个功能在 1.18.1 版本后开始支持。
1 | style: |
页面缓入效果
1 | # 默认关闭 |
此效果会和图片懒加载插件冲突，导致部分卡片和footer可能加载不出来
图片懒加载
1 | # 默认打开 |
加载提示
加载动态时间线、动态友链等显示提示
1 | # 默认打开 |
渐变色
这个功能在 1.18.2 版本后开始支持。
您可以在搜索框与 wiki 项目的封面开始按钮处设置渐变色 CSS 代码
1 | style: |
您可以在下面网站中寻找中意的渐变色
当然，如果只想设置纯色的话可以直接设置单色，支持 HEX 和 HSL，例如 search: 'hsl(212 16% 98%)'
顶部检索栏
这个功能在 1.13.0 版本后开始支持。
1 | ######## Index ######## |
站点地图
页面底部的站点导航，你也可以在 content 中自定义一些文字信息，支持 Markdown 格式。
1 | sitemap: |
自定义样式
如果要修改样式，您需要删掉主题的样式文件的 CDN 链接，使用本地文件，然后在 themes/stellar/source/css/_custom.styl 中进行修改。
使用其它 highlight.js 代码高亮主题
Hexo 官方有文档：https://hexo.io/docs/syntax-highlight.html#hljs
Tip: When line_number is set to false, wrap is set to false and hljs is set to true, you can then use highlight.js theme directly in your site.
以atom-one-dark主题为例，翻译过来就是_config.yml找到highlight并修改为：
1 | highlight: |
然后再找到 inject 新增一个 css 链接：
1 | inject: |
外部文件注入
在站点根目录下的配置文件中进行修改 inject.head 以在 <head> 标签末尾处注入代码，修改 inject.script 以在 <body> 标签末尾处注入代码。
1 | inject: |
