特别强调一点,修改文件一定要用csvode打开。不然会出现各种莫名其妙的格式问题

Hexo和Hugo

1、Hexo我个人认为最大的优点目前就是主题多,缺点就是生成静态文件 (hexo g) 速度慢。Hexo是基于Nodejs的,有很多插件,但是加载费时。并且当md文档成百的时候,可能hexo g一次几分钟,体验感不好(不过几分钟也还好,不是特别长),Hexo目前貌似也是在进行优化

2、Hugo使用自带的Go html模板实现, 速度快,基本上在 Hexo 上面几分钟,使用 Hugo 只需要十几秒钟。然而Hugo目前主题太少,找不到什么满意的主题。

3、我个人搭建博客比较喜欢漂亮的主题,所以目前用的Hexo。

安装Hexo

步骤

首先选择一个磁盘作为你博客文件的存放位置,然后新建一个文件夹,比如名为 blogtest 的文件夹,创建完后,先不要点进去,在此处点击鼠标右键,选择 Git Bash Here,然后依次输入如下命令,:

# hexo框架的安装
npm install -g hexo-cli

# 等上一个命令完成后,在输入下面的命令
hexo init <新建文件夹的名称> #初始化文件夹
cd <新建文件夹的名称>

npm install # 安装博客所需要的依赖文件

验证

注意:后续的命令均需要在站点目录下(即文件夹内)使用 Git Bash 运行。

等待运行完成,此时文件夹中多了许多文件。 此时 Hexo 框架的本地搭建已经完成了,我们来运行一下看看,命令行依次输入以下命令进行本地验证:

hexo g && hexo s

浏览器中打开 http://localhost:4000 或者 127.0.0.1:4000,可以看到一个网页,说明 Hexo 博客已经成功在本地运行。

主题快速开始(后面的都以Butterfly主题为例)

官方文档:https://demo.jerryc.me/posts/21cfbf15/

官方文档的配置相当详细了,这里只是记录下我的配置过程,以及一些细节坑。对于默认不需要改动的配置就不说了

安裝插件

如果你沒有 pug 以及 stylus 的渲染器,請下載安裝:

npm install hexo-renderer-pug hexo-renderer-stylus --save

这个命令一定要执行,不执行的话后面会出问题。

升级建议

我用的是_config.butterfly.yml这个方法。后续如果没有特殊说明,改动的配置都是_config.butterfly.yml这个文件里的。

验证

执行以下命令,如果发现页面和之前验证的页面不一样了,说明主题配置成功

hexo g && hexo s

生成导航菜单

再次提醒:后续的命令均需要在站点目录下(即文件夹内)使用 Git Bash 运行。

1、生成标签页,分类页,友情链接等等按照文档要求做即可。做完之后,需要将_config.butterfly.yml下面的配置打开,butterfly3.2.0版本是注释掉了,打开之后。再次本地运行验证,就会发现页面右上角出现了几个菜单就算成功了。

关于作者

2、hexo new page about可以生成关于页,和上面生成标签页,分类页一个意思,也可以自定义名字,只要和下面的配置对上号就可以。

清单

注意中文需要自己在这里手动改,改成ch-zn没有用。

#改动的地方
menu:
首页: / || fa fa-home
时间轴: /archives/ || fa fa-archive
标签: /tags/ || fa fa-tags
分类: /categories/ || fa fa-folder-open
清单||fa fa-heartbeat:
- 友人帐 || /link/ || fa fa-link
- 分享 || /share/ || fas fa-share
留言板: /messageboard/ || fas fa-comment-dots
关于作者: /about/ || fas fa-user-tag

留言板

hexo new page messageboard

开启404

_config.butterfly.yml对应的配置打开即可。

# A simple 404 page
error_404:
enable: true
subtitle: '頁面沒有找到'
background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

代码风格

修改_config.butterfly.yml对应的配置,mac比较好看。

#改动的地方
highlight_theme: mac # darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
code_word_wrap: false

社交图标

图标库

