HEXO系列教程 | 配置云游君Yun主题PART2 | 侧边栏配置
本文发布于219天前,最后更新于34天前,其中的信息可能有所发展或是发生改变。如有疑问请联系邮箱:admin@yemengstar.com。

1. 前言

夜梦在之前的一篇文章【HEXO 系列教程 | 使用 GitHub 部署静态博客 HEXO | 小白向教程】中介绍了如何利用 GitHub Pages 部署属于自己的静态博客 HEXO。HEXO 自带的主题是 landscape,十分简洁。考虑到美观,夜梦这篇文章将介绍如何在 HEXO 上使用云游君开发的 Yun 主题。

真的超级漂亮!!!经过PART1的美化,夜梦HEXO的效果如下图:

这篇文章夜梦将介绍YUN主题其他内容的配置。

2. 侧边栏配置

2.1 背景与标签

你可以按照下面的配置设置背景和标签。 此部分配置需要在_config.yun.yml中进行修改。详细的配置项有:

  • tagcloud: 在侧边栏显示 Hexo 原生标签页
    • amount: 显示的标签数量

你可以像夜梦这样添加配置内容(夜梦这里就不配置背景图片了,感觉默认的挺好看的):

sidebar:
  bg_image: ### 
  bg_position: bottom 3rem center
  tagcloud:
    enable: false
    amount: 20

2.2 页面链接

在sidebar的最下方,添加醒目的图标链接。相比社交链接,页面链接的图标更大。你可以放置你的页面导航,友情链接等。具体的位置可以参考下图:

你可以按照下面的配置设置侧边栏的页面链接。 此部分配置需要在_config.yun.yml中进行修改。详细的配置项有:

pages:
  - name: 我的小伙伴们
    url: /links/
    icon: ri:genderless-line
    color: dodgerblue

社交图标可以参考2.3社交图标进行设置。

2.3 社交图标

默认提供以下几种社交图标,你可以通过在头部引入自定义图标资源来获取更多图标。此部分配置需要在_config.yun.yml中进行修改。详细的配置项有:

  • name: 链接名称
  • link: 链接
  • icon: 图标 Class
  • color: 图标颜色(前提是您引入的图标支持 SVG 自定义颜色)当前默认色彩采用官方图标的品牌主色。

夜梦设置的内容如下(你需要把下面的链接修改成你自己的):

social:
  - name: RSS
    # set rss in your root config
    # https://github.com/hexojs/hexo-generator-feed
    link: /atom.xml # config.feed.path
    icon: ri:rss-line
    color: orange
  - name: GitHub
    link: https://github.com/yemenghexo
    icon: ri:github-line
    color: '#181717'
  - name: E-Mail
    link: mailto:admin@yemengstar.com
    icon: ri:mail-line
    color: '#8E71C1'
  # - name: 微博
  #   link: #
  #   icon: ri:weibo-line
  #   color: '#E6162D'
  # - name: 豆瓣
  #   link: #
  #   icon: ri:douban-line
  #   color: '#007722'
  - name: 网易云音乐
    link: https://music.163.com/#/user/home?id=1485292158
    icon: ri:netease-cloud-music-line
    color: '#C10D0C'
  - name: 知乎
    link: https://www.zhihu.com/people/yemengstar
    icon: ri:zhihu-line
    color: '#0084FF'
  - name: 哔哩哔哩
    link: https://space.bilibili.com/1951763981
    icon: ri:bilibili-line
    color: '#FF8EB3'
  # - name: 微信公众号
  #   link: #
  #   icon: ri:wechat-2-line
  #   color: '#1AAD19'

到这里,夜梦HEXO的侧边栏的效果如下:

2.4 导航

默认提供以下几种导航。此部分配置需要在_config.yun.yml中进行修改。常用的导航项目有:

  • 主页
  • 列表
    • 归档
    • 标签
    • 分类
  • 自定义(你可以设置为任意图标及链接,当你未设置自定义图标链接时,它将自动变为文档导航按钮以保持整体的对称)

可配置项:

  • type: 是否为 archives/categories/tags 等类型,会自动匹配此类型标题及显示对应数量。留空则为其他普通链接。
  • title: 可以覆盖默认标题
  • icon: 自定义你的图标
  • path: 自定义路径
  • count: 默认为对应类型的数量,你也可以使用自定义文本覆盖(如注释部分)

夜梦设置的导航项目如下(其实就是默认的):

menu:
  home:
    path: /
    icon: ri:home-4-line
  list:
    - type: archives
      path: /archives/
      icon: ri:archive-line
    - type: categories
      path: /categories/
      icon: ri:folder-2-line
    - type: tags
      path: /tags/
      icon: ri:price-tag-3-line
  # 自定义内容你可以看云游君提供的文档
  # custom:
  #   title: 文档
  #   path: https://yun.yunyoujun.cn
  #   icon: ri:settings-line

因为现在还没有配置页面,所以你点击分类和标签的时候会Cannot GET

3. 其他HEXO教程推荐

配置 YUN 主题:

发布文章:

本文为夜梦星尘原创文章。
文章作者:夜梦星尘
文章链接:HEXO系列教程 | 配置云游君Yun主题PART2 | 侧边栏配置
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自夜梦星尘
支持作者:夜梦星尘的爱发电
上一篇
下一篇