Hexo-Next主题配置

记录本博客Next主题的修改配置。大部分内容仅适用于Next主题。

一、为添加侧边栏分类

在博客根目录输入

1	hexo new page categories

编辑/source/categories/index.md

---
title: categories
date: 2020-03-02 12:33:16
type: "categories"
---

编辑/themes/next/_config.yml

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

完成。

二、编辑页脚信息

去除页脚的Hexo驱动信息与Next主题信息
编辑/themes/next/_config.yml

powered:
  # 删除hexo驱动信息
  enable: false
  # 删除Hexo版本信息
  version: false

theme:
  # 删除主题信息
  enable: false
  # 删除主题版本信息
  version: false

完成。

三、添加侧栏社交

编辑/themes/next/_Config.yml

social:
  GitHub: https://github.com/yourname || github
  E-Mail: mailto:your@gmail.com || envelope
  Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
  steam: 个人资料链接 || steam

去除需要添加的社交平台的#，然后编辑链接
完成。

四、添加头像

编辑/themes/next/_config.yml

avatar:
  #设置url连接
  url: 
  #头像转动
  rounded: false
  #光标移动到头像后转动
  rotated: false

完成

五、添加favicon

编辑/themes/next/_config.yml

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

修改相关url
完成

六、修改高亮样式

编辑/themes/next/_config.yml
next提供了八种样式

normal
night
night blue
night bright
night eighties
solarized
solarized dark
galactic

我选择使用night

1	highlight_theme: night

完成

七、主题中添加百度推送

编辑/themes/next/_config.yml

1
2
3

baidu_push: true
...
seo: true

完成

八、添加Pjax

出现Bug暂时停用
来到/themes/next

1	git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

编辑/themes/next/_config.yml

1	pjax: true

完成。

九、添加全局aplayer播放器

本改动建立在 八、添加Pjax 的基础上，如果你使用了Pjax，就可实现不间断播放。并参考了Macyrate的相关文章。
复制以下代码到\theme\next\layout_layout.swig

<!-- 引用依赖 -->
<link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>

<!-- APlayer本体 -->
<div class="aplayer" 
  data-id="2465890057" #你的网易云歌单ID
  data-server="netease" #设置网易云
  data-type="playlist" #设置歌单
  data-fixed="true" #吸底模式
  data-autoplay="true" #设置自动播放
  data-order="random" #设置播放顺序
  data-volume="0.55" 
  data-theme="#cc543a" 
  date-preload="auto" >
  </div>
<!--如果将本体放在body里面导致页面加载出现问题，请尝试放到body体后面-->

aplayer的属性具体设置参考请aplayer中文文档

使用时请在前面加上data-

感谢Macyrate
完成。

十、修改主题配色

参考文章
感谢周阳光
编辑/themes/next/source/css/_variables/base.styl

$whitesmoke   = #f5f5f5
$gainsboro    = #eee  //这个是边栏头像外框的颜色，
$gray-lighter = #ddd  //文章中插入图片边框颜色
$grey-light   = #ccc  //文章之间分割线、下划线颜色
$grey         = #bbb  //页面选中圆点颜色
$grey-dark    = #999
$grey-dim     = #666 //侧边栏目录字体颜色
$black-light  = #555 //修改文章字体颜色
$black-dim    = #333
$black-deep   = #495a80  //修改主题的颜色，这里我已经改成老蓝色了。
$red          = #ff2a2a
$blue-bright  = #87daff
$blue         = #0684bd
$blue-deep    = #262a30
$orange       = #F39D01 //浏览文章时，目录选中的颜色

Mouuy's blog