hexo搭建之路
hexo是一个快速、简洁高效的博客框架,适合想象丰富的博主们自由打造博客空间。
我在配置好基础的框架后,开始根据网络上各位大佬们的博客进行的模仿改造,现将一系列的搭建过程记录下来,希望越来越好。
博客现状
待完成:
- 优化网站加载速度,会优化搜索排名!
- 背景音乐的添加(没考虑好,加了可能比较鸡肋)
已完成:
- hexo基础建站
- 更换背景图片
- 本地搜索
- 搭建 影像馆 页面
- 站点收录,目前还存在一些小问题
- 域名的购买及配置
- 加入豆瓣读书、影评界面
- 网站的站点收录
- 添加 只言片语 页面
- 如何添加置顶
- 如何通过点击放大网站图片
- 优化网站字体
- 博客访问量统计
- 粒子时钟 + 鼠标点击烟火特效
- 背景娘 ,加个简单的背景娘,太花了分散注意力
- 加评论,
现在用的是Valine评论,考虑换一个好用点的,现在换成了waline - 加个友链~~~
- 图片链接 用的是 Typora+Picgo,可以自动上传,且访问稳定
- 文章末尾加版权信息
- 美化归档/标签/分类页
- hexo 多平台同步使用,坚果云同步文件夹
- 随时上锁日志
写在前头
hexo是一个快速、简洁且高效的博客框架。写作上支持markdown语法,同时支持非常多第三方功能插件,可拓展性很好。
我的博客基于hexo,选用的是Next主题中Gemini风格,是一款简约风格的主题。
我想让自己专注于内容,尽少的被花哨的功能迷昏了眼,虽然DIY起来确实是很欢乐~~
有四点需要提前说明:
- 以下的绝大多数功能都是已经开发好的功能插件,安装后简单配置一下即可,使用起来很简单,我这里不再多赘述,附上网络上已有的靠谱链接,再写一下使用中需要注意的地方
- 其次就是很多功能如访问量、评论、本地搜索等在Next主题下的config配置文件下已经被提前写好了,你需要做的就是找到他们,把默认的false改成true即可。其他的主题可能config配置文件下没有集成那么多功能,需要去安装相对应的插件🙄
- 有些功能如看板娘、影像馆等如果自己去加一些代码,也不要畏难。耐心+细心 跟着网上的教程也很快的
- 不同版本的next配置文件会发生一些变化,比如swig格式改成njk格式,配置文件的路径也变化,但是万变不离其宗,照搬代码的时候不要太死板!!
- 再深度的改造就需要自己有比较好的前端开发能力了,可以在前期的copy过程中多留心,去思考,后面摸清楚之后结合自己的喜爱去设计自己的内容
基础建站
具体过程参考下文:
更换背景图片
目前我这里只是简单的换了一个背景图片,没有加什么特效,也木有视频作为背景,后面看情况再做优化
更换背景图片的做法是,进入themes\next\source\css\main.styl
,我在这里选用的是next主题
在最底下插段代码,参数可以根据参数具体含义和背景图片自行调整 (如果没有找到这个 main.styl 目录,直接去主题文件夹下 sources 找 css 文件,在主要的 styl 下附上这段代码,也是一样的效果)
body {
background:url(/images/your-picture.jpg); //这里把图片直接放在images下
background-repeat: no-repeat;
background-attachment:fixed; //不重复
background-size: cover; //填充
background-position:50% 50%; //放在屏幕正中间
}
本地搜索
修改 Hexo/theme/next/_config.yml
文件
ctrl+f 搜索全局 输入local search
,修改配置项,具体如下
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false
搭建影像馆界面
小丁的博客是我最早期关注的博客之一,我的博客里有很多模仿他的地方,非常感谢
具体过程参考下文:
站点收录
检查自己的网站是否被收录,在搜索因素输入 site:ychch.top
即可
如下图,有搜索结果就是被收录了😁:
这样就是没有被收录😥:
如果你用的主题更新的很频繁的话,其实这都是在主题配置文件里的功能选项,直接在里面添加就好了
我用的是最新版的Next主题,主题下的_config.yml都已经留好了功能位置
在常用的google、bing和百度下填好自己网站的验证码,将enable baidu push从 false改成true,如图所示:
# SEO Settings
index_with_subtitle: true
# Automatically add external URL with Base64 encrypt & decrypt.
exturl: false
# If true, an icon will be attached to each external URL
exturl_icon: true
# Google Webmaster tools verification.
# See: https://developers.google.com/search
google_site_verification: 自己填
# Bing Webmaster tools verification.
# See: https://www.bing.com/webmasters
bing_site_verification: 自己填
# Baidu Webmaster tools verification.
# See: https://ziyuan.baidu.com/site
baidu_site_verification: 自己填
传统的收录教程也附上:
再附上三个平台的站点管理链接:
添加 只言片语 页面
目前用的是 artitalk.js,其实不太好用,加速速度也挺慢,界面我也不是很喜欢,后面有时间精力再换一个~~
配置起来倒是很简单,新建一个页面,hexo new page
自己给个名字,我给的是 shuoshuo,直接在新建页面下输入:
<!-- 引用 artitalk -->
<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<!-- 存放说说的容器 -->
<div id="artitalk_main"></div>
<script>
new Artitalk({
appId: '', // Your LeanCloud appId
appKey: '', // Your LeanCloud appKey
pageSize: 10
})
</script>
appId
和appKey
需要自己去申请账号等获得,跟着教程去一步步设置即可
更高级的配置方法可以自己的配置,具体过程参考下文:
博客访问量统计
修改 Hexo/theme/next/_config.yml
文件, ctrl+f
搜索全局 输入busuanzi_count,修改配置项,具体如下:
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
enable: ture
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: false
post_views_icon: fa fa-eye
当然也有其他的工具也可以做访客统计,但是有些繁琐,我就没有花时间去探索了
有一点值得注意,hexo s部署在本地预览效果的时候,统计数会不正常,当把博客部署到云端时即可恢复正常
这里需要注意:需要保存好源码,不然容易统计量清零
博客添加置顶页面
无需下载插件,添加一段代码即可
修改 Hexo/yourblog
文件夹下的node_modules/hexo-generator-index/lib/generator.js
添加如下代码 (其实仔细看看,也很好懂) :
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) {
if(a.top == b.top) return b.date - a.date;
else return b.top - a.top;
}
else if(a.top && !b.top) {
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date;
});
使用时:在需要置顶的文章添加top属性即可,数字越大 置顶越靠前
具体过程参考下文:
通过点击放大图片
修改 Hexo/theme/next/_config.yml
文件
ctrl+f 搜索全局 输入FancyBox,修改配置项,具体如下
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
fancybox: true
优化网站字体
具体过程参考下文:
鼠标点击特效
https://zxiaosi.cn/archives/c776502.html
粒子时钟
https://zxiaosi.cn/archives/c776502.html
超萌看板娘上线
看板娘有的插件可以搞得功能很多,换装、拍照、换人物等,但我个人觉得还挺分散注意力的,所以我的博客里就固定放只小猫咪吧
流程也很简单:
- 安装hexo-helper-live2d
npm install --save hexo-helper-live2d
- 下载一个模型
从中挑选一个模型 https://huaji8.top/post/live2d-plugin-2.0/ ,执行下载
npm install live2d-widget-model-tororo //假设你选择的看板娘是白色小猫咪tororo
- 修改根目录下的_config.yml配置文件
#看板娘 Live2D动画
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-tororo
display:
position: left
width: 150
height: 300
hOffset: 100
mobile:
show: true
dialog:
enable: true
hitokoto: true
个人觉得我这个配置还是挺舒服的,如何自定义自己的配置,请看参考资料中的 详细中文文档说明 和 详细参数配置,参考资料:
waline评论系统
评论系统折腾了很久,之前配置的是valine,配好之后好久之后才发现根本用不了,我又花了好久去折腾,按理说不应该呀,搞了好久,也不知道问题出在了哪,人当时裂开了。
只能选择换个评论系统试试,又去调研了一番
综合比较之后选择了waline,这是基于valine开发的一套系统,最近两年才开始普遍使用起来,外观也很清爽大方
关于一些比较问题,这个博客讲得特别好,我基本是跟着他做的,就不赘述了,放上大神博客链接
配置过程分为服务器和客户端两方面,服务器就是 博主使用的评论系统后台,管理评论;客户端就是在博客里配置好,方便游客评论
根据以下链接做就行,真的很快: waline官网快速上手教程
这里的客户端配置如果用HTML引入,那么每个页面都要加这段代码,那就需要到POST里面去改,挺麻烦的,那么就用第三方插件,安装完后按照要求在config_yml配置后,发现会出问题…..
$ hexo s
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:5000 . Press Ctrl+C to stop.
Unhandled rejection Template render error: (/home/finisky/themes/next/layout/post.swig)
Template render error: (/home/finisky/themes/next/layout/post.swig) [Line 41, Column 16]
Template render error: (/home/finisky/themes/next/layout/post.swig) [Line 54, Column 17]
Template render error: (/home/finisky/themes/next/layout/post.swig)
Template render error: (/home/finisky/themes/next/layout/_partials/head/head-unique.swig) [Line 10, Column 23]
Template render error: (/home/finisky/themes/next/layout/post.swig) [Line 3, Column 3]
Template render error: (/home/finisky/themes/next/layout/post.swig)
Template render error: (/home/finisky/themes/next/layout/_partials/header/index.swig) ......
后面发现了问题,就是next版本问题,裂开,按照官方推荐的解决方式做更新升级:先下载最新版,再做升级
后面单出一篇文章讲hexo升级需要注意的事项吧,也挺折腾的~~~
加个友链
友链有助于交朋友和互相推广,next主题 _config.yml
配置文件支持友链添加,如代码所示:
# Blog rolls
links_settings:
icon: fa fa-globe
title: 友链请留言
# Available values: block | inline
layout: inline
links:
#Title: https://example.com
ychch's blog: https://ychch.top
效果就是会在边栏下方显示,其实挺简洁的,我个人比较喜欢
但是考虑到友链如果一多,边栏就会变得很繁重,不美观,没有专门的友链页面的话,都不知道去哪里留言
个人又不想专门搞一个页面放友链,所以我就把友链作为放在了 个人页面里的一个模块呈现
Markdown语法天然支持内嵌html,所以我们直接加一段代码即可
<div class="post-body">
<div id="links">
<style>
.links-content{
margin-top:1rem;
}
.link-navigation::after {
content: " ";
display: block;
clear: both;
}
.card {
width: 45%;
font-size: 1rem;
padding: 10px 20px;
border-radius: 4px;
transition-duration: 0.15s;
margin-bottom: 1rem;
display:flex;
}
.card:nth-child(odd) {
float: left;
}
.card:nth-child(even) {
float: right;
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.card a {
border:none;
}
.card .ava {
width: 3rem!important;
height: 3rem!important;
margin:0!important;
margin-right: 1em!important;
border-radius:4px;
}
.card .card-header {
font-style: italic;
overflow: hidden;
width: 100%;
}
.card .card-header a {
font-style: normal;
color: #2bbc8a;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
}
.card .card-header .info {
font-style:normal;
color:#a3a3a3;
font-size:14px;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
</style>
<div class="links-content">
<div class="link-navigation">
<div class="card">
<img class="ava" src="https://finisky.github.io/images/avatar.png" />
<div class="card-header">
<div>
<a href="https://finisky.github.io/">Finisky Garden</a>
</div>
<div class="info">Easy doesn’t enter into grown-up life.</div>
</div>
</div>
....自由添加
</div>
</div>
以后每加一个友链,在下面复制一段即可:
<div class="card">
<img class="ava" src="https://finisky.github.io/images/avatar.png" />
<div class="card-header">
<div>
<a href="https://finisky.github.io/">Finisky Garden</a>
</div>
<div class="info">Easy doesn’t enter into grown-up life.</div>
</div>
</div>
效果如链接所示:
添加版权信息
hexo-next主题如何在文章末尾添加版权信息呢?
修改 Hexo/theme/next/_config.yml
文件
ctrl+f 搜索全局 输入 creative_commons ,把 post 从 false 改为 true 即可,具体如下
美化归档/标签/分类页
参考这位博主
随时上锁日志
配置参考如下:
自动上传图片链接
smms图床,国内外都可以稳定访问,且有足够的免费空间
PicGo可以安装compress插件,以做压缩图片之用
配置参考如下:
疑难杂症
hexo在使用过程中陆陆续续有不少的问题,不想在每一次百度之后就抛之脑后,所以在这里记录一下…
主要包括有:
- hexo d 推送至远程库时报错
- hexo-douban库爬取错误
hexo d 推送至远程库时报错
报错信息如下:
对git不是很熟悉,网上针对这个问题有很多不同的解法,试了好几个,都没有成功,其中按照以下步骤成功解决了这个问题
步骤如下:
- 删除主目录下的.deploy_git文件夹
- 运行这个命令:git config –global core.autocrlf false
- hexo clean & hexo g & hexo d
- 打开自己的网站,验证是否成功
其中git config –global core.autocrlf false的意思是,将core.autocrlf配置成false,即不开启自动转换功能。不懂……
hexo-douban库爬取错误
安装了第三方库hexo-douban爬取数据时总是发生错误
需要把node.js版本降成12版本,高版本不支持
直接卸载当前的node,安装12版本的即可
hexo-douban开发者已停止维护了,如果还是要用这个库的话,暂时只有这个解决办法