https://fontawesome.com/icons?from=io

#改动的地方
social:
fab fa-github: https://github.com/youthlql || GitHub
fab fa-qq: 1826692270 || QQ:1826692270
fa fa-address-card: https://blog.csdn.net/Youth_lql || 我的CSDN

主页文章节选

#改动的地方
index_post_content:
method: 2
length: 500 # if you set method to 2 or 3, the length need to config

文章封面

这里我设置的是封面统一显示在左边

cover:
# display the cover or not (是否顯示文章封面)
index_enable: true
aside_enable: true
archives_enable: true
# the position of cover in home page (封面顯示的位置)
# left/right/both
# 改动的地方
position: left
# When cover is not set, the default cover is displayed (當沒有設置cover時,默認的封面顯示)
default_cover:
- https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

文章页相关配置

文章meta显示

# 改动的地方
post_meta:
page: # Home Page
date_type: both # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
date_format: date # date/relative 顯示日期還是相對日期
categories: true # true or false 主頁是否顯示分類
tags: true # true or false 主頁是否顯示標籤
label: true # true or false 顯示描述性文字
post:
date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
date_format: date # date/relative 顯示日期還是相對日期
categories: true # true or false 文章頁是否顯示分類
tags: true # true or false 文章頁是否顯示標籤
label: true # true or false 顯示描述性文字

文章打赏

# 改动的地方
reward:
enable: true
QR_code:
- img: https://cdn.jsdelivr.net/gh/youthlql/lqlp@v1.0.0/blog/wechat.jpg
link:
text: 微信
- img: https://cdn.jsdelivr.net/gh/youthlql/lqlp@v1.0.0/blog/alipay.jpg
link:
text: 支付宝

头像

# 改动的地方
avatar:
img: https://cdn.jsdelivr.net/gh/youthlql/lqlp@v1.0.0/blog/avatar.jpg
effect: false # 頭像會一直轉圈

主页侧边栏设置

侧边栏排版及内容

# 改动的地方
aside:
enable: true
mobile: true # display on mobile
position: left # left or right
card_author:
enable: true
description:
button:
icon: fab fa-github
text: Follow Me
link: https://github.com/youthlql
card_announcement:
enable: true
content: 这里是公告。
card_recent_post:
enable: true
limit: 10 # if set 0 will show all
sort: date # date or updated
card_categories:
enable: true
limit: 0 # if set 0 will show all
expand: none # none/true/false
card_tags:
enable: true
limit: 40 # if set 0 will show all
color: true
card_archives:
enable: true
type: monthly # yearly or monthly
format: MMMM YYYY # eg: YYYY年MM月
order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
limit: 8 # if set 0 will show all
card_webinfo:
enable: true
post_count: true
last_push_date: true

运行时间

# 改动的地方
runtimeshow:
enable: true
publish_date: 1/27/2020 00:00:00

最新评论

# 改动的地方
newest_comments:
enable: true
limit: 6
avatar: true
leancloud:
enable: false
appId: # leancloud application app id
appKey: # leancloud application app key
serverURL: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
default_avatar: # mp/identicon/monsterid/wavatar/retro/robohash/blank
github_issues:
enable: false
repo:
disqus:
enable: false
forum:
api_key:

如果你用的是Valine的话这三个属性都要填appId,appKey,serverURL,不然显示不出来。

serverURL就是REST API 服务器地址

不蒜子原理

1、不蒜子可以同时网页的UV和PV主要是通过域名来定位的,比如说我现在只有gitee的域名,https://youthlql.gitee.io/。

假设我再将博客放到github上并且自定义域名,那么他网站的UV和PV会重新计算。

2、文章的阅读量也是由不蒜子算的,是通过域名和URL链接来定位是哪篇文章。

评论系统

评论系统和说说功能在我的另一篇文章里有细讲

推荐valine,好用且评论的人不用登陆

