组件体系 - Ray7

通过自定义组件能够增加用户体验，它通常位于页面的左侧或右侧，作为主内容的补充。

组件库

组件库在 _data/widgets.yml 文件中，需要自己创建，内容形如：

blog/source/_data/widgets.yml

1
2
3

'组件名称':  #可以自定义
  layout: 小组件布局模板
  ...(其它属性)

组件位置

分为左侧侧边栏leftbar和右侧侧边栏rightbar，可以在主题配置，项目配置，页面配置中启用组件，后者覆盖前者,将自定义的组件添加到需要展示的位置即可，组件名称为可以自定义

_config.stellar.yml

 home:  # 主页配置
    leftbar: linklist, recent
    rightbar: welcome
 index_blog: 
    leftbar: welcome,recent 
    rightbar: 
....

目录树组件

可以显示文章和文档的目录结构

blog/source/_posts/widgets.yml

toc:
  layout: toc
  list_number: false # 是否显示序号
  min_depth: 2 # 建议不要低于 2 即从 H2 标签开始解析（为了过滤掉通常作为文章大标题的 H1）
  max_depth: 5 # 5 代表最多解析到 H5 标签
  fallback: recent # Use a backup widget when toc does not exist.
  collapse: false # true / false / auto (始终折叠/不折叠/自动折叠)

linklist 链接组件

实现自定义链接跳转，例如跳转到其他博客、社交媒体、文档等

blog/source/_posts/widgets.yml

linklist:    
  title: 导航
  layout: linklist
  columns: 1 
  items:
    - icon: default:leftbar  # icons.yml中设置的 icon 名称或者直接使用 svg 标签'<svg...></svg>'
      title: 关于
      url: /about/

columns 设置为几则表示每行放几个，设置为1和2时icon 和 title 会同时显示，大于2则只显示 icon

markdown文本

这是一个自由度很高的标签，可以显示 markdown 文本内容：

blog/source/_posts/widgets.yml

welcome:
  layout: markdown
  title: 欢迎 #可以为空
  linklist: # 与 linklist 组件写法相同,如果需要linklist组件，下列参数不可为空
    columns: 1 
    items:
      - icon:
        title: 
        url:
  content: |
    欢迎使用 [Stellar](https://github.com/xaoxuu/hexo-theme-stellar/) 主题，下面是您的入门指南，祝您使用愉快！
  src: # 可以设置外部 md 文件链接