使用Hexo的NexT主题

使用Hexo的NexT主题

介绍


这里只记录了我用到的很少一部分功能,详细配置可以参考官方文档

安装

Clone NextT 到 themes文件夹下 

$ cd blog
$ git clone https://github.com/next-theme/hexo-theme-next themes/next

在hexo配置文件中修改themes为next

theme: next

配置

代码高亮

从v7..7.2开始NexT原生支持暗黑模式,代码高亮也可以针对light和dark模式分别设置。现在两个模式设置相同的高亮theme会报错,可能是个bug。

codeblock:
  # Code Highlight theme
  # See: https://github.com/highlightjs/highlight.js/tree/master/src/styles
  theme:
    light: tomorrow
    dark: tomorrow-night

百度统计

Next主题已经默认支持百度统计,直接在themes/next/_config.yml 中找到 baidu_analytics 填上app_id就可以了。

# Baidu Analytics
baidu_analytics: # 

这个app_id可以从百度统计给的安装代码中获取:注册登录https://tongji.baidu.com/,找到网站统计 -> 账户管理 -> 代码获取,在

评论系统

NexT现在支持六种评论系统 changyandisqusdisqusjsgitalkliverevaline。在当年多说关闭之后,其他国产的评论系统要么风雨飘摇,要么风评不加,这里还是坚持使用Disqus吧。在themes/next/_config.yml 中设置disqus enable。

# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: changyan | disqus | disqusjs | gitalk | livere | valine
  active: disqus
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: false
  # Modify texts or order for any navs, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2
    
# Disqus
disqus:
  enable: true
  shortname: 
  count: false
  #post_meta_order: 0

侧边栏

自定义目录

在themes/next/_config.yml中打开categories,tags和archives目录

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

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

NexT主题只会自动生成home和archives目录,需要categories和tags目录的话需要手动添加:

  1. 使用hexo新建page
$ hexo new page tags
  1. 修改source/tags/index.md文件,添加一行 type: tags
title: Tags
date: 2014-12-22 12:39:04
type: tags
---

修改TOC配置

TOC 可以在点开文章后在侧边栏显示大纲,这里根据个人喜好,修改两项:

  • 展开所有子目录
  • Wrap 长标题到下一行
# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: true
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
  # Maximum heading depth of generated toc.
  max_depth: 6

打开back2top

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

会在侧边栏显示可以返回顶部的箭头和当前滚动的百分比。

你可能感兴趣的:(hexo,博客搭建)