# 改动的地方
comments:
# Up to two comments system, the first will be shown as default
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments
use:
- Valine
text: true # Display the comment name next to the button
# lazyload: The comment system will be load when comment element enters the browser's viewport.
# If you set it to true, the comment count will be invalid
lazyload: true
count: true # Display comment count in top_img
# 改动的地方
valine:
appId: 你自己的ID # leancloud application app id
appKey: 你自己的Key # leancloud application app key
pageSize: 10 # comment list page size
avatar: monsterid # gravatar style https://valine.js.org/#/avatar
lang: en # i18n: zh-CN/zh-TW/en/ja
placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
guest_info: nick,mail,link #valine comment header info (nick/mail/link)
recordIP: false # Record reviewer IP
serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
bg: # valine background
emojiCDN: # emoji CDN
enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
requiredFields: nick,mail # required fields (nick/mail)

搜索(algolia)

algolia(放弃了)

很详细的一篇博客:https://blog.csdn.net/qq_35479468/article/details/107335663

上面的文章讲的很详细了,下面对一些细节进行补充

1、这个是根目录的_config.yml文件

algolia:
applicationID: 'your applicationID'
apiKey: 'your apiKey'
adminApiKey: 'your adminApiKey'
indexName: 'your indexName'
chunkSize: 5000

这个配置里的indexName是你之前创建的那个index的名字。

2、每当你上传一篇新的文章,就要使用下面两个命令更新一下索引。

export HEXO_ALGOLIA_INDEXING_KEY=your apiKey
hexo algolia

或者把HEXO_ALGOLIA_INDEXING_KEY配到系统环境变量里,这样就只需要输入hexo algolia命令了

3、刚注册的algolia可能显示的是试用版,它会让你更改计划,你点进去,拉到最下面改成Free版的就行。

本地搜索

# Local search 本地搜索
local_search:
enable: true
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

需要安装插件

npm install hexo-generator-search --save

加速(可选)

