Hexo next v7主题配置美化

在博客根目录下操作

下载使用next主题

1 2	git clone https://github.com/theme-next/hexo-theme-next themes/next vim _config.yml #修改配置使用主题

1	theme:next

博客配置文件基础配置

1	vim _config

# Site
title: 木He寸&eonun's Blog			#标题
subtitle: 记录积累方有成长		#副标题
description: 你只需努力，其他任由天意！	#描述
keywords:
author: 木He寸&eonun		#作者
language: zh-CN		 #语言
timezone: Asia/Shanghai		#时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://eonun.com		#域名
root: /  	#默认根路径，指向实际的source
permalink: :year/:month/:day/:title/	#永久链接
permalink_defaults:		#永久链接默认值

# Directory
source_dir: source	#来源目录
public_dir: public	#公开目录
tag_dir: tags	#标签目录
archive_dir: archives	#档案目录
category_dir: categories	#类别目录
code_dir: downloads/code	#代码目录
i18n_dir: :lang		#国际化目录
skip_render: README.md 	# 部署的时候不包含的文件

# Writing
new_post_name: :title.md 	#默认的新博文名称
default_layout: post 	#默认布局
titlecase: false #将标题转换为标题
external_link: true #在新标签中打开外部链接
filename_case: 0 #把博客名称改成小写/大写（1,2）
render_drafts: false #是否显示草稿
post_asset_folder: false #是否启用资源文件夹（用来存放相对路径图片或文件）
relative_link: false 	#把链接改为与根目录的相对位址
future: true
highlight:	#高亮
  enable: true 	#是否开启代码高亮
  line_number: true		#是否增加代码行号
  auto_detect: true 	#自动判断代码语言
  tab_replace:	#标签替换

next主题主配置文件基础配置

1	vim themes/next/_config.yml

主题样式配置

# Schemes	#选择一个主题样式，去掉前面的注释，将不用的主题样式注释掉
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini# Schemes	#选择一个主题样式，去掉前面的注释，将不用的主题样式注释掉#scheme: Muse#scheme: Mistscheme: Pisces#scheme: Gemini

菜单栏配置

menu:	#将需要的菜单取消注释即可，顺便换一下顺序
  home: / || home	#首页
  archives: /archives/ || archive	#归档
  categories: /categories/ || th	#分类
  tags: /tags/ || tags	#标签
  about: /about/ || user	#关于
  #schedule: /schedule/ || calendar	#日程表
  #sitemap: /sitemap.xml || sitemap	#网站地图
  #commonweal: /404/ || heartbeat	#公益404
  
  #关于格式
  #以 tags: /tags/ || tags 为例：
  #|| 之前的/tags/表示标题“标签”，关于标题的格式可以去themes/next/languages/zh-CN.yml中修改
  #||之后的archive表示图标，可到Font Awesome中查看修改，Next主题所有的图标都来自这里

Font Awesome

添加模块

分类模块

1 2	hexo n page categories vim source/categories/index.md #修改

---
title: 分类
date: 2019-07-19 13:04:16
type: categories
---

需要在把文章进行分类时只需在文章顶部标题下方添加categories字段，即可自动创建分类名并加入对应的分类中

栗子：

#单个分类
title: 这是文章标题
categories: 分类名


#有子分类
title: 这是文章标题
categories: [1级分类,2级分类,3级分类,...]

#或
title: 这是文章标题
categories: 
- 1级分类
- 2级分类
- 3级分类
...

标签模块

1 2	hexo n page tags vim source/tags/index.md #comments:false是关闭评论

---
title: 标签
date: 2019-07-19 13:04:24
type: tags
comments:false
---

需要在给文章添加时只需在文章顶部标题下方添加tags字段，即可自动创建标签名并归入对应的标签中

栗子：

title: 这是文章标题
tags: [标签1,标签2,...]

#或
title: 这是文章标题
tags: 
- 标签1
- 标签2
...

关于模块

1	hexo n page about

source文件夹下会生成about/index.md，打开index.md文件即可编辑个人相关信息

本地搜索模块

1 2	yarn add hexo-generator-searchdb #安装搜索插件 vim _config.yml #修改博客配置文件

# 在Extensions下添加搜索配置模块
search:
  path: search.xml
  field: post
  content: true
  format: html

1	vim themes/next/_config.yml #修改主题配置文件

# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true	#开启搜索模块
  
  trigger: auto	# auto 通过输入触发， manual 通过回车键触发
  
  top_n_per_article: 1	#设置显示每篇文章前n个结果， -1 为全部结果
  
  unescape: false	#Unescape html字符串到可读的字符串

全文阅读

博客主页会有多篇文章，如果想让你的文章只显示一部分，多余内容需要点击阅读全文来查看，那么就需要在的文章中添加：

1	<!--more-->

在它后面的内容会被隐藏，当点击阅读全文就能看到了

底部标签图标样式

1	vim themes/next/layout/_macro/post.swig

将rel="tag">{{ tag_indicate }}改为：rel="tag"><i class="fa fa-tag"></i>

头像配置

# Sidebar Avatar
avatar:
  
  url: /images/me.png	#头像路径，在主题目录下的source下
  # If true, the avatar would be dispalyed in circle.
  rounded: true	#头像是否为圆形显示
  # If true, the avatar would be rotated with the cursor.
  rotated: true	#鼠标到头像上是否旋转头像

侧栏配置

sidebar:
  # Sidebar Position, available values: left | right (only for Pisces | Gemini).
  #边栏位置（只作用于 Pisces 和 Gemini 样式）
  position: left	#左边
  #position: right	#右边

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300	#侧栏宽度，注释就用默认值

  # Sidebar Display, available values (only for Muse | Mist):
  #  - post    expand on posts automatically. Default.
  				#在文章页面（拥有目录列表）时显示
  #  - always  expand for all pages automatically.
  				#在所有页面中都显示
  #  - hide    expand only when click on the sidebar toggle icon.
  				#在所有页面中都隐藏（可以手动展开）
  #  - remove  totally remove sidebar including sidebar toggle.
  				#完全移除
  display: post	#侧栏显示时机（只作用于 Pisces 和 Gemini 样式）

  
  offset: 12	#文章间距（只作用于 Pisces 和 Gemini 样式）
  
  onmobile: false	#在窄视图上启用侧栏（只作用于 Muse 和 Mist 样式）
  
  dimmer: false		#单击任何页面的空白部分关闭栏（只作用于 Muse 和 Mist 样式）

back2top:	#返回顶部
  enable: true
  # Back to top in sidebar.
  sidebar: true	#将回到顶部按钮放到侧边栏
  # Scroll percent label in b2t button.
  scrollpercent: true	#在回到顶部按钮上显示百分百

博客网站图标

将png、jpg格式的图标放到themes/next/source/images下

favicon:
  small: /images/logo-16px.png
  medium: /images/logo-32px.png
  apple_touch_icon: /images/logo-32px.png
  safari_pinned_tab: /images/logo.png
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

访问计数

用的是不蒜子脚本来达到计数目的的

# 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

若显示出错可到不蒜子官网查询到最新脚本变化
在本地查看的变量是错误, hexo c ,hexo d之后打开网页,就能看到正确的访问人数

侧边栏目录

在写文章是通常会有给标题编号的情况，但主题默认也会给加上一个编号，这样就会有些多余，关闭自动编号只需在侧边栏目录配置关闭即可

# Table Of Contents in the Sidebar	#边栏中的目录
toc:
  enable: true
	
  number: true	#自动将列表编号添加到toc	修改为false就不会自动标号了

  wrap: false	#如果为true，如果标题宽度大于侧边栏宽度，则所有单词将放在下一行。

  expand_all: false	#如果为true，将显示帖子中的所有TOC级别，而不是其中的已激活部分

  max_depth: 6	#生成的toc的最大航向深度。可以通过Front-matter中的`toc_max_depth`在一个帖子中设置它

侧边栏社交链接

social:
  GitHub: https://github.com/eonun || github
  E-Mail: mailto:eonun@vip.qq.com || envelope
  Weibo: https://weibo.com/eonun || weibo
  #Google: https://plus.google.com/yourname || google
  Twitter: https://twitter.com/eonun || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #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

github角落及丝带

在GitHub Corners（角落）或GitHub Ribbons（丝带）选择一款你喜欢的挂饰，拷贝方框内的代码

1
2
3

vim themes/next/layout/_layout.swig		#将代码加入<div class="headband"></div>下方

#修改自己的github链接（https://github.com/eonun）

侧边栏友情链接

