写在前面

在使用主题后,顶部导航多出了标签页、分类页、归档页和关于页等界面,点击之后出现了“Cannot GET /XXX/”问题,这是因为我们没有添加对应的页面,本文章主要描述了怎么添加这些界面,直到后面怎么添加一个导航选项。文章可能还有很多不足,请大家谅解,欢迎大佬提意见。

本文使用的东西

  1. win10电脑
  2. hexo 3.1.0

文章目录

  • 写在前面
  • 本文使用的东西
  • 1.查看主题
    • 1.1导航选项的属性值是什么?
    • 1.2能不能引用文章?
  • 2.添加导航选项页(重点)
  • 3.总结

1.查看主题

要添加导航中的页面,首先我们得知道主题需要什么界面。

1.打开我们博客所在的目录,进入我们使用的主题的目录“themes/主题名”。


2.打开我们主题目录中的“_config.yml”文件,找到“menu”属性,里面的子属性就是代表顶部导航的导航选项,子属性的值就是需要的界面名称。通过字面意思我们就可以推断各个选项对应的界面名称。

1.1导航选项的属性值是什么?

这里我们以导航中的分类选项为例,我点击之后跳转到了“http://localhost:4000/categories/”界面,由此我们可以推断,子属性的值就是扣去域名之后的界面名称,即我这里链接中的“/categories”。

1.2能不能引用文章?

可能大家就会有疑问,既然我们已经知道了顶部导航属性的值的含义,那么大家就会有疑问了,那我们可不可以将属性值设置为我们的文章,这里告诉大家,这是可以的。
这里我有一个文章链接为“http://localhost:4000/2019/11/28/hello-world/”,我们将“Categories”属性的值修改为“/2019/11/28/hello-world”,这时候我们点击“分类”标签,发现跳转到了我们的文章界面。

2.添加导航选项页(重点)

打开Node Command prompt,使用cd定位到博客的路径,添加标签页的命令为:

hexo new page 导航选项界面名

这里我们还是以“分类”导航选项为例,输入命令为。

hexo new page categories


在“source”目录中会多出一个“categories”目录,打开该目录其中会有一个“index.md”文件,这就是我们的界面文件。

这时候运行hexo,点击“分类”,我们可以看到有一个空白界面。这时候我们可以在里面加入文章内容。

但是你会发现该方法新建的界面和文章没什么两样,这是因为我们没有设置文章“type”,所以还还是按普通文章方式加载。
设置文章类型

type: 文章类型

示例:

效果如下,每一个主题都会给他的导航选项页设置对应样式,内容也都是设置好的,所以设置页面类型之后我们自己就不需要写文章内容了,写了也不会显示出来。

但是有的导航选项页例外,例如我这个主题的“关于界面”,虽然设置了界面类型,但是还是按文章方式加载,需要自己添加内容,所以具体还要看情况而定。

3.总结

关于如何添加导航选项界面就描述到这里,有不清楚的地方欢迎评论留言,看到的我都会回复的。本文到此结束,有什么不足的地方请大家不吝指正。

hexo博客添加标签、分类、归档、关于等页面相关推荐

  1. Hexo 博客添加看板娘

    Hexo 博客添加看板娘 相信看到这里的小伙伴都有属于自己的hexo博客了吧,废话不多说,我们直接进入主题 我的博客:传送门 1.安装模块 在hexo根目录下用Git执行命令 npm install ...

  2. 为 hexo 博客添加本地搜索功能

    点击上方 好好学java ,选择 星标 公众号 重磅资讯.干货,第一时间送达 今日推荐:我的大学到研究生自学 Java 之路,过程艰辛,不放弃,保持热情,最终发现我是这样拿到大厂 offer 的!个人 ...

  3. hexo博客添加暗色模式_我如何向网站添加暗模式

    hexo博客添加暗色模式 同一个网站,两种不同的配色方案 (Same website, two different color schemes) Last year I made it a point ...

  4. hexo博客添加暗色模式_我如何将暗模式添加到我的网站

    hexo博客添加暗色模式 I recently redesigned my website. Here are 2 pictures of how it looked, for reference: ...

  5. Hexo博客添加评论功能

    Hexo博客添加评论功能 实现了Hexo的评论功能 先附上官网链接valine官网 我使用的是Material-X主题,大多主题都支持,基本在官方主题文档都可以找到使用方法 1.进入官网,注册账号 需 ...

  6. 利用Cloudflare为基于GitHub Pages的Hexo博客添加HTTPS支持

    文章目录 ● 前言 ● 注册 Cloudflare ● 添加站点 ● 修改DNS ● 开启 HTTPS ● 重定向强制 HTTPS HTTP(超文本传输协议),是一个基于请求与响应,无状态的,应用层的 ...

  7. 向Hexo博客添加微博秀(pug模板)

    目的 本文是一个详细的教程,告诉大家如何在Hexo博客中嵌入微博秀或者微博直播组件. 为什么要向博客中添加微博秀/微博直播组件? 微博秀是什么 新浪微博秀,可以放置在你的博客.网站,或是其它支持htm ...

  8. hexo博客添加本地搜索功能

    写在前面 本文主要描述了怎么添加hexo博客搜索插件,然后启动搜索功能,对两个本地搜索插件的使用进行了描述,文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文用的东西 hexo 3.1.0 wi ...

  9. Hexo博客添加搜索功能

    当文件慢慢变多的时候,分类和标签已经不能快速找到所需要的文章,我们需要添加本站的搜索功能. 安装插件 在博客根目录执行命令 npm install hexo-generator-searchdb -- ...

最新文章

  1. 深度学习model.fit计算流图
  2. java 指令级别理解i++和++i
  3. DFS(入门题,走迷宫)
  4. ubuntu下安装mongodb
  5. js移除字符串的中文/空格
  6. 趁着对象泡脚的功夫,我把vueX吃透了
  7. HTTP协议状态码详解
  8. 用反卷积(Deconvnet)可视化理解卷积神经网络还有使用tensorboard
  9. python hashlib安装_Hashlib加密,内置函数,安装操作数据库
  10. vs2013 mfc连接MySQL数据库
  11. nutch2.3 mysql教程_Nutch2.2.1+MySQL+Solr4.10.3安装部署
  12. 2012-11-25 3 00 发喜讯,终于把S5pv210 VGA 分辨率提升到1440 x 900/1920 x 1
  13. 有没有无痛无害的人体成像方法?OCT(光学相干断层扫描)了解一下
  14. linux离线日志分析工具,loganalyzer——日志分析工具
  15. 部分手机打开USB调试,安装失败解决办法
  16. ubuntu18截图快捷键和其他快捷键设置
  17. MySQL优化/面试,看这一篇就够了
  18. Ardunio开发实例-被动红外(PIR)运动传感器使用
  19. 示波器探头校准-补偿电容
  20. 求生之路寻找延迟服务器,求生之路2服务器tickrate的作用与网络参数的优化_3DM单机...

热门文章

  1. 【优选源码】每天免费领取名片赞至少1000!引流必备!
  2. 通过支付宝服务中断事件看系统可靠性和YunOS的可靠性
  3. 安卓APP源码和设计报告——快递查询录入系统
  4. Pyinstaller 打包 Pytest项目及资源文件
  5. 全日制本科生入户东莞指南
  6. python量化实战_Python量化交易实战
  7. Linux离线安装NTP服务,内网环境下配置本地时间同步
  8. ESP8266 NodeMCU引脚说明
  9. 关于C中编译后RO,RW,ZI的含义
  10. php把接收到的16进制转成字符串,php将16进制转为字符串的方法