Hexo-Blog\themes\Butterfly\source\source\js\local-search.js` 找到如下内容因该是在 `55行`左右
修改 `url: GLOBAL_CONFIG.root + path,` 为 `url: "https://cdn.jsdelivr.net/gh/你GitHub的用户名/你GitHub的用户名.github.io/search.xml",
function search (path) {
$.ajax({
url: "https://cdn.jsdelivr.net/gh/youthlql/youthlql.github.io/search.xml",
dataType: 'xml',
success: function (xmlResponse) {
// get the contents from search data
const datas = $('entry', xmlResponse).map(function () {
return {
title: $('title', this).text(),
content: $('content', this).text(),
url: $('url', this).text()
}
}).get()

字数统计

#改动的地方
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true

同时安装wordcount插件 ,不安装的话运行会报错

npm i --save hexo-wordcount

网站背景图片

#改动的地方
background: url(https://cdn.jsdelivr.net/gh/youthlql/lqlp@v1.0.0/blog/background.jpg)
# 改动的地方
# the banner image of home page
index_img: https://cdn.jsdelivr.net/gh/youthlql/lqlp@v1.0.0/blog/background.jpg

上面两个地方改了之后整个主页就是自定义图片了,个人感觉还挺好看。

文章生成永久url连接

步骤

1、首先安装插件

npm install hexo-abbrlink --save

2、然后改配置

# 改动的地方
url: http://youthlql.gitee.io
root: /
#permalink: :year/:month/:day/:title/
permalink: post/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

效果区别

1、下面这个是默认的配置

permalink: :year/:month/:day/:title/:(http://localhost:4000/2020/04/16/计算机网络-总结/)

2、修改之后

# dec #输出进制:十进制和十六进制,默认为10进制。丨dec为十进制,hex为十六进制
crc16 & hex
https://youthlql.gitee.io/posts/66c8.html

crc16 & dec
https://youthlql.gitee.io/posts/65535.html

crc32 & hex
https://youthlql.gitee.io/posts/8ddf18fb.html

crc32 & dec
https://youthlql.gitee.io/posts/1690090958.html

好处

在以后进行文章评论的合并,不蒜子阅读量的合并上都有用处。

自定义图标

: 这种自定义图标如何实现呢?

阿里阿巴图标库:https://www.iconfont.cn/

用svg的格式,把代码复制下来,然后改一下高度和宽度即可

部署到Gitee

# 改动的地方
deploy:
type: git
repo: https://gitee.com/youthlql/youthlql.git
branch: master

安装发布的插件

npm install hexo-deployer-git --save

直接部署

hexo clean && hexo g && hexo d

几个坑

这部分网上可以搜到一堆,就不细讲了。注意几个问题就行

1、如何创建一个首页访问地址不带二级目录的 pages,如ipvb.gitee.io?

答:如果你想你的 pages 首页访问地址不带二级目录,如ipvb.gitee.io,你需要建立一个与自己个性地址同名的仓库,如 https://gitee.com/ipvb 这个用户,想要创建一个自己的站点,但不想以子目录的方式访问,想以ipvb.gitee.io直接访问,那么他就可以创建一个名字为ipvb的仓库 https://gitee.com/ipvb/ipvb 部署完成后,就可以以 https://ipvb.gitee.io 进行访问了。

2、当要部署的项目与自己的个性地址不一致时,部署完成后存在一些资源访问404?

答:当需要部署的仓库和自己的个性地址不一致时,如:https://gitee.com/ipvb/blog ,生成的pages url 为 https://ipvb.gitee.io/blog ,而访问的资源404,如 https://ipvb.gitee.io/style.css 。这是因为相应配置文件的相对路径存在问题导致的,生成的资源 url 应该为 https://ipvb.gitee.io/blog/style.css 才对。对于不同的静态资源生成器,配置如下:

  • Hugo 配置文件config.toml的baseURL修改如下
baseURL = "https://ipvb.gitee.io/blog"
  • Hexo 配置文件_config.ymlurlroot修改如下:
url: https://ipvb.gitee.io/blog
root: /blog

同时部署到Github

域名绑定

https://yafine-blog.cn/posts/a170.html

注意在域名绑定的时候有一个坑:https://blog.csdn.net/qq_38332436/article/details/81907686

写文章

可配置的属性

https://demo.jerryc.me/posts/dc584b87/

abbrlink不要写

---
title: 计算机网络-总结篇
tags:
- 计算机网络
- 面试
categories:
- 计算机网络
keywords: 计算机网络,计网,面试
description: 计算机网络-总结篇,可以用来期末复习,校招面试等。
cover: 'https://cdn.jsdelivr.net/gh/youthlql/lqlp@v1.0.0/computer_network/logo.jpg'
top_img: 'https://cdn.jsdelivr.net/gh/lql-youth/lqlp@v1.0.0/blog/background.jpg'
# abbrlink: 3905e6f8
date: 2020-04-16 17:21:58
---

上面的abbrlink不要写,这个属性会给你自动生成。你自己写可能会有冲突

文章置顶

安装hexo-generator-index插件

npm install hexo-generator-index --save

你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大,置顶的优先级越大。

参考:

CDN全站加速

参考这篇文章即可

https://plushine.cn/14261.html

笔者亲测百度云很不行,虽然上面文章的作者推荐百度云,但是目前据butterfly群里反馈来看,大部分用百度云都会出现各种各样的问题,所以建议如果需要用cdn的话,可以考虑又拍云

参考这两篇文章即可

diy部分1

页面整体的样式参考:https://blog.lete114.top/article/Butterfly-config.html

diy部分2

参考:https://www.antmoe.com/posts/a811d614/index.html

下面是一些笔者博客用到的功能

标签外挂

1、目前我只引入了功能扩展部分的css

自定义阿里图标

评论系统出现博主/访客(仅限valine)

看这篇文章:https://blog.lete114.top/article/Valine-LeanCloud-Config.html

这里有一个大坑,master和friends进行Md5加密的时候不能用大写字母,不然就会发生只有访客标识,没有博主和小伙伴标识

花瓣飘零

https://yafine-blog.cn/posts/12b4.html