更新于 

探索个性化选项

侧边栏组件

Stellar 和 Volantis 同样支持强大的自定义组件功能,默认提供的组件在主题配置文件中已经列出:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Sidebar widgets
widgets:
# Recent update
recent:
layout: recent
rss: /atom.xml # npm i hexo-generator-feed
limit: 5 # Count of posts
# TOC (valid only in layout:post/wiki)
toc:
layout: toc
list_number: false
min_depth: 2
max_depth: 5
# welcome
welcome:
layout: markdown
title: 欢迎
content: |
欢迎光临小站,这是一个全新的主题,拥有精心设计的样式,保留了 Volantis 的自定义侧边栏,可以写一些公告。
本站主题还没开发完毕,旧的文章正在逐步迁移至新主题。

front-matter 中写上它们的名字,侧边栏就会按顺序显示这些小组件:

blog/source/xxx.md
1
sidebar: [welcome, toc]

和 Volantis 一样,您可以使用模板创建任何组件,在任何页面的侧边栏显示。推荐将自己的组件配置写在数据文件中:

blog/source/_data/widgets.yml
1
2
3
4
5
welcome:
layout: markdown
title: 欢迎欢迎
content:
- 这里写的内容会覆盖主题配置文件中的

目前支持的布局模板有:markdown,后续将会加入列表、网格等布局模板。

Q & A

Q: 如果不想显示默认的 welcome 组件怎么办?
A: 删掉它就可以啦。

Q: 如果想在 welcome 那个位置显示成其它布局的组件?
A: 把 welcome 组件的属性都改成你想要的那个组件的就可以啦。

评论

共用评论数据

如果您有多个页面需要共用评论数据,可以把它们的 comment_id 设为相同的值,例如:

blog/source/about/index.md
1
2
title: 关于
comment_id: '留言板'
blog/source/friends/index.md
1
2
title: 友链
comment_id: '留言板'

使用其它评论数据

如果您有多个页面需要另外一个数据库的评论数据,以 Beaudar 为例,您可以这样:

blog/source/wiki/stellar/index.md
1
2
3
4
title: 快速开始您的博客之旅
beaudar:
repo: xaoxuu/hexo-theme-stellar
'issue-term': 'Q & A'

文章自定义

是否自动生成封面

根据 tags 作为关键词为每一篇文章在线搜索封面:

blog/_config.stellar.yml
1
2
article:
auto_cover: true

是否自动生成摘要

建议您通过 description 或者 excerpt 方式生成摘要,但如果您希望自动从文章内容截取一定字数的文字作为摘要,可以这样设置:

blog/_config.stellar.yml
1
2
article:
auto_excerpt: 200

相关文章推荐

要实现相关文章推荐功能,您需要安装插件:

然后在主题配置文件中开启:

blog/_config.stellar.yml
1
2
3
4
5
article:
# npm i hexo-related-popular-posts
related_posts:
enable: true
title: 您可能感兴趣的文章

自定义样式

如果要修改样式,您需要删掉主题的样式文件的 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
2
3
4
5
6
7
highlight:
enable: true
line_number: false
auto_detect: false
tab_replace: ' '
wrap: false
hljs: true

然后再找到 inject 新增一个 css 链接:

1
2
3
inject:
head:
- <link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.5.0/build/styles/atom-one-dark.min.css">

外部文件注入

在站点根目录下的配置文件中进行修改 inject.head 以在 <head> 标签末尾处注入代码,修改 inject.script 以在 <body> 标签末尾处注入代码。

blog/_config.yml
1
2
3
4
5
6
7
inject:
head:
- <meta name="msapplication-TileColor" content="#2d89ef">
- <meta name="msapplication-config" content="/assets/favicon/browserconfig.xml">
- <meta name="theme-color" content="#ffffff">
script:
- https://fastly.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js