自定义小组件的配置与使用(8个) 实现并显示一个小组件需要两个步骤:
【配置】在组件库中声明组件 【使用】在需要的位置调用 组件库在 _data/widgets.yml
文件中,需要自己创建,内容形如:
'我的小组件1' : layout: 小组件布局模板 ...(其它属性)
使用的地方有:【主题配置】、【项目配置】、【页面】,后者可以覆盖前者,例如:
blog/source/_posts/xxx.md --- sidebar: ['我的小组件1' , '我的小组件2' ]---
组件库 在创建组件时,您可以使用以下这些 layout
布局:
toc 这是文章/文档的目录树组件,显示文章和文档的目录结构:
blog/source/_data/widgets.yml toc: layout: toc list_number: false min_depth: 2 max_depth: 5 fallback: recent
toc
的 fallback
默认是 recent
,即一篇文章没有 TOC
的时候会显示一个 recent
recent blog/source/_data/widgets.yml recent: layout: recent rss: limit: 5
在 wiki
板块显示的是最近更新的 wiki
页面,其余地方显示最近更新的文章。
hexo
的覆盖规则是合并而不是替换,所以若不想使用 recent
,除了在 _config.stellar.yml
中删除 recent
你还需要将此处的 recent
置空,即
blog/source/_data/widgets.yml 然后自己需要的地方用自己另建的一个 my_recent
组件
blog/source/_data/widgets.yml my_recent: layout: recent ...
related 相关文档 组件,用于显示具有相同 tags
的其它项目列表,暂不支持自定义内容:
Stellar 1.12.0 已将 wiki_more
,更名为 related
blog/source/_data/widgets.yml
markdown 这是一个自由度很高的标签,可以显示 markdown 文本内容:
blog/source/_data/widgets.yml welcome: layout: markdown title: 欢迎欢迎 content: | 欢迎使用 [Stellar](https://github.com/xaoxuu/hexo-theme-stellar/) 主题,下面是您的入门指南,祝您使用愉快! <br> **第一步** 创建 `blog/_config.stellar.yml` 文件,在此文件中填写需要自定义的主题配置。 <br> **第二步** 创建 `blog/source/_data/widgets.yml` 文件,此文件中填写需要自定义的侧边栏组件,例如 `welcome` 组件。 <br> 如果有任何疑问,请先查阅 [文档](https://xaoxuu.com/wiki/stellar/),如果文档中没有提供,请提 [issue](https://github.com/xaoxuu/hexo-theme-stellar/issues/) 向开发者询问。
tagcloud 标签云组件:
blog/source/_data/widgets.yml tagcloud: layout: tagcloud title: 标签云 min_font: 12 max_font: 24 amount: 100 orderby: name order: 1 color: false start_color: end_color: show_count: false
ghuser 显示 GitHub 用户基础信息卡片:
blog/source/_data/widgets.yml ghuser: layout: ghuser username: github avatar: true menu: true
因为它和侧边栏左上角默认的 header
功能存在重复,所以建议隐藏默认的 header
组件:
blog/source/_posts/xxx.md --- title: 某一篇文章 sidebar: [ghuser , ... ]header: false ---
ghrepo 显示 GitHub 仓库基础信息,需要搭配 repo
一起使用:
blog/source/_data/widgets.yml 需要在需要显示的文章页面的 front-matter
中按照如下格式写上仓库持有者和仓库名:
blog/source/_posts/xxx.md --- repo: xaoxuu/hexo-theme-stellar ---
如果需要显示在 wiki
项目中,则在 _data/projects.yml
中填写到对应项目的信息中:
blog/source/_data/projects.yml Stellar: title: Stellar subtitle: '每个人的独立博客 | Designed by xaoxuu' repo: xaoxuu/hexo-theme-stellar ...
timeline 时间线组件,这个功能在 1.12.0 版本后开始支持:
动态数据是从 GitHub Issues 中拉取的,使用方法为:
在 widgets.yml
中新建配置
blog/source/_data/widgets.yml timeline: layout: timeline title: 近期动态 api: https://api.github.com/repos/xaoxuu/hexo-theme-stellar/issues user: hide:
这个功能在 1.13.0 版本后开始支持。
blog/source/_data/widgets.yml '朋友圈' : layout: timeline title: 近期动态 api: https://api.vlts.cc/output_data/v1/xaoxuu/friends-rss-generator type: fcircle limit:
这个功能在 1.18.0 版本后开始支持:
blog/source/_data/widgets.yml weibo: layout: timeline title: 微博动态 api: https://raw.githubusercontent.com/GitHub用户名/仓库名/output/output/tweets.json type: weibo limit: 20
无论是哪种动态数据,你都可以在 _config.stellar.yml
中设置引用
blog/_config.stellar.yml sidebar: ... widgets: home: welcome, recent, 朋友圈, weibo
或者在你需要显示的页面引入,页面内引入优先于配置文件引入:
blog/source/_posts/xxx.md --- sidebar: [ghuser , search , 朋友圈 ]---
配置默认布局 主题配置中可以配置默认布局顺序,在这些页面中,侧边栏会按照指定的顺序从组件库中读取组件并显示:
blog/_config.stellar.yml sidebar: ... widgets: home: search, welcome, recent, timeline blog_index: search_blog, recent, timeline wiki_index: search_docs, recent, timeline others: search, welcome, recent, timeline post: toc, ghrepo, search, ghissues wiki: search, ghrepo, toc, ghissues, related page: welcome, toc, search
灵活用法 继承(覆盖)组件 适合有多个相似组件的情况,例如有多个时间线组件,显示规则相同,仅 api
地址不同:
blog/source/_data/widgets.yml my_timeline_lite: layout: timeline title: 近期动态 user: xaoxuu hide: title,footer api:
在不同的页面设置不同的 api
地址:
blog/source/_posts/xxx.md --- title: 某一篇文章 sidebar: - toc - override: my_timeline_lite api: https://xxx ---
匿名组件:仅在使用时创建 适合仅在一个页面或项目中才需要用到的组件,例如在某个页面的侧边栏放一个公告:
blog/source/_posts/xxx.md --- title: 某一篇文章 sidebar: - toc - layout: markdown title: '重要通知 [NOTE.2022-09]' content: | 请不要原封不动的把本站内容复制到贵站中使用,这样一方面不尊重原作者,另一方面也会因为存在大量重复内容影响贵站收录甚至降权。 从2022年9月起本站已不再开源,已经持有源码副本或`fork`的朋友请及时删除以防止被他人恶意搬运的情况继续发生。 [> 了解详情 ](https://github.com/xaoxuu/xaoxuu.github.io#readme) ---
又或者在项目的配置文件中创建专属于这个项目的组件:
blog/_data/projects.yml Stellar: name: Stellar title: Stellar - 每个人的独立博客 subtitle: '每个人的独立博客 | Designed by xaoxuu' sidebar: - search - toc - ghrepo - layout: timeline title: 最近更新 api: https://api.github.xaox.cc/repos/xaoxuu/hexo-theme-stellar/releases?per_page=1 hide: footer ...