# Blog rolls
links_icon: link
links_title: 友链
links_layout: block
#links_layout: inline
links:
  Web前端导航: http://www.alloyteam.com/nav/
  创造狮导航: http://www.chuangzaoshi.com/code
  前端书籍资料: http://www.36zhen.com/t?id=3448

文章版权信息

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

动画

# Use velocity to animate everything.
motion:
  enable: true	#开启动画
  async: false

背景动画

根据自己需要开启即可

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
  enable: true
  onmobile: true # 在手机上显示或不显示
  color: "0,191,255" # RGB值，使用'，'分隔
  opacity: 0.8 # 线的不透明度：0~1
  zIndex: -1 # 背景的z-index属性
  count: 666 # 行数

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves	三波
three_waves: false
# canvas_lines	帆布线
canvas_lines: false
# canvas_sphere 帆布球体
canvas_sphere: false

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
canvas_ribbon:
  enable: false
  size: 300		#色带的宽度
  alpha: 0.6	#功能区的透明度
  zIndex: -1	#功能区的显示级别

#要使用的动画需下载相关插件才能使用，不用就无需下载了
git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

git clone https://github.com/theme-next/theme-next-three themes/next/source/lib/three

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

鼠标点击特效

1	vim themes/next/source/js/clicklove.js #新建文件，并添加代码

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

1	vim themes/next/laout/_layout.swig #添加

1	<!-- 页面点击小红心 --><script type="text/javascript" src="/js/clicklove.js"></script>

另一种特效

1	vim themes/next/source/js/fireworks.js #新建文件，并添加代码

"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};

1	vim themes/next/laout/_layout.swig #添加

{% if theme.fireworks %}   <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>    <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>    <script type="text/javascript" src="/js/fireworks.js"></script>{% endif %}

1	vim themes/next/_config.yml #在主题文件中加入

1	# Fireworksfireworks: true

添加打赏

# Reward (Donate)
reward_settings:
  # 如果为true，则默认情况下会在每篇文章中显示奖励
  # 可以通过" reward：true | false”在特定文章中显示或隐藏奖励
  enable: false
  animation: false
  #comment: Donate comment here		#在这里发表评论

reward:
  #wechatpay: /images/wechatpay.png		#微信收款码
  #alipay: /images/alipay.png			#支付宝收款码
  #bitcoin: /images/bitcoin.png			#比特币收款

底部博客平台信息

powered:
   # Hexo (由Hexo提供支持)
   enable: false
   # 版本信息
   version: true

theme:
   # Theme (主题 - NexT.scheme).
   enable: false
   # 版本信息
   version: true

其他配置文件配置

宠物

1
2
3

yarn add hexo-helper-live2d
yarn add live2d-widget-model-tororo		#安装一种宠物的模块
vim _config.yml	#博客的或主题的主配置文件都行,加入代码选择宠物类型

hexo-helper-live2d
live2d-widget-models

宠物样式表

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (live2d-widget-model-haru)
live2d-widget-model-haru/02 (live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo(白猫)
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

样式预览

需要先使用 yarn add 模型的包名 来安装

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/	# 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/	# 脚本文件相对与插件根目录路径
  pluginModelPath: assets/	# 模型文件相对与插件根目录路径
  tagMode: false	# 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false	# 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-tororo	# 模块名，博客根目录/node_models/ 下的目录名
  display:		#放置位置和大小
    position: right
    width: 300
    height: 600
  mobile:
    show: true		#是否在手机端显示

文章插入图片

1	vim _config.yml #修改博客配置文件，开启资源文件夹

1 2	post_asset_folder: true #开启后新建文章的时会同时创建一个同名文件夹用于存放文章资源（如:图片）

1 2	yarn add hexo-asset-image #安装插件 vim node_modules/hexo-asset-image/index.js #修改文件配置，修正一个错误

1
2
3

else {
    var endPos = link.length-1;	//将第24行修改为这样
}

将图片放到该文件夹下，在文章中添加图片

1	![image_name](name.jpg) #只需要添加文件名即可，无需加上目录

自定义样式（next v7）

1	vim themes/next/_config.yml

# 定义自定义文件路径
# 在站点目录`source/_data`中创建自定义文件，并在下面取消注释所需的文件
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

文章阴影

1	vim source/_data/styles.styl #添加自定义样式

// Custom styles.
// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(105,105,105,0.5);
   -moz-box-shadow: 0 0 5px rgba(105,105,105,0.5);
  }

背景图

