Hexo主题美化
Hexo next v7主题配置美化
在博客根目录下操作
下载使用next主题
git clone https://github.com/theme-next/hexo-theme-next themes/next
vim _config.yml #修改配置使用主题
theme:next
博客配置文件基础配置
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主题主配置文件基础配置
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主题所有的图标都来自这里
添加模块
- 分类模块
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级分类
...
- 标签模块
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
...
- 关于模块
hexo n page about
source文件夹下会生成about/index.md，打开index.md文件即可编辑个人相关信息
- 本地搜索模块
yarn add hexo-generator-searchdb #安装搜索插件
vim _config.yml #修改博客配置文件
# 在Extensions下添加搜索配置模块
search:
path: search.xml
field: post
content: true
format: html
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字符串到可读的字符串
- 全文阅读
博客主页会有多篇文章，如果想让你的文章只显示一部分，多余内容需要点击阅读全文来查看，那么就需要在的文章中添加：
<!--more-->
在它后面的内容会被隐藏，当点击阅读全文就能看到了
底部标签图标样式
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（丝带）选择一款你喜欢的挂饰，拷贝方框内的代码
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
鼠标点击特效
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);
vim themes/next/laout/_layout.swig #添加
<!-- 页面点击小红心 --><script type="text/javascript" src="/js/clicklove.js"></script>
另一种特效
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)};
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 %}
vim themes/next/_config.yml #在主题文件中加入
# 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
其他配置文件配置
宠物
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 #是否在手机端显示
文章插入图片
vim _config.yml #修改博客配置文件，开启资源文件夹
post_asset_folder: true
#开启后新建文章的时会同时创建一个同名文件夹用于存放文章资源（如:图片）
yarn add hexo-asset-image #安装插件
vim node_modules/hexo-asset-image/index.js #修改文件配置，修正一个错误
else {
var endPos = link.length-1; //将第24行修改为这样
}
将图片放到该文件夹下，在文章中添加图片
 #只需要添加文件名即可，无需加上目录
自定义样式（next v7）
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
文章阴影
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);
}
背景图
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;
}
解决按钮透明度: themes\next\source\css\_common\components\post\post-button.styl 同上修改对应位置为 background: transparent;
字体颜色
博客标题及菜单栏字体颜色
vim theme/next/source/css_/common/components/header/site-meta.styl
color: #00BFFF; //博客标题
找到博客目录下theme/next/source/css_common/components/header/menu.styl文件，在a{}里面添加以下代码：
color: #00BFFF; //菜单栏
底部字体颜色
vim theme/next/source/css/_common/components/header/menu.styl #a{}里面添加代码
.footer-inner {color: #00688B;}
侧边栏字体颜色
vim themes/next/source/css/_custom/custom.styl #加入代码
#sidebar { p,span,a {color: #EE2C2C;}}
杂项
文章模板
vim scaffolds/post.md
---
title: {{ title }}
date: {{ date }}
tags: [标签1,标签2,...]
categories: [1级分类,2级分类,...]
---
<!-- more -->
配置链接文本样式
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
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: ' '
vim themes/next/_config.yml #修改主题配置文件
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版安装代码已完成 -->
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==
文章加密
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: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---
侧边栏加入音乐播放器
到网易云音乐选择歌单，生成外链
<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>
vim themes/next/layout/_macro/sidebar.swig #将生成的外链放到合适的位置即可
文章结束标语
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>
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>
vim themes/next/_config.yml #加入以下内容
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
腾讯公益404页面
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>
压缩静态文件提高访问速度
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
可视化界面操作文章
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/访问