HEXO系列教程 | 配置云游君Yun主题PART2 | 侧边栏配置

2024-08-20 19:15:29 浏览数 (1)

本文发布于149天前，最后更新于139天前，其中的信息可能有所发展或是发生改变

1. 前言

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

真的超级漂亮！！！经过PART1的美化，夜梦HEXO的效果如下图：

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

2. 侧边栏配置

2.1 背景与标签

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

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

你可以像夜梦这样添加配置内容（夜梦这里就不配置背景图片了，感觉默认的挺好看的）：

代码语言：javascript复制
sidebar:
  bg_image: ### 
  bg_position: bottom 3rem center
  tagcloud:
    enable: false
    amount: 20

2.2 页面链接

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

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

代码语言：javascript复制
pages:
  - name: 我的小伙伴们
    url: /links/
    icon: ri:genderless-line
    color: dodgerblue

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

2.3 社交图标

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

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

夜梦设置的内容如下（你需要把下面的链接修改成你自己的）：

代码语言：javascript复制
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: 默认为对应类型的数量，你也可以使用自定义文本覆盖（如注释部分）

夜梦设置的导航项目如下（其实就是默认的）：

代码语言：javascript复制
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 主题 PART1 | 优雅美观

发布文章：

  • HEXO 系列教程 | 发布文章 | 解决静态图片路径错误问题 | 小白向教程
教程 配置 hexo icon 部署

0 人点赞