Add menubar and search function to hexo blog

Add Menubar

In the theme folder, we can find the following scripts in the _config.yml file.

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# Enable/Disable menu icons.
menu_icons:
  enable: true

The default menubars are home and archives. I want to add tags, categories and about to menubar. The problems appear when I only note off the options in the above scripts.

After investigation about this problem, I find the ansower in this site http://www.360doc.com/content/18/0521/13/14715637_755685918.shtml method one to cite website

this site method two to cite website

Actually, we should add folder with commond hexo new page menubar_name, then corresponding folders will appear in the source folder which is the site configure source folder. Then add configure information in the correspongding index.md.
Take tags for example.

$ hexo new page tags

We will see follow information in index.md.

---
title: tags
date: 2018-09-09 13:34:49
---

Then we add type: "tags" to the index.md

---
title: tags
date: 2018-09-09 13:34:49
type: "tags"
---

Similar methods are used to add categories and about to menubar.

Add local search function to menubar

  1. install hexo-generator-search, hexo-theme-next search function depend on this package.
$ npm install hexo-generator-search --save
  1. active the local search configure in theme configure file _config.yml.
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true #false modified by hubery lee @2018/9/9
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值