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

写在前面

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

本文使用的东西

  1. win10电脑
  2. hexo 3.1.0

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.总结

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

  • 9
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
要为 Hexo 博客添加搜索功能,你可以使用第三方搜索引擎,如 Algolia 或 Google Custom Search。这里我们介绍如何使用 Algolia。 Algolia 是一个强大的搜索引擎,提供了易于使用的 API,可以轻松地将搜索功能添加到你的 Hexo 博客中。以下是如何为 Hexo 博客添加 Algolia 搜索的步骤: 1. 注册 Algolia 账户并创建一个应用程序。 2. 安装 Hexo Algolia 插件。 ``` npm install hexo-algolia --save ``` 3. 在博客根目录下创建一个名为 `algolia.json` 的配置文件,并填写以下内容: ``` { "applicationID": "YOUR_APP_ID", "apiKey": "YOUR_API_KEY", "indexName": "YOUR_INDEX_NAME" } ``` 将 `YOUR_APP_ID`、`YOUR_API_KEY` 和 `YOUR_INDEX_NAME` 替换为你在 Algolia 上创建的应用程序的信息。 4. 在你的 Hexo 主题中添加搜索框和搜索结果页面。 在主题的相应文件中添加以下代码: 搜索框: ```html <form class="search-form" method="get" action="/search/"> <input class="search-input" type="text" placeholder="Search" name="query"> <button class="search-submit" type="submit">Search</button> </form> ``` 搜索结果页面: ```html --- title: "Search Results" layout: "search" --- <section class="search-results"> {% for page in page.posts %} <article class="search-result"> <h2 class="search-result-title"><a href="{{ page.url }}">{{ page.title }}</a></h2> <p class="search-result-excerpt">{{ page.excerpt }}</p> </article> {% endfor %} </section> ``` 5. 重新生成站点并上传到你的服务器。 ``` hexo generate ``` 6. 同步你的博客数据到 Algolia 上。 ``` hexo algolia ``` 完成以上步骤后,你的 Hexo 博客就可以使用 Algolia 进行搜索了。当用户在搜索框中输入关键字并提交时,将会跳转到搜索结果页面,显示与关键字匹配的文章列表。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玖涯菜菜子

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值