hexo-next主题优化

设置主题样式

1. 修改 themes\next\_config.yml

# Schemes
#scheme: Muse
# scheme: Mist
scheme: Pisces
#scheme: Gemini

添加标签（tags）和分类页面（categories）

1. 开启 tags 和 categories
   修改 themes\next\_config.yml ，将 tags 和 categories 前的 “#” 删掉

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

2. 生成页面

$ hexo new page tags
INFO  Created: E:\My_Blog\source\tags\index.md

$ hexo new page categories
INFO  Created: E:\My_Blog\source\categories\index.md

3. 分别修改 index.md

---
title: tags
date: 2019-08-09 10:41:40
type: "tags"
---

---
title: categories
date: 2019-08-09 10:43:31
type: "categories"
---

3. 检查页面配置
   开启本地的 hexo 服务，并查看页面配置

$ hexo s

注：hexo 默认配置了首页（home）和归档（archives）页面，其他新开的页面需要自己手动生成。

添加本地搜索

1. 安装 hexo-generator-search

$  npm install hexo-generator-search --save

2. 开启本地搜索，将 “enable: “ 的值改为 “true”

# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # 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
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

添加背景特效

1. 安装 theme-next-canvas-nest

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

2. 开启 canvas_nest 背景特效，将 “enable: “ 的值改为 “true”

canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,255' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # the number of lines

设置加载进度样式

1. 安装 heme-next-pace

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace

2. 开启 pace ，”theme:” 设置进度条样式

# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
# For more information: https://github.com/HubSpot/pace
pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: corner-indicator

设置侧边栏

1. 修改 themes\next\_config.yml

sidebar:
  # 侧边栏位置
  # Sidebar Position.
  position: left
  #position: right

  # 侧边栏大小
  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  Pisces | Gemini: 400
  width: 300

添加头像

1. 修改 themes\next\_config.yml

# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  # 头像最好本地存放，存储位置在 themes\next\source\images
  url: /images/tx1.jpg
  # If true, the avatar would be dispalyed in circle.
  rounded: false
  # If true, the avatar would be rotated with the cursor.
  rotated: false

2. 设置头像旋转效果

将文件 themes\next\source\css_common\components\sidebar 的内容替换

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  border-radius: 60%;
  transition: 2.5s all;  
}

.site-author-image:hover {
    transform: rotate(360deg);
}


.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

博客总访问量

1. 修改 themes\next\_config.yml

   # Show Views / Visitors of the website / page with busuanzi.
   # Get more information on http://ibruce.info/2015/04/04/busuanzi
   busuanzi_count:
     enable: true
     total_visitors: true
     total_visitors_icon: user
     total_views: true
     total_views_icon: eye
     post_views: true
     post_views_icon: eye

2. 在 themes\next\layout\_partials\footer.swig 中添加如下内容

<div>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv" style='display:none'>
    本站总访问量 <span id="busuanzi_value_site_pv"></span> 次
    <span class="post-meta-divider">|</span>
</span>
<span id="busuanzi_container_site_uv" style='display:none'>
    有<span id="busuanzi_value_site_uv"></span>人看过我的博客啦
</span>
</div>

设置代码样式

1. 修改 themes\next\_config.yml

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: flat

hexo next 主题将首页文章设为预览

编辑 themes/next 目录下的 _config.yml 文件,搜索 “auto_excerpt” 关键字，并修改位如下内容：

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150   # 文章预览的文本长度

reference

Hexo博客NexT主题美化之顶部加载进度条

theme-next-pace

sidebar

Hexo框架下用NexT(v7.0+)主题美化博客

Hexo的Next主题详细配置

主题配置

hexo plugins

Hexo之next主题设置首页不显示全文(只显示预览)