Next主题配置

前言：本人博客Next主题配置

安装 NexT

官方文档

http://theme-next.iissnan.com/

github

https://github.com/theme-next/hexo-theme-next

安装

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

启用主题，站点配置文件中设置

theme: next

PS：站点配置文件指hexo文件夹下的_config.yml，主题配置文件指next文件下的_config.yml

主题设定

Next提供了四种主题风格scheme

• Muse
• Mist
• Pisces
• Gemini

在主题配置文件_config.yml中设置

scheme: Gemini

代码高亮

highlight_theme: night

站点配置文件：

# Site
title: Husky
subtitle: 我来到,我看见,我记录我
description: 书山有路勤为径 学海无涯苦作舟
keywords:
author: Husky
language: zh-CN
timezone: Asia/Shanghai

博客自定义图标

在easyicon等网站中选择自己的图标，然后将图标文件放到hexo/themes/next/sources/images目录下

主题配置文件：

favicon:
  small: /images/16x16.png
  medium: /images/32x32.png
  apple_touch_icon: /images/128x128.png
  safari_pinned_tab: /images/logo2.svg

添加动态背景

主题配置文件

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
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

安装canvas_nest插件

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

头像

主题配置文件

avatar:
  # Replace the default image and set the url here.
  url: /images/author.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

添加页面宠物

github参考文档

https://github.com/xiazeyu/live2d-widget-models
https://github.com/EYHN/hexo-helper-live2d

安装hexo-helper-live2d

npm install --save hexo-helper-live2d

安装自己喜欢的模型，

npm install live2d-widget-model-koharu

站点配置文件：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  model:
    use: live2d-widget-model-koharu
  display: #放置位置和大小
    position: right
    width: 150
    height: 300
  mobile:
    show: false

开启版权

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language:

字数统计

hexo-symbols-count-time

安装hexo-symbols-count-time插件

npm install hexo-symbols-count-time

主题配置文件

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 2
  wpm: 300
 
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

站点配置文件

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

footer文件

hexo\themes\next\layout_partials\footer.swig

busuanzi文件

hexo\themes\next\layout_third-party\statistics\busuanzi-counter.swig

我发现busuanzi有时候会不显示统计，经过查看官方文档发现，id=busuanzi_container_site_pv的作用是为防止计数服务访问出错或超时（3秒）的情况下，使整个标签自动隐藏显示，带来更好的体验。这个id可以省略。去除这个和style=”display: none;”就能显示了