主页侧边栏导航

根据需要配置侧边栏导航，注释掉icon项可直接显示标题

xxx/_config.stellar.yml
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: 4 # 一行多少个
  items: # 可按照自己需求增加，符合以下格式即可
    # id: 页面中高亮的 menu_id 
    # theme: 高亮时的颜色，仅 svg 中 fill="currentColor" 时有效
    # icon: 支持 svg/img 标签，可以定义在 icons.yml 文件中，也支持外部图片的 URL
    # title: 标题
    # url: 点击跳转到哪，支持相对路径和绝对路径
    - 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: /explore/
    - id: social
      theme: '#F44336'
      icon: solar:chat-square-like-bold-duotone
      title: 社交
      url: /friends/

主页顶部导航

根据需要配置顶部导航nav_tabs

xxx/_config.stellar.yml
1
2
3
4
5
6
7
8
9
# 博客列表页配置
  index_blog:
    base_dir: blog # 只影响自动生成的页面路径
    menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id
    leftbar: welcome, recent # for categories/tags/archives
    rightbar: 
    nav_tabs:  # 近期发布 分类 标签 专栏 归档 and ...
      '分类': /categories/
      '专栏': /topic/ # 像您示例中的“专栏”就是指向 /topic/ 页面
  • 默认导航有近期发布和归档两个选项，其他标签按要求添加即可。

专栏/专题列表

在 blog/source/_data 文件夹中创建一个 topic文件夹，在其中放入各个专栏的描述文件，文件名就是项目的 id

blog/source/_data
1
2
3
4
name: Stellar # 在面包屑导航上会显示较短的名字
title: Stellar - 每个人的独立博客 # 在列表页会显示完整的专栏标题
description: 关于搭建独立博客相关的知识和经验分享，以及 Stellar 的高级用法、版本更新相关的注意事项。
order_by: -date # 默认是按发布日期倒序排序

使用专栏

在发布文章时制定专栏id

source\_posts\一篇文章.md
1
2
3
4
5
---
title: 这是文章标题
topic: id # 这是专栏id，对应 blog/source/_data/topic/id.yml
---
文章正文

分类和标签

在文章的front-matter中添加categories和tags字段，只要文章有分类和标签就会自动在主页出现「分类」、「标签」选项卡实现分类浏览，不需要手动添加页面。例如：

source\_posts\一篇文章.md
1
2
3
4
5
---
categories: [Hexo折腾记, Stellar主题]
tags: [Stellar]
---
文章正文
分享文章

快来参与讨论吧~