1 2	vim source/_data/styles.styl #添加指自定义样式 mkdir source/images #创建图片存放目录，然后将背景图放到该目录下即可

// 添加背景图片
body {
  background: url(/images/background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

//文章内容的透明度设置
.content-wrap {
  opacity: 0.8;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.8;
}

//站点概况透明度设置
.sidebar-inner {
  background: rgba(255,255,255,0.8);
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.3);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.85;
}

参考I
参考II

解决按钮透明度: themes\next\source\css\_common\components\post\post-button.styl 同上修改对应位置为 background: transparent;

字体颜色

博客标题及菜单栏字体颜色

1	vim theme/next/source/css_/common/components/header/site-meta.styl

1	color: #00BFFF; //博客标题

颜色代码表
 代码查询颜色

找到博客目录下theme/next/source/css_common/components/header/menu.styl文件，在a{}里面添加以下代码：

1	color: #00BFFF; //菜单栏

底部字体颜色

1	vim theme/next/source/css/_common/components/header/menu.styl #a{}里面添加代码

1	.footer-inner {color: #00688B;}

侧边栏字体颜色

1	vim themes/next/source/css/_custom/custom.styl #加入代码

1	#sidebar { p,span,a {color: #EE2C2C;}}

杂项

文章模板

1	vim scaffolds/post.md

---
title: {{ title }}
date: {{ date }}
tags: [标签1,标签2,...]
categories: [1级分类,2级分类,...]
---



<!-- more -->

配置链接文本样式

1	vim themes/next/source/css/_common/components/post/post.styl #修改配置文件，在末尾加入

.post-body p a {
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

.post-body 是为了不影响标题

p 是为了不影响“阅读全文”的显示样式

颜色可以自定义

配置RSS

1 2	yarn add hexo-generator-feed #安装插件 vim _config.yml #修改博客配置文件

# 添加RSS订阅配置内容
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

1	vim themes/next/_config.yml #修改主题配置文件

1	rss:/atom.xml

配置评论系统

到来必力注册登录，安装免费版填入相关信息后获得一串代码，在代码中有一串uid，将uid值复制出出来添加到主题配置文件中即可

<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC80NTMxNS8yMTgyOA==">
	<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
	</script>
<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

1	vim themes/next/_config.yml #修改主题配置文件

#找到LiveRe comments system
# LiveRe comments system
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: MTAyMC80NTMxNS8yMTgyOA==

文章加密

1 2	yarn add hexo-blog-encrypt #安装插件 vim _config.yml #配置博客配置文件，文件内没有就自行添加

# Security
##
encrypt:
    enable: true

给文章加密

---
title: 文章标题
date: 2016-03-30 21:18:02
password: 123456	#密码
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

侧边栏加入音乐播放器

到网易云音乐选择歌单，生成外链

1	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=1365959078&auto=1&height=32"></iframe>

1	vim themes/next/layout/_macro/sidebar.swig #将生成的外链放到合适的位置即可

文章结束标语

1	vim themes/next/layout/_macro/passage-end-tag.swig #新建文件并加入内容

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢阅读-------------</div>
    {% endif %}
</div>

1	vim themes/next/layout/_macro/post.swig #在post-body 之后(END POST BODY)， post-footer 之前添加如代码

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

1	vim themes/next/_config.yml #加入以下内容

1
2
3

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

腾讯公益404页面

1	vim source/404.html #添加代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回宝贝回家" homePageUrl="http://www.baobeihuijia.com"></script>
</body>
</html>

压缩静态文件提高访问速度

1 2	yarn add hexo-neat #安装插件 vim _config.yml #添加配置信息

#静态文件压缩
# hexo-neat

neat_enable: true

#压缩html
neat_html:
  enable: true
  #跳过压缩
  exclude:
#压缩html时不要跳过.md文件和.swig文件（模块引擎文件）

#压缩css
neat_css:
  enable: true
  exclude:
      - '**/*.min.css'

#压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/index.js'

Hexo-admin

可视化界面操作文章

1 2	yarn add hexo-admin vim _config.yml

# 管理配置
admin:
  username: myfavoritename
  password_hash: be121740bf988b2225a313fa1f107ca1
  secret: a secret something

password_hash 是密码的哈希
secret 用来保证cookie的安全，越长越复杂最好。

通过http://localhost:4000/admin/访问

hexo-admin

hexo 插件

木He寸&柽-eonun's Blog

Hexo主题美化