木He寸&柽-eonun's Blog

记录积累方有成长

Hexo主题更新美化

发表于 更新于

Hexo next 主题配置美化

在博客根目录下操作

下载使用next主题

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

官方不建议直接修改主题文件下的内容，这不利于升级

1
cp themes/next/_config.yml _config.next.yml  # 复制主题文件到主目录

Hexo 配置文件($blog/_config.yml)中的 theme_config 的优先级最高，其次是 $blog/_config.[theme].yml 文件，最后是位于主题目录下的 _config.yml 文件

博客配置文件基础配置

1
vim _config
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 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主题主配置文件基础配置

1
vim _config.next.yml

主题样式配置

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

菜单栏配置

1
2
3
4
5
6
7
8
9
10
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

Font Awesome

添加模块

  • 分类模块
1
2
hexo n page categories
vim source/categories/index.md	#修改
1
2
3
4
5
---
title: 分类
date: 2019-07-19 13:04:16
type: categories
---

给文章在顶部添加categories字段，即可自动创建分类名并加入对应的分类中

栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#单个分类
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是关闭评论
1
2
3
4
5
6
---
title: 标签
date: 2019-07-19 13:04:24
type: tags
comments:false
---

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

栗子：

1
2
3
4
5
6
7
8
9
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	#修改博客配置文件
1
2
3
4
5
6
# 在Extensions下添加搜索配置模块
search:
  path: search.xml
  field: post
  content: true
  format: html
1
vim _config.next.yml	#修改主题配置文件
1
2
3
4
5
6
7
8
9
10
# 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-->

在它后面的内容会被隐藏，当点击阅读全文才能看到
可将其添加到模板文件(scaffolds/post.md) 中，每次创建新文章都自动添加

头像图标

将头像图标文件放到 $blog/source/images 下

头像

1
2
3
4
5
6
# Sidebar Avatar
avatar:
  
  url: /images/me.png	#头像路径
  rounded: true	#头像是否为圆形显示
  rotated: true	#鼠标到头像上是否旋转头像

博客网站图标

1
2
3
4
5
6
7
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

侧栏配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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	#在回到顶部按钮上显示百分百

访问计数

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

1
2
3
4
5
6
7
8
9
10
# 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之后打开网页,就能看到正确的访问人数

阅读书签

用于记录本次阅读文章的位置，下次访问直接打开到上次的位置

1
2
3
4
5
# Bookmark Support
bookmark:
  enable: true
  color: ""
  save: auto

侧边栏目录

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

1
2
3
4
5
6
7
8
9
10
11
12
# 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`在一个帖子中设置它

侧边栏社交链接

1
2
3
4
5
6
7
8
9
10
11
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

侧边栏友情链接

1
2
3
4
5
6
7
8
9
# 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

文章版权信息

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language:

动画

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

动画背景

克隆脚本到themes/next/source/lib/three

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

修改主题配置文件开启动态背景:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 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

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

修改主题配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

添加打赏

1
2
3
4
5
6
7
8
9
10
11
12
# 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			#比特币收款

底部博客平台信息

1
2
# Powered by Hexo & NexT
  powered: false

自定义主题内容

底部标签图标样式

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

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

1
2
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>

鼠标点击特效

第一种(小心心)

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

1
!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		#body标签中添加
1
<!-- 页面点击小红心 --><script type="text/javascript" src="/js/clicklove.js"></script>

另一种特效(烟花)

1
vim themes/next/source/js/fireworks.js	#新建文件，并添加代码
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)}"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		#添加
1
{% 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 _config.next.yml		#在主题文件中加入
1
# Fireworksfireworks: true

github角落及丝带

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

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

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

右上角蓝底:

1
<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>

宠物

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 模型的包名 来安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 自带方式

1
2
# {% asset_img <slug> [title] %}
{% asset_img example.jpg This is an example image %}

hexo-renderer-marked 3.1.0引入了一个新的选项，允许在markdown不使用 asset_img 标签插件的情况下嵌入图像

$blog/_config.yml
1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

然后在文章中使用:

1
![image](image.jpg)

详细参考

插件方式

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)		#只需要添加文件名即可，无需加上目录

侧边栏加入音乐播放器

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

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	#新建文件并加入内容
1
2
3
4
5
<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 前加入
1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>
1
vim _config.next.yml		#加入以下内容
1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

自定义样式

1
vim _config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
# 定义自定义文件路径
# 在站点目录`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	#新建并添加自定义样式
1
2
3
4
5
6
7
8
9
// 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	#添加自定义样式
#将背景图放到图片目录(source/images)下即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 添加背景图片
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 中添加定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//博客标题字体色
.site-title {
	color: #00BFFF;
}

//菜单字体色
.menu .menu-item a {
	color: #8B1A1A;
}

//底部字体色
.footer-inner {
    color: #EE00EE;
}

配置链接文本样式

1
vim source/_data/styles.styl	#添加自定义样式
1
2
3
4
5
6
7
8
9
10
11
.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;
  }
}

杂项

文章模板

1
vim scaffolds/post.md
1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: {{ title }}
date: {{ date }}
tags: [标签1,标签2,...]
categories: [1级分类,2级分类,...]
---



<!-- more -->



文章内容中的影音

音乐

直接使用HTML标签:

1
2
<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),有显示歌词功能，也美观

1
yarn add hexo-tag-aplayer

然后在文章中使用:

1
{% aplayer "歌曲名" "歌手名" "https://音乐链接.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

支持歌单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% 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 %}

hexo-tag-aplayer

视频

直接使用HTML标签:

1
<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)，可支持弹幕:

1
yarn add hexo-tag-dplayer

然后在文章中使用:

1
{% dplayer "url=https://视频链接.mp4" "https://封面图.jpg" "api=https://api.prprpr.me/dplayer/" "id=" "loop=false" %}

使用弹幕必须有 api 和 id 两项，并且若使用的是 官方 的 api 地址（即上面的），id 的值需要随机自定义，可用 工具 将与众不同的文字😂生成哈希值来使用。

hexo-tag-dplayer

配置RSS

1
2
yarn add hexo-generator-feed	#安装插件
vim _config.yml		#修改博客配置文件
1
2
3
4
5
6
7
8
9
# 添加RSS订阅配置内容
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
1
vim _config.next.yml	#修改主题配置文件
1
rss:/atom.xml

配置评论系统

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 来必力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 _config.next.yml	#修改主题配置文件
1
2
3
4
#找到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		#配置博客配置文件，文件内没有就自行添加
1
2
3
4
# Security
##
encrypt:
    enable: true

给文章加密

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

腾讯公益404页面

1
vim source/404.html	#添加代码
1
2
3
4
5
6
7
8
9
10
<!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		#添加配置信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#静态文件压缩
# 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
yarn add hexo-admin

访问localhost:4000/admin/, Settings > Setup authentification 输入相关信息得到配置内容添加到_config.yml 进行配置

1
2
3
4
5
# hexo-admin authentification
admin:
  username: eonun
  password_hash: $2a$10$8r2 # 通过 bcrypt hash 加密生成的哈希值
  secret: NCAIOfsiuhr293(*Y(I^#23hafkhasdf  # 加密cookies使用越长越复杂最好

hexo-admin

hexo 插件

-------------本文结束感谢阅读-------------

欢迎关注我的其它发布渠道