安装Hexo
安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:
如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。
安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
1 2 3 cd <folder>hexo init . npm install
指令
new
1 hexo new [layout] <title>
layout
server
启动服务器。默认情况下,访问网址为: http://localhost:4000/。
选项
描述
-p, --port
重设端口
-s, --static
只使用静态文件
-l, --log
启动日记记录,使用覆盖记录格式
read more
更换主题
这里选择的是hexo next主题
1 2 cd hexogit clone https://github.com/theme-next/hexo-theme-next themes/next
由于Next主题一直在更新,所以此处加一个更新命令:
Next主题的配置
根目录下_config.yml
的配置
Site设置
1 2 3 4 5 6 7 8 title: Z.QIANG'blog subtitle: Fortune favors the prepared mind description: keywords: author: tyokyo320 language: zh-CN timezone: Japan
URL栏设置
1 2 3 4 5 6 7 8 url: https://blog.tyokyo320.com root: / permalink: :year/:month/:day/:title/ permalink_defaults: pretty_urls: trailing_index: true
开启插入图片功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 new_post_name: :title.md default_layout: post titlecase: false external_link: enable: true field: site exclude: '' filename_case: 0 render_drafts: false post_asset_folder: true relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: ''
post_asset_folder
和future
设置成true
翻页设置
1 2 3 4 5 6 7 8 9 10 11 12 13 index_generator: path: '' per_page: 12 order_by: -date per_page: 12 pagination_dir: page
per_page:
设置博文的数量
Deployment设置
这里有一个很迷的问题,在Mac上hexo deploy
部署的时候, 10次有9次会卡住。目前还没解决。
数学公式
原来用的是MathJax引擎进行渲染的,每次打开文章加载插件js速度非常的慢,所以考虑更换成Katex引擎的markdown-it-plus
插件通过css进行渲染。
1 2 3 4 5 npm install hexo-math --save npm un hexo-renderer-marked --save npm i hexo-renderer-markdown-it-plus --save
修改博客主题目录下的_config.yml
文件,将katex
的后面设置为true
1 2 3 4 5 katex: enable: true copy_tex: false
在博客根目录下的_config.yml
文件后添加如下代码
1 2 3 4 5 6 7 8 9 10 markdown_it_plus: highlight: true html: true xhtmlOut: true breaks: true langPrefix: linkify: true typographer: quotes: “”‘’
主题目录下_config.yml
的配置
网站Logo设置
1 2 3 4 5 6 7 favicon: small: /images/favicon-16x16-next.png medium: /images/favicon-32x32-next.png apple_touch_icon: /images/apple-touch-icon-next.png safari_pinned_tab: /images/logo.svg android_manifest: /images/manifest.json ms_browserconfig: /images/browserconfig.xml
把选好的图标放入/themes/next/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 footer: since: 2019 icon: name: heart animated: true color: "#f08080" copyright: Z.QIANG powered: enable: false version: false theme: enable: true version: true
since:
表示网站成立的年份
icon:
设置年份后面的图标,图标可在Font Awesome 选择,然后在name
中修改
animated:
设置图标是否有动画效果
color:
设置图标颜色
copyright:
显示图标后面的版权所属,不设置的话默认显示配置文件中的作者名
powered:
设置是否显示Powered by Hexo
theme:
设置是否显示当前主题的版本信息
版权信息
1 2 3 4 5 creative_commons: license: by-nc-sa sidebar: true post: false language: en
license:
设置版权标准,具体参考Creative Commons licenses
sidebar:
设置是否在侧栏显示版权标准
post:
设置是否在文章底部显示版权信息
language:
设置语言
主题选择
Next有4个主题可供选择
侧边栏菜单设置
1 2 3 4 5 6 7 8 9 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
||
前表示页面的地址,后面表示显示的图标的名称
about:
设置关于
界面
tags:
设置标签
功能
categories:
设置目录页面,编辑博文时在顶部加上一栏categories
就可以为博文设置所属目录.
archives:
设置归档页面
Font Awesone6更新后图标会消失,需要改动。具体参考Font Awesome
侧边栏显示设置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 sidebar: position: left display: post offset: 12 onmobile: false
position:
设置侧栏在左边还是右边,这个选择只对Pisces
和Gemini
两个主题起作用
width:
设置侧栏的宽度,默认Muse
和Mist
是320,Pisces
和Gemini
是240
display:
设置侧栏的显示方式,只对Muse
和Mist
两个主题起作用
offset:
设置侧栏到顶部介绍的距离,只对Pisces
和Gemini
两个主题起作用
onmobile:
设置是否在手机等宽度较小的设备上显示侧栏,只对Muse
和Mist
两个主题起作用
头像设置
设置是否在侧栏显示头像
1 2 3 4 5 6 7 8 9 10 avatar: url: /images/avatar.jpg rounded: true rotated: true
url:
后填写头像图片的路径,默认在/themes/next/source/images
中
rounded:
设置是否显示圆形头像
rotated:
设置鼠标移动到头像上时头像是否旋转
社交网站链接设置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 social: GitHub: https://github.com/tyokyo320 || fab fa-github Twitter: https://twitter.com/ZHANG_1006 || fab fa-twitter Bilibili: https://space.bilibili.com/8366997 || fas fa-tv FB Page: https://www.facebook.com/profile.php?id=100011259601712 || fab fa-facebook YouTube: https://youtube.com/channel/UCHtrwJEAQ50k5irx73XT83w?view_as=subscriber || fab fa-youtube Instagram: https://instagram.com/tyokyo320/?hl=en || fab fa-instagram
||
前输入自己社交主页的链接,后面设置其图标
E-Mail
格式为mailto:邮箱地址
,在Win10系统可以调用系统邮件服务自动填写收件人
Font Awesone6更新后图标会消失,需要改动。具体参考Font Awesome
侧边栏目录设置
1 2 3 4 5 6 7 8 9 10 11 toc: enable: true number: true wrap: false expand_all: false max_depth: 6
enable:
设置是否开启侧栏目录
number:
设置自动编号
wrap:
设置当标题长度超过侧栏长度时是否自动换行
expand_all:
设置是否展开全部目录,否的话自动展开正在看的部分
max_depth:
设置自动生成目录的最大深度,也就是生成到几级标题
开启阅读全文选项
1 2 3 4 5 6 7 8 9 10 11 12 excerpt_description: true auto_excerpt: enable: false length: 150 read_more_btn: true
scroll_to_more: true:
设置自动跳转到阅读全文
选择之后的位置。设置完成后,在文字内加入<!-- more -->
即可在首页隐藏剩下的博文并显示阅读全文
按钮了
length:
表示截止到的字符长度
返回顶部按钮
1 2 3 4 5 6 back2top: enable: true sidebar: true scrollpercent: true
enable:
是否开启回到顶部按钮
sidebar:
设置是否将按钮放到侧栏中
scrollpercent:
设置是否显示阅读进度百分比
打赏
1 2 3 4 5 6 7 8 9 10 11 12 reward_settings: enable: false animation: false reward:
enable:
设置是否在文章末尾显示打赏按钮
animation:
设置打上按钮是否显示动画
reward:
路径在/themes/next/source/images
代码块高亮和复制按钮
1 2 3 4 5 6 7 8 9 10 11 12 codeblock: highlight_theme: night bright copy_button: enable: true show_result: true style: mac
highlight_theme:
一共有5种,可在tomorrow 看预览效果
enable:
开启代码块右上角的复制按钮
show_result:
设置是否显示复制成功的提示
书签
左上角显示一个书签按钮可以跳转到上一次设置书签的位置
首先执行命令git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark
安装bookmark 插件到source/lib
目录
1 2 3 4 5 6 7 8 bookmark: enable: false color: "#222" save: auto
Github角标
1 2 3 4 5 github_banner: enable: false permalink: https://github.com/tyokyo320 title: Follow me on GitHub
enable:
设置是否在页面右上角显示Github三角标
permalink:
添加自己的Github地址
title:
设置鼠标移动到图标后显示的文字
字体
部署了一段时间博客后,总是发现加载非常慢,而且会显示加载这个Google字体库超时,查了一下于是采取引入中科大的源这个解决方法.
1 2 3 4 5 6 7 font: enable: true host: //fonts.lug.ustc.edu.cn
文章中图片点击实现全屏查看
切换到lib目录
下载插件
1 git clone https://github.com/theme-next/theme-next-fancybox3 fancybox
更改主题配置文件next/_config.yml
hexo s重新启动
页面搜索功能
1 2 3 4 5 6 7 8 9 10 11 12 13 local_search: enable: true trigger: auto top_n_per_article: 1 unescape: false preload: false
mermaid流程图
安装插件
1 npm install hexo-filter-mermaid-diagrams
修改配置文件
主题目录下的_config.yml
中修改:
1 2 3 4 5 mermaid: enable: true theme: forest
个性化背景颜色
打开博客根目录下的source/_data/styles.styl
文件:
1 2 3 4 .mermaid { background : transparent; }
效果
graph LR
A-->B
A-->C
B-->D
C-->D
graph TD
B((开始)) -->C{判断}
C -- a=1 -->D[执行语句1]
C -- a=2 -->E[执行语句2]
C -- a=3 -->F[执行语句3]
C -- a=4 -->G[执行语句4]
D--> AA((结束))
E--> AA
F--> AA
G--> AA
语法结构
语法结构如下:A[名称] --> B(名称)
其中,A、B均代表形状名称, -->
表示箭头指向,形状样式用后面的括号来表示,括号里面的内容是形状中要显示的文本内容。其中有以下几种形状:
括号形式
形状样式
[]
矩形框
()
圆角矩形框
{}
菱形
(())
圆形
如果没有形状边框,可以写成:C[语句] --> |语句| D[语句]或者C[语句] – 语句 --> D[语句]都可以。
相对而言,比Flowchart更加简洁清晰,Mermaid还支持制作时序图、甘特图等。其他的还有序列图,UML图等,大家也可以进行配置后运用Markdown生成图形。
Next主题深度美化
顶部阅读进度条
注意:Next-7.5.0版本之后已经自带顶部阅读进度条,不用下载安装,配置即可
在博文页面顶部添加Reading Progress 进度条, 表示阅读进度.
安装
安装模块到source/lib
1 git clone https://github.com/theme-next/theme-next-reading-progress source /lib/reading_progress
修改配置文件
打开主题下的配置文件_config.yml
,搜索reading_progress
定位到以下代码,修改enable
设置为true
.
1 2 3 4 5 6 7 reading_progress: enable: true color: "#0aaff0" height: 3px
线条颜色可以在ATOOL 查询颜色并修改
升级
切换到安装目录,并git pull
更新.
1 2 cd themes/next/source/lib/reading_progressgit pull
加载条
用于在网页加载的过程中显示加载进度, Next主题已支持pace 功能
安装
切换到主题下的文件夹
安装模块到source/lib
1 git clone https://github.com/theme-next/theme-next-pace source /lib/pace
修改配置文件
打开主题下的配置文件_config.yml
,搜索pace
定位以下代码
1 2 3 4 5 6 7 8 9 pace: enable: true theme: bounce
将enable:
设置为true
将theme:
设置为上面Themes list
的一种,主题样式可以在PACE 查看
调整颜色
为了让进度条和主题背景相匹配,可以在theme/next/source/lib/pace
中找到相应主题的css文件并修改颜色配置
下面以pace-theme-bounce.min.css
示例
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 .pace { width : 140px ; height : 300px ; position : fixed; top : -90px ; right : -20px ; z-index : 2000 ; -webkit-transform : scale (0 ); -moz-transform : scale (0 ); -ms-transform : scale (0 ); -o-transform : scale (0 ); transform : scale (0 ); opacity : 0 ; -webkit-transition : all 2s linear 0s ; -moz-transition : all 2s linear 0s ; transition : all 2s linear 0s ; } .pace .pace-active { -webkit-transform : scale (.25 ); -moz-transform : scale (.25 ); -ms-transform : scale (.25 ); -o-transform : scale (.25 ); transform : scale (.25 ); opacity : 1 ; } .pace .pace-activity { width : 140px ; height : 140px ; border-radius : 70px ; background : #29d ; position : absolute; top : 0 ; z-index : 1911 ; -webkit-animation : pace-bounce 1s infinite; -moz-animation : pace-bounce 1s infinite; -o-animation : pace-bounce 1s infinite; -ms-animation : pace-bounce 1s infinite; animation : pace-bounce 1s infinite; } .pace .pace-progress { position : absolute; display : block; left : 50% ; bottom : 0 ; z-index : 1910 ; margin-left : -30px ; width : 60px ; height : 75px ; background : rgba (20 , 20 , 20 , .1 ); box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .1 ); border-radius : 30px / 40px ; -webkit-transform : scaleY (.3 ) !important ; -moz-transform : scaleY (.3 ) !important ; -ms-transform : scaleY (.3 ) !important ; -o-transform : scaleY (.3 ) !important ; transform : scaleY (.3 ) !important ; -webkit-animation : pace-compress .5s infinite alternate; -moz-animation : pace-compress .5s infinite alternate; -o-animation : pace-compress .5s infinite alternate; -ms-animation : pace-compress .5s infinite alternate; animation : pace-compress .5s infinite alternate; } @-webkit-keyframes pace-bounce { 0% { top : 0 ; -webkit-animation-timing-function : ease-in; } 40% {} 50% { top : 140px ; height : 140px ; -webkit-animation-timing-function : ease-out; } 55% { top : 160px ; height : 120px ; border-radius : 70px / 60px ; -webkit-animation-timing-function : ease-in; } 65% { top : 120px ; height : 140px ; border-radius : 70px ; -webkit-animation-timing-function : ease-out; } 95% { top : 0 ; -webkit-animation-timing-function : ease-in; } 100% { top : 0 ; -webkit-animation-timing-function : ease-in; } } @-moz-keyframes pace-bounce { 0% { top : 0 ; -moz-animation-timing-function : ease-in; } 40% {} 50% { top : 140px ; height : 140px ; -moz-animation-timing-function : ease-out; } 55% { top : 160px ; height : 120px ; border-radius : 70px / 60px ; -moz-animation-timing-function : ease-in; } 65% { top : 120px ; height : 140px ; border-radius : 70px ; -moz-animation-timing-function : ease-out;} 95% { top : 0 ; -moz-animation-timing-function : ease-in; } 100% {top : 0 ; -moz-animation-timing-function : ease-in; } } @keyframes pace-bounce { 0% { top : 0 ; animation-timing-function : ease-in; } 50% { top : 140px ; height : 140px ; animation-timing-function : ease-out; } 55% { top : 160px ; height : 120px ; border-radius : 70px / 60px ; animation-timing-function : ease-in; } 65% { top : 120px ; height : 140px ; border-radius : 70px ; animation-timing-function : ease-out; } 95% { top : 0 ; animation-timing-function : ease-in; } 100% { top : 0 ; animation-timing-function : ease-in; } } @-webkit-keyframes pace-compress { 0% { bottom : 0 ; margin-left : -30px ; width : 60px ; height : 75px ; background : rgba (20 , 20 , 20 , .1 ); box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .1 ); border-radius : 30px / 40px ; -webkit-animation-timing-function : ease-in; } 100% { bottom : 30px ; margin-left : -10px ; width : 20px ; height : 5px ; background : rgba (20 , 20 , 20 , .3 ); box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .3 ); border-radius : 20px / 20px ; -webkit-animation-timing-function : ease-out; } } @-moz-keyframes pace-compress { 0% { bottom : 0 ; margin-left : -30px ; width : 60px ; height : 75px ; background : rgba (20 , 20 , 20 , .1 ); box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .1 ); border-radius : 30px / 40px ; -moz-animation-timing-function : ease-in; } 100% { bottom : 30px ; margin-left : -10px ; width : 20px ; height : 5px ; background : rgba (20 , 20 , 20 , .3 ); box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .3 ); border-radius : 20px / 20px ; -moz-animation-timing-function : ease-out; } } @keyframes pace-compress { 0% { bottom : 0 ; margin-left : -30px ; width : 60px ; height : 75px ; background : rgba (20 , 20 , 20 , .1 ); box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .1 ); border-radius : 30px / 40px ; animation-timing-function : ease-in; } 100% { bottom : 30px ; margin-left : -10px ; width : 20px ; height : 5px ; background : rgba (20 , 20 , 20 , .3 ); box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .3 ); border-radius : 20px / 20px ; animation-timing-function : ease-out; } }
使用搜索功能搜索#
定位到颜色设置
升级
切换到安装目录,并git pull
更新.
1 2 cd themes/next/source/lib/pacegit pull
动态背景
Next主题默认提供了三种动态背景
这里我选择的是Canvas-nest
安装
切换到主题下的文件夹
安装模块到source/lib
1 git clone https://github.com/theme-next/theme-next-canvas-nest source /lib/canvas-nest
修改配置文件
打开主题下的配置文件_config.yml
修改以下代码
1 2 3 4 5 6 7 8 9 10 canvas_nest: enable: true onmobile: true color: "0,0,255" opacity: 0.5 zIndex: -1 count: 50
如果想使用CDN加速的话需要设置
1 2 3 4 5 6 7 8 vendors: ... canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js
注意:Next-7.5.0版本之后使用CDN加速会报错
升级
切换到安装目录,并git pull
更新.
1 2 cd themes/next/source/lib/canvas_nestgit pull
鼠标点击特效
鼠标点击特效有心形特效和爆炸两种特效.这里我选择的是心形特效
创建js文件
在themes/next/source/js/src
下中创建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 );
修改layout文件
打开themes/next/layout/_layout.swig
并在末尾添加以下代码
1 2 <script type ="text/javascript" src ="/js/src/clicklove.js" > </script >
标题抖动效果
鼠标点在标题上会有字体的抖动效果
打开博客根目录下的source/_data/styles.styl
文件, 在最后加上css代码即可
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // 鼠标点在标题上字体抖动效果 .site-title :hover , .post-title :hover { animation : shake-it .5s reverse infinite cubic-bezier (0.68 , -0.55 , 0.27 , 1.55 ); } @keyframes shake-it { 0% { text-shadow : 0 0 rgba (0 , 255 , 255 , .5 ), 0 0 rgba (255 , 0 , 0 , .5 ); } 25% { text-shadow : -2px 0 rgba (0 , 255 , 255 , .5 ), 2px 0 rgba (255 , 0 , 0 , .5 ); } 50% { text-shadow : -5px 0 rgba (0 , 255 , 255 , .5 ), 3px 0 rgba (255 , 0 , 0 , .5 ); } 100% { text-shadow : 3px 0 rgba (0 , 255 , 255 , .5 ), 5px 0 rgba (255 , 0 , 0 , .5 ); } }
Live2D看板娘
参考官方文档
安装
执行命令npm install --save hexo-helper-live2d
安装Live2D
模块
挑选喜欢的模型样式并执行命令npm install packagename
安装模型,把packagename
替换成模型的名字
预览效果图在这里 查看
基础配置
打开博客根目录下的_config.yml
文件
添加以下代码
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 debug: false model: use: live2d-widget-model-shizuku display: position: right width: 150 height: 300 mobile: show: true react: opacity: 1
终极进化版本
看到别人博客的看板娘能说话, 能换衣服. 发现了大佬们配置的这个Live-2D这个终极版本
项目地址:live2d-widget
Using CDN
我个人是通过使用CDN加载而不是直接把这些文件放到服务器上.
如果要自定义有关内容,可以把这个仓库Fork一份,然后进行修改。这时,使用方法对应地变为
1 2 <script src ="https://cdn.jsdelivr.net/gh/tyokyo320/live2d-widget/autoload.js" > </script >
将username替换为你的GitHub用户名即可.
将改好的上述代码插入到themes/next/layout/_layout.swig
的末尾即可.
API 后端可自行搭建:
参考原项目 ,这里首先我自己在此项目上添加了一些model,模型添加要求见readme,修改完成后打上tag,然后releases。到这里live2d后端部分修改完成
然后修改前端部分,修改自己的live2d-widget项目中autoload.js
文件中cdnPath
(因为我是使用的CDN方式),修改完后打上tag,releases即可
音乐挂件
由于网易云音乐挂件有时会有版权问题导致音乐无法播放,所以这里使用的是Aplayer
来播放音乐
缺点: 每当切换页面时候歌曲会中断, 而且似乎也不可以快进歌曲. 网页加载歌曲时候也会慢.
安装
点击访问Aplayer源码: GitHub Aplayer . 下载到本地, 解压后将dist文件夹复制到themes\next\source
文件夹下
配置music.js
文件
新建themes\next\source\dist\music.js
文件, 添加内容:
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 36 37 38 const ap = new APlayer ({ container : document .getElementById ('aplayer' ), lrcType : 3 , fixed : true , autoplay : false , audio : [ { name : '虹の彼方に(SAO Alicization EDテーマ)' , artist : 'ReoNa' , url : '/dist/music/lrc4.mp3' , cover : '/dist/cover/cover4.jpg' , lrc : '/dist/lrc/lrc4.lrc' } ] });
具体可以参考Aplayer中文文档
audio
对应的便是音频文件, 所以音乐播放器需要播放的音乐是需要自己进行相关信息(如歌曲链接、歌词、封面等)的配置.这里放一个[mp3音乐外链网站]:(http://up.mcyt.net/ ), 搜索对应的音乐, 然后复制url和右击封面图片链接粘贴到对应的位置上就行了.
注意:这里的外链网站是http,不是安全的,引用后博客加载的时候会有警告.所以我个人是采用本地上传音乐的形式.
配置_layout.swig
文件
打开themes\next\layout\_layout.swig
文件, 将
1 2 3 4 5 6 <link rel ="stylesheet" href ="/dist/APlayer.min.css" > <div id ="aplayer" > </div > <script type ="text/javascript" src ="/dist/APlayer.min.js" > </script > <script type ="text/javascript" src ="/dist/music.js" > </script >
添加到<body itemscope …>后面就行, 即在
里面.
重新生成, 访问页面, 就能看到左下角的音乐播放器了.
折叠代码块功能
网站标题崩溃欺骗
背景及半透明效果
编辑主题目录下/_config.yml
,把style前面注释去掉.
1 2 3 4 5 6 7 8 9 10 11 custom_file_path: style: source/_data/styles.styl
将选好的图片放在博客主题目录/source/images
文件夹中并注意命名.
打开博客根目录下的source/_data/styles.styl
文件并修改成跟图片一样的名字
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 //背景 @media screen and (min-width :1200px ) {body { background-image :url (/images/background.jpeg ); background-position : 50% 50% ; background-attachment : fixed; width :100% ; height :100% ; min-width : 1000px ; z-index :-10 ; zoom: 1 ; background-color : #fff ; background-repeat : no-repeat; background-size : cover; -webkit-background-size : cover; -o-background-size : cover; background-position : center 0 ; } #footer a { color :#eee ; } } //改变背景色和透明度 .post-block { background : rgba (255 ,255 ,255 ,0.9 ); } //改变菜单栏透明度 .header-inner { background : #ffffffe8 ; opacity : 1 ; } //标题颜色 .site-meta { background : #00C9FF ; background : -webkit-linear-gradient (to right, #92FE9D , #00C9FF ); background : linear-gradient (to right, #92FE9D , #00C9FF ); } //标题字体及背景 .site-title { display : inline-block; vertical-align : top; line-height : 36px ; font-size : 30px ; font-weight : normal; font-family : 'Lato' , "PingFang SC" , "FZShuTi" , sans-serif; color : #000000 ; } //副标题配置 .site-subtitle { margin-top : 10px ; font-size : 17px ; color : #000 ; font-family : 'Lato' , "PingFang SC" , "STXingkai" , sans-serif; } //底部博客信息颜色 .footer { font-size : 14px ; color : #000 ; } //当鼠标移动到选项时的优化 .menu .menu-item a :hover , .menu-item-active a { background : #ffffff85 ; border-bottom-color : #dcd1d196 ; } //菜单右部的点 .menu-item-active a :after { content : " " ; position : absolute; top : 50% ; margin-top : -3px ; right : 15px ; width : 6px ; height : 6px ; border-radius : 50% ; background-color : #484848 ; }
修改超链接样式
打开themes\next\source\css\_common\components\post\post.styl
并在末尾一串@import
上面添加以下代码
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 ; } }
修改文章底部标签样式
打开文件/themes/next/layout/_macro/post.swig
搜索rel="tag">#
, 将#
替换为<i class="fa fa-tag"></i>
注意:Next-7.5.0版本之后仅仅修改主题目录下/_config
配置文件即可,在tag_icon
后面加上tag
即可.
在文章结尾添加本文介绍标志
博文压缩
Code代码标签颜色
打开博客根目录下的source/_data/styles.styl
文件:
1 2 3 4 5 6 7 8 9 10 // 针对Code 代码标签的美化 code { padding : 2px 4px ; word-wrap : break-word; color : #ff7600 ; background : #fbf7f8 ; border-radius : 3px ; font-size : 15px ; font-weight : bolder; }
网站运行时间
打开/themes/next/layout/_partials/footer.swig
并添加以下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <div > <span id ="timeDate" > 载入天数...</span > <span id ="times" > 载入时分秒...</span > <script > var now = new Date (); function createtime ( ) { var grt= new Date ("07/21/2019 00:00:00" ); now.setTime (now.getTime ()+250 ); days = (now - grt ) / 1000 / 60 / 60 / 24 ; dnum = Math .floor (days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math .floor (hours); if (String (hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math .floor (minutes); if (String (mnum).length ==1 ){mnum = "0" + mnum;} seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math .round (seconds); if (String (snum).length ==1 ){snum = "0" + snum;} document .getElementById ("timeDate" ).innerHTML = "本站已安全运行 " +dnum+" 天 " ; document .getElementById ("times" ).innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒" ; } setInterval ("createtime()" ,250 );</script > </div >
访客统计
在主题配置文件_config.yml
中搜素busuanzi_count
并将enable
设置为true
,icon
可以自定义设置.
1 2 3 4 5 6 7 8 9 10 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
字数统计和阅读时长统计
安装
在博客根目录下执行命令安装统计插件
1 npm install hexo-symbols-count-time --save
修改配置文件
在博客根目录下的配置文件_config.yml
中加入以下代码
1 2 3 4 5 6 7 8 symbols_count_time: symbols: true time: true total_symbols: true total_time: true exclude_codeblock: false
在主题目录下配置文件_config.yml
中搜素symbols_count_time
并修改为
1 2 3 4 5 6 7 8 symbols_count_time: separated_meta: true item_text_post: true item_text_total: false awl: 4 wpm: 275
最后记得hexo clean
一遍再hexo s
!
文章加密访问
文章加密插件目前与字数统计,目录生成功能存在冲突.例如一篇9k字的文章在字数统计中会显示43k.进入文章后没有目录生成,谨慎使用
安装
在博客根目录执行下列命令安装插件
1 npm install --save hexo-blog-encrypt
配置
在根目录的_config.yml
中使用下列代码启用插件
1 2 3 4 encrypt: enable: true
使用
然后在文章md文件的标头添加相应字段就可以实现加密访问了,如
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 --- title: 数理計画法(更新中) mathjax: true tags: - 数理计划法 - 最优化理论 - 线性规划 - 机器学习categories: - 计算机date: 2019-09-17 10:37:15 description: password: 123456 abstract: 文章已加密 message: 请输入密码 ---
其中password
后面输入你想要的密码,abstract
后面输入在首页展示的摘要,message
后面输入密码输入框显示的信息
文章置顶
安装
在博客根目录执行下列命令安装插件
1 2 npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save
配置
打开博客主题目录下\layout\_macro\post.swig
并搜索<div class="post-meta">
,在其中添加下列代码以开启标签
1 2 3 4 5 {% if post.top %} <i class="fa fa-thumb-tack"></i> <font color="7D26CD">置顶</font> <span class="post-meta-divider">|</span> {% endif %}
使用
在需要置顶的文章中加入top: true
即可
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 --- title: 数理計画法(更新中) mathjax: true tags: - 数理计划法 - 最优化理论 - 线性规划 - 机器学习categories: - 计算机date: 2019-09-17 10:37:15 description: password: 123456 abstract: 文章已加密 message: 请输入密码 top: true ---
修改默认字体大小
自定义鼠标样式
图片懒加载
添加评论功能
自定义404页面
部署Hexo到网站
利用
Ubuntu 18.04 Server
docker
nginx
Let’s Encrypt
进行部署.
Nginx
对于Nginx一般分为
三个部分, 于是我们在一个文件夹下创建以下的文件结构, 这里的文件是在主机上进行创建, 稍后要映射到Docker容器里面.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ~/docker/nginx ▶ tree -L 3 . . |-- conf | |-- general.conf | |-- letsencrypt.conf | |-- nginx.conf | `-- security.conf |-- conf.d |-- logs | |-- access.log | `-- error.log |-- run | `-- nginx.pid |-- sites-available | `-- blog.tyokyo320.com.conf |-- sites-enabled | `-- blog.tyokyo320.com.conf -> ../sites-available/blog.tyokyo320.com.conf |-- start.sh `-- www `-- blog.tyokyo320.com `-- public
对于Nginx的配置文件, 可以通过nginxconfig 进行生成, 然后再进一步自定义.
conf.d文件下的配置文件
nginx.conf
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 user www-data;pid /run/nginx.pid;worker_processes 1 ;worker_rlimit_nofile 1024 ;events { multi_accept on ; worker_connections 1024 ; } http { charset utf-8 ; sendfile on ; tcp_nopush on ; tcp_nodelay on ; server_tokens off ; log_not_found off ; types_hash_max_size 2048 ; client_max_body_size 16M ; include mime.types; default_type application/octet-stream; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error .log warn ; ssl_session_timeout 1d ; ssl_session_cache shared:SSL:10m ; ssl_session_tickets off ; ssl_dhparam /etc/nginx/dhparam.pem; ssl_protocols TLSv1.2 TLSv1.3 ; ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384; ssl_stapling on ; ssl_stapling_verify on ; resolver 1.1.1.1 1.0.0.1 8.8.8.8 8.8.4.4 208.67.222.222 208.67.220.220 valid=60s ; resolver_timeout 2s ; include /etc/nginx/conf.d/*.conf ; include /etc/nginx/sites-enabled/*; }
general.conf
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 location = /favicon.ico { log_not_found off ; access_log off ; } location = /robots.txt { log_not_found off ; access_log off ; } location ~* \.(?:css(\.map)?|js(\.map)?|jpe?g|png|gif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ { expires 7d ; access_log off ; } location ~* \.(?:svgz?|ttf|ttc|otf|eot|woff2?)$ { add_header Access-Control-Allow-Origin "*" ; expires 7d ; access_log off ; } gzip on ;gzip_vary on ;gzip_proxied any;gzip_comp_level 6 ;gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
letsencrypt.conf
1 2 3 4 location ^~ /.well-known/acme-challenge/ { root /var/www/_letsencrypt; }
security.conf
1 2 3 4 5 6 7 8 9 10 11 12 add_header X-Frame-Options "SAMEORIGIN" always;add_header X-XSS-Protection "1; mode=block" always;add_header X-Content-Type-Options "nosniff" always;add_header Referrer-Policy "no-referrer-when-downgrade" always;add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline' 'unsafe-eval'" always;add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;location ~ /\.(?!well-known) { deny all; }
注意一下,因为MathJax用到了eval,所以需要加上’unsafe-eval’。否则数学公式将渲染失败。
sites-available/blog.tyokyo320.com.conf
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 server { listen 443 ssl http2; listen [::]:443 ssl http2; server_name blog.tyokyo320.com; root /usr/share/nginx/html/blog.tyokyo320.com/public; ssl_certificate /etc/letsencrypt/live/blog.tyokyo320.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/blog.tyokyo320.com/privkey.pem; ssl_trusted_certificate /etc/letsencrypt/live/blog.tyokyo320.com/chain.pem; include security.conf; location / { try_files $uri $uri / /index.html; } include general.conf; } server { listen 443 ssl http2; listen [::]:443 ssl http2; server_name *.blog.tyokyo 320.com; ssl_certificate /etc/letsencrypt/live/blog.tyokyo320.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/blog.tyokyo320.com/privkey.pem; ssl_trusted_certificate /etc/letsencrypt/live/blog.tyokyo320.com/chain.pem; return 301 https://blog.tyokyo320.com$request_uri ; } server { listen 80 ; listen [::]:80 ; server_name .blog.tyokyo320.com; include letsencrypt.conf; location / { return 301 https://blog.tyokyo320.com$request_uri ; } }
sites-enabled
进入到sites-enabled
里面, 输入以下指令
1 sudo ln -s ../sites-available/blog.tyokyo320.com.conf .
即可’激活’blog.tyokyo320.com.conf
这个网站的配置文件
www/blog.tyokyo320.com/public
将通过hexo g
生成的日志根目录下public的全部内容移动到这里即可完成上传.
HTTPS证书
利用Let’s Encrypt进行证书签名, 由于Let’s Encrypt的签名需要网站可以访问, 所以我们需要先运行起来我们的网站.
如果在内网环境下, 也注意要先配置端口映射. 在docker/nginx
下输入.
1 sed -i -r 's/(listen .*443)/\1;#/g; s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\1/g' sites-available/blog.tyokyo320.com.conf
暂时取消HTTPS的设置, 否则Docker容器无法运行, 然后输入
1 2 3 4 5 6 7 8 9 10 11 12 13 docker run -d -p 80:80 -p 443:443 \ --name nginx \ -v $PWD /conf/security.conf:/etc/nginx/security.conf \ -v $PWD /conf/nginx.conf:/etc/nginx/nginx.conf \ -v $PWD /conf/general.conf:/etc/nginx/general.conf \ -v $PWD /conf/letsencrypt.conf:/etc/nginx/letsencrypt.conf \ -v $PWD /conf.d:/etc/nginx/conf.d \ -v $PWD /sites-enabled:/etc/nginx/sites-enabled \ -v $PWD /sites-available:/etc/nginx/sites-available \ -v $PWD /logs/:/var/log/nginx/ \ -v $PWD /www/:/usr/share/nginx/html \ -v $PWD /run/:/var/run/ \ nginx
运行Docker容器, 进入Nginx容器内部 进行签名的生成
1 2 3 4 5 6 7 8 9 10 11 12 docker exec -it nginx /bin/bash apt-get update && apt-get install software-properties-common certbot python-certbot-nginx openssl dhparam -out /etc/nginx/dhparam.pem 2048 mkdir -p /var/www/_letsencryptchown www-data /var/www/_letsencryptcertbot certonly --webroot -d blog.tyokyo320.com --email tyokyo320@gmail.com -w /var/www/_letsencrypt -n --agree-tos --force-renewal
这里会把HTTPS证书等文件都放到/etc/letsencrypt/live
文件夹里面.
1 2 3 4 5 6 7 8 9 10 docker exec -it nginx /bin/bash root@ee783f0e1ef2:/ root@ee783f0e1ef2:/etc/letsencrypt/live total 16 drwx------ 3 root root 4096 Sep 20 15:31 . drwxr-xr-x 9 root root 4096 Sep 11 13:28 .. -rw-r--r-- 1 root root 740 Sep 11 13:28 README drwxr-xr-x 2 root root 4096 Sep 11 13:28 blog.tyokyo320.com root@ee783f0e1ef2:/etc/letsencrypt/live
然后恢复HTTPS的设置, 重新加载Nginx的配置.
1 2 3 sed -i -r 's/#?;#//g' /etc/nginx/sites-available/blog.tyokyo320.com.conf nginx -t && nginx -s reload
以上, 即可完成Let’s Encrypt的证书配置.
总结
总结一下Nginx容器内部的文件结构,一些自带的文件略
1 2 3 4 5 6 7 8 9 10 11 12 /etc/nginx |-- conf.d |-- dhparam.pem |-- general.conf |-- letsencrypt.conf |-- mime.types |-- nginx.conf |-- security.conf |-- sites-available | `-- blog.tyokyo320.com.conf |-- sites-enabled | `-- blog.tyokyo320.com.conf -> ../sites-available/blog.tyokyo320.com.conf
1 2 3 /var/log/nginx/ |-- access.log `-- error.log
网站文件: /usr/share/nginx/html/
1 2 3 /usr/share/nginx/html/ `-- blog.tyokyo320.com `-- public
外网访问
路由器上设置
的端口映射
. 映射到部署Docker的服务器上.
这里要注意一下端口回流
, 因为NAT的原因, 内网的主机是无法访问公网IP的内网服务器的. 也就是你无法在内网通过域名或公网IP访问到和你在同一个内网下的服务器. 简单的来说就是你PC想和路由器(服务器在路由器下)建立链接, 但是服务器发现目标IP直接是你内网PC的IP, 于是服务器准备直接和你PC进行连接, 这连接就无法建立, 导致无法访问.
解决方法:
采用简单的解决方法, 有些路由器有对端口回流的有处理可以开启, 或者在路由器层次上配置DNS, 将对应的域名解析为内网服务器的IP地址, 更高级的方法就是设置NAT, 将源IP进行修改, 不过一般路由器无法实现.
hexo迁移到另一台电脑
随着blog文章数量的增加,笔记本电脑写日志的时候会相对较卡(笔记本电脑性能不高),于是想在家里写的时候用PC主机写。
迁移大致分为两部分,自己博客文件夹内容(hexo)和主题文件夹(next)。
1 2 3 4 5 6 7 8 9 . └── hexo ├── node_modules ├── public ├── scaffolds ├── source └── themes ├── landscape └── next
自己的博客文件夹(hexo)直接git同步过去就行。但是next是另一个git库,里面是自己一些配置文件包括了背景图片等等。
next库的迁移
git仓库位于个人服务器
笔记本电脑上的操作
笔记本电脑修改next文件夹的下的git文件.git/config
,添加远程链接
1 2 3 [remote "nuc" ] url = nuc-git:/home/git/repositories/Blog/next/.git fetch = +refs/heads/*:refs/remotes/origin/*
git push上传至自己的服务器
1 2 3 4 5 6 7 8 9 git push nuc Enumerating objects: 9, done . Counting objects: 100% (9/9), done . Delta compression using up to 4 threads Compressing objects: 100% (5/5), done . Writing objects: 100% (5/5), 1.99 MiB | 12.65 MiB/s, done . Total 5 (delta 3), reused 0 (delta 0) To nuc-git:/home/git/repositories/Blog/next/.git 2190e49..2a98327 master -> master
PC上的操作
主机PC上先把自己的博客文件夹同步下来
再同步next文件夹,第一次直接git clone
即可
此后再同步只需要在next路径下git pull
即可(第一次克隆后此后都会按照这个路径)
上传至gitea个人仓库转移
笔记本电脑上的操作
笔记本电脑修改next文件夹的下的git文件.git/config
,添加远程链接
1 2 3 [remote "gitea" ] url = http://git.tyokyo320.com/zhangqiang/hexo-next.git fetch = +refs/heads/*:refs/remotes/origin/*
git push上传至自己的服务器
1 2 3 4 5 6 7 8 9 10 11 12 13 git push gitea Enumerating objects: 12543, done . Counting objects: 100% (12543/12543), done . Delta compression using up to 4 threads Compressing objects: 100% (4307/4307), done . Writing objects: 100% (12543/12543), 79.59 MiB | 8.43 MiB/s, done . Total 12543 (delta 8279), reused 12116 (delta 7931) remote: Resolving deltas: 100% (8279/8279), done . remote: . Processing 1 references remote: Processed 1 references in total To http://git.tyokyo320.com/zhangqiang/hexo-next.git * [new branch] master -> master
PC上的操作
主机PC上先把自己的博客文件夹同步下来
再同步next文件夹,第一次直接git clone
即可
此后再同步只需要在next路径下git pull
即可(第一次克隆后此后都会按照这个路径)
参考文章