Hexo主题更新美化
Hexo next 主题配置美化
在博客根目录下操作
下载使用next主题
git clone https://github.com/theme-next/hexo-theme-next themes/next
vim _config.yml #修改配置使用主题
theme:next
官方不建议直接修改主题文件下的内容，这不利于升级
cp themes/next/_config.yml _config.next.yml # 复制主题文件到主目录
Hexo 配置文件($blog/_config.yml)中的 theme_config 的优先级最高，其次是 $blog/_config.[theme].yml 文件，最后是位于主题目录下的 _config.yml 文件
博客配置文件基础配置
vim _config
# Site
title: 木He寸&eonun's Blog #标题
subtitle: 记录积累方有成长 #副标题
description: 你只需努力，其他任由天意！ #描述
keywords:
author: 木He寸&eonun #作者
language: zh-CN #语言
timezone: Asia/Shanghai #时区
# URL
url: https://eonun.com #域名
# Directory
skip_render: README.md # 部署的时候不包含的文件
next主题主配置文件基础配置
vim _config.next.yml
主题样式配置
# Schemes #选择一个主题样式，去掉前面的注释，将不用的主题样式注释掉
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
菜单栏配置
menu: #将需要的菜单取消注释即可，顺便换一下顺序
menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
commonweal: /404/ || fa fa-heartbeat
添加模块
- 分类模块
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 _config.next.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-->
在它后面的内容会被隐藏，当点击阅读全文才能看到
可将其添加到模板文件(scaffolds/post.md) 中，每次创建新文章都自动添加
头像图标
将头像图标文件放到 $blog/source/images 下
头像
# Sidebar Avatar
avatar:
url: /images/me.png #头像路径
rounded: true #头像是否为圆形显示
rotated: true #鼠标到头像上是否旋转头像
博客网站图标
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
侧栏配置
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 #在回到顶部按钮上显示百分百
访问计数
用的是不蒜子脚本来达到计数目的的
# 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之后打开网页,就能看到正确的访问人数
阅读书签
用于记录本次阅读文章的位置，下次访问直接打开到上次的位置
# Bookmark Support
bookmark:
enable: true
color: ""
save: auto
侧边栏目录
在写文章是通常会有给标题编号的情况，但主题默认也会给加上一个编号，这样就会有些多余，关闭自动编号只需在侧边栏目录配置关闭即可
# 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 || fab fa-github
E-Mail: mailto:eonun47@gmail.com || fa fa-envelope
Weibo: https://weibo.com/eonun || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
Twitter: https://twitter.com/eonun || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype
侧边栏友情链接
# 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
动画背景
克隆脚本到themes/next/source/lib/three
git clone https://github.com/theme-next/theme-next-three themes/next/source/lib/three
修改主题配置文件开启动态背景:
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
enable: true
three_waves: true
canvas_lines: false
canvas_sphere: false
# CDN 加速 找到相应行去掉注释即可启用
vendors:
three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/three-waves.min.js
# canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/canvas_lines.min.js
# canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/canvas_sphere.min.js
顶部加载进度条
克隆脚本到themes/next/source/lib/pace
git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace
修改主题配置文件:
pace:
enable: true
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | ce
nter-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material |
minimal
theme: minimal
# CDN 加速 找到相应行去掉注释即可启用
vendors:
pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css
添加打赏
# 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 by Hexo & NexT
powered: false
自定义主题内容
底部标签图标样式
vim themes/next/layout/_macro/post.swig
将rel="tag">{{ tag_indicate }}改为：rel="tag"><i class="fa fa-tag"></i>
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
鼠标点击特效
第一种(小心心)
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 #body标签中添加
<!-- 页面点击小红心 --><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 _config.next.yml #在主题文件中加入
# Fireworksfireworks: true
github角落及丝带
在GitHub Corners（角落）或GitHub Ribbons（丝带）选择一款你喜欢的挂饰，拷贝方框内的代码
vim themes/next/layout/_layout.swig #将代码加入<div class="headband"></div>下方
#修改自己的github链接（https://github.com/eonun）
右上角蓝底:
<a href="https://github.com/eonun" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
宠物
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标签而非插入到所有页面中
log: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-tororo # 模块名，博客根目录/node_models/ 下的目录名
display: #放置位置和大小
position: right
width: 300
height: 600
mobile:
show: true #是否在手机端显示
react:
opacity: 0.7 #透明
文章插入图片
Hexo自带方式
# {% asset_img <slug> [title] %}
{% asset_img example.jpg This is an example image %}
hexo-renderer-marked 3.1.0引入了一个新的选项，允许在markdown不使用 asset_img 标签插件的情况下嵌入图像
post_asset_folder: true
marked:
prependRoot: true
postAsset: 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行修改为这样
}
将图片放到该文件夹下，在文章中添加图片
 #只需要添加文件名即可，无需加上目录
侧边栏加入音乐播放器
到网易云音乐选择歌单，生成外链
<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 前加入
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
vim _config.next.yml #加入以下内容
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
自定义样式
vim _config.next.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 #添加自定义样式
#将背景图放到图片目录(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;
字体颜色
在自定义样式文件 source/_data/styles.styl 中添加定义
//博客标题字体色
.site-title {
color: #00BFFF;
}
//菜单字体色
.menu .menu-item a {
color: #8B1A1A;
}
//底部字体色
.footer-inner {
color: #EE00EE;
}
配置链接文本样式
vim source/_data/styles.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;
}
}
杂项
文章模板
vim scaffolds/post.md
---
title: {{ title }}
date: {{ date }}
tags: [标签1,标签2,...]
categories: [1级分类,2级分类,...]
---
<!-- more -->
文章内容中的影音
音乐
直接使用HTML标签:
<audio src="https://音乐链接.mp3" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the audio tag.</audio>
使用插件(hexo-tag-aplayer),有显示歌词功能，也美观
yarn add hexo-tag-aplayer
然后在文章中使用:
{% aplayer "歌曲名" "歌手名" "https://音乐链接.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}
支持歌单:
{% aplayerlist %}
{
"autoplay": false,
"showlrc": 3,
"mutex": true,
"music": [
{
"title": "歌曲名",
"author": "歌手名",
"url": "https://音乐链接.mp3",
"pic": "https://封面图.jpg",
"lrc": "https://歌词.lrc"
},
{
"title": "歌曲名",
"author": "歌手名",
"url": "https://音乐链接.mp3",
"pic": "https://封面图.jpg",
"lrc": "https://歌词.lrc"
}
]
}
{% endaplayerlist %}
视频
直接使用HTML标签:
<video poster="https://封面图.jpg" src="https://视频链接.mp4" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the video tag.</video>
用插件(hexo-tag-dplayer)，可支持弹幕:
yarn add hexo-tag-dplayer
然后在文章中使用:
{% dplayer "url=https://视频链接.mp4" "https://封面图.jpg" "api=https://api.prprpr.me/dplayer/" "id=" "loop=false" %}
使用弹幕必须有 api 和 id 两项，并且若使用的是 官方 的 api 地址（即上面的），id 的值需要随机自定义，可用 工具 将与众不同的文字😂生成哈希值来使用。
配置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 _config.next.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 _config.next.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: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---
腾讯公益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
访问localhost:4000/admin/, Settings > Setup authentification 输入相关信息得到配置内容添加到_config.yml 进行配置
# hexo-admin authentification
admin:
username: eonun
password_hash: $2a$10$8r2 # 通过 bcrypt hash 加密生成的哈希值
secret: NCAIOfsiuhr293(*Y(I^#23hafkhasdf # 加密cookies使用越长越复杂最好