【Hexo + Next】侧边栏添加自定义文件夹(如友链)

前言

  如果你刚刚完成博客的搭建,会发现Next主题的侧边栏默认文件夹很少,不过你可以通过配置主题配置文件_config.yml,增加标签分类关于等等文件夹,具体教程可参考官方帮助文档,网上亦有大量教程,这里就不赘述了。

  当你在浏览一些完成度较高的博客时,会发现有的博客的侧边栏会有一些自定义的文件夹,如图1所示,红框中的是Next主题自带的文件夹,蓝框中的是自定义的。
图1 自定义文件夹示意图

不过,无论是官方帮助文档,亦或是网上的教程,鲜有提及如何创建自定义文件夹。

  通过不断的尝试,笔者终于成功总结出一种解决方法。下面给出在侧边栏新建一个友链文件夹的相关教程。

教程步骤

  以MacOS为例,打开终端,开启管理员模式,定位到博客文件夹,执行命令

hexo new page friendlink

路径Users/用户名/博客文件夹/source文件夹里就会出现刚刚新建的文件夹friendlink,打开文件friendlink,会发现里面有一个index.md文件,待会再来修改它。

  打开主题配置文件,找到Menu Settings,加入一行代码:friendlink: /friendlink/ || link,如下所示:

menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th
  #search: /search/ || search
  archives: /archives/ || archive
  about: /about/ || user
  friendlink: /friendlink/ || link

  打开Users/用户名/博客文件夹/themes/next/languages文件夹里的zh-CN.yml文件,在其中增加一行代码:friendlink: 友链,如下所示:

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益 404
  friendlink: 友链

  保存文件后执行

hexo cl && hexo g && hexo s

本地打开博客网站,就能看到侧边栏多了一个友链文件夹,不过这时候点击友链文件夹,里面是一片空白,这时就到了最后一步,修改教程开头提到的index.md文件。

  修改index.mdtitletitle将显示为网页的标题,然后在文件中写下你想写的内容,格式遵循Markdown,内容将显示在网页当中,我的index.md内容为:

---
title: 互换友链
date: 2019-07-28 20:23:11
---
#### 前言
  如果您也有自己的个人博客,并且想要互换友链,**可以先在贵站添加我的站点**[https://www.imcyc.cn](https://www.imcyc.cn),站名:Morty。**然后再在下方留言,并注明贵站的类型**,审核之后贵站的信息就会被添加到下方列表中~

#### 友链列表
  以下排名不分先后,欢迎访问(~ ̄▽ ̄)| 站名     | 链接                        | 类型       |
|:--------------:|:---------------:|:--------------:|
| leek    | https://bigleek.ml          | Java后端   |
| 菜菜     | https://www.caiyifan.cn     | 技术       |
| Water   | https://water1127.github.io | 不详       |
| Don Lex | https://donlex.cn           | 不详       |
| 赵俊     | http://www.zhaojun.im       | Java      |
| 千千     | https://www.dreamwings.cn   | 不详       |

保存后执行命令

hexo cl && hexo g && hexo d

友链页显示效果如图2所示:
图2 友链网页示意图

PS

  无论是主题自带的文件夹还是自定义的文件夹,默认都是开启留言功能的(前提是你配置了留言功能),如要关闭留言,加入comments: false即可,如下:

---
title: 标签
date: 2019-07-15 20:55:57
type: tags
comments: false
---

参考文献

[1] https://www.cnblogs.com/codebook/p/10312965.html
[2] https://theme-next.org/docs/theme-settings/

推荐阅读

【Next 7.2.0版权声明大改动】仅需一步!开启内置版权声明(跟繁琐的自定义版权声明说拜拜~)

【Hexo + Next】左侧栏友链一行多个显示

【Hexo + Next 优化之坑】百度、谷歌收录sitemap站点地图

  • 3
    点赞
  • 8
    收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

cczu_chan

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值