博客搭建 | SY's Webpage

Prerequisites

工具安装

安装npm
安装hexo

1	npm install install hexo-cli -g #全局安装

仓库搭建

创建github仓库

仓库的格式必须为：<username>.github.io

配置免密连接github

生成ssh密钥

1	ssh-keygen -t ed25519 -f github_id_ed25519 -C "github"

复制公钥到github中
1
xclip -sel clip < ~/.ssh/xxx.pub
测试连接
1
ssh -T git@github.com

如果在生成ssh密钥那一步生成的文件名不是默认的，在测试连接的时候可能会出错，这其中牵扯到openssh中ssh连接时的一些原理，这里不细将，感兴趣的小伙伴可以查看相关资料，通常我的解决办法是使用「~/.ssh/config」文件来管理所有的ssh连接。
1
2
3
4
5
Host github.com
  Hostname github.com
  User git
  preferredAuthentications publickey
  IdentityFile ~/.ssh/github_id_ed25519

命令教程

hexo常见命令

初始化
1
hexo init
新建文章
1
hexo new[n] [layout] <title>

hexo中支持三种不同的layout，分别为post，page，draft，不同的layout将创建不同目录的文件，默认的layout是post，你可以在_config.yml中设置默认的layout。

Layout Path

post source/_posts

page source

draft source/_drafts

Layout	Path
post	source/_posts
page	source
draft	source/_drafts

草稿发布为正式文章
1
hexo publish <filename>
将【source/_drafts/】下的文章移动到【source/_posts】中
清理缓存
1
hexo clean[cl]
启动本地服务器
1
hexo server[s]
-p选项，制定服务器端口，默认为4000
-i选项，指定服务器IP，默认为0.0.0.0
生成静态文件
1
hexo generate[g]
部署网站
1
hexo deploy[d]

npm常见命令

1 2	npm install[i] npm uninstall[un]

上面命令中的[]中的表示前面命令的缩写

博客安装

初始化项目

1	hexo init blog_name

安装相关依赖

npm i

主题配置

安装butterfly主题

1	npm i hexo-theme-butterfly

应用主题

修改根目录下的_config.yml
1
theme: butterfly
优化：删除hexo自带的主题配置文件_config.landscape.yml，以及对应的主题插件
1
npm un hexo-theme-landscape --save

安装pug以及stylus渲染器

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

升级建议
为了减少升级主题后带来的不便，可以将主题文件夹中的_config.yml文件复制到hexo根目录中，同时重新命名为_config.butterfly.yml。以后只需要对_config.butterfly.yml进行配置即可生效。

在下文中，站点配置文件将指代_config.yml，主题配置文件将指代_config.butterfly.yml

页面配置

标签页

创建「source/tags/」目录以及index.md文件

1	hexo new page tags

修改「source/tags/index.md」，添加type: "tags"

---
title: 标签
date: xxxx-xx-xx xx:xx:xx
type: "tags"
---

分类页

创建「source/categories/」目录以及index.md文件

1	hexo new page categories

修改「source/categories/index.md」，添加type: "categories"

---
title: 分类
date: xxxx-xx-xx xx:xx:xx
type: "categories"
---

友情链接

创建「source/link/」目录以及index.md文件

1	hexo new page link

修改「source/link/index.md」，添加type: "link"

---
title: 友情链接
date: xxxx-xx-xx xx:xx:xx
type: "link"
---

前往「source/_data」创建link.yml（如果没有_data目录，请自行创建）

- class_name: 技術支持 🦾
  class_desc: 博客搭建过程中参考的网站    # optional
  link_list: 
    - name: Hexo
      link: https://hexo.io/
      avatar: https://raw.githubusercontent.com/hexojs/logo/master/hexo-logo-avatar.png
      descr: A fast, simple & powerful blog framework
    - name: Jerry
      link: https://butterfly.js.org/
      avatar: https://butterfly.js.org/img/avatar.png
      descr: A Simple and Card UI Design theme for Hexo
- class_name: 技術博客 🤖
  class_desc: 技术分享
  link_list:
    - name: Jinming Hu
      link: https://conanhujinming.github.io/
      avatar: https://conanhujinming.github.io/authors/admin/avatar_hubd2169f75411e26c6f08e041cf104953_98411_270x270_fill_q90_lanczos_center.jpg
      descr: Software Engineer
    - name: Images
      link: https://imageslr.com/
      avatar: https://i.loli.net/2020/02/17/vY49QcyqRlbtB78.jpg
      descr: Images' Blog

插件推荐

网站部署

点击查看教程

安装 hexo-deployer-git Public插件

1	npm install hexo-deployer-git --save

修改站点配置文件

deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]

$\LaTeX$

点击查看教程

hexo中支持MathJax和KaTex，其中MathJax支持的功能多，但是渲染时间长，而KaTex小巧轻快，所以推荐使用KaTex

更换插件

npm un hexo-renderer-marked --save # 卸载 marked 插件
npm un hexo-renderer-kramed --save # 卸载 kramed 插件
npm i hexo-renderer-markdown-it --save # 安装渲染插件
npm install @neilsustc/markdown-it-katex --save # 安装katex插件

修改主题配置文件

katex:
  enable: true
  per_page: false
  hide_scrollbar: true

追加以下选项到站点配置文件

markdown:
 plugins:
   - plugin:
     name: '@neilsustc/markdown-it-katex'
     options:
       strict: false

由于第二步中设置的per_page: false，所以我们在需要渲染 $\LaTeX$ 的文章开头添加katex: true

外挂标签 👍

点击查看教程

详见：Tag Plugins Plus

安装hexo-butterfly-tag-plugins-plus插件

1	npm install hexo-butterfly-tag-plugins-plus --save

考虑到hexo自带的markdown渲染插件hexo-renderer-marked与外挂标签语法的兼容性较差，建议您将其替换成hexo-renderer-kramed

1 2	npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save

添加配置信息到站点配置文件或主题配置文件中

# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true # 开关
  priority: 5 #过滤器优先权
  issues: false #issues标签开关
  link:
    placeholder: /img/link.png #link_card标签默认的图标图片
  CDN:
    anima: https://unpkg.zhimg.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://unpkg.zhimg.com/jquery@latest/dist/jquery.min.js #issues标签依赖
    issues: https://unpkg.zhimg.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
    iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://unpkg.zhimg.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
    tag_plugins_css: https://unpkg.zhimg.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

具体样式和写法可见：基于Butterfly的外挂标签引入以及Butterfly 安装文档(三) 主题配置-1

本地搜索

点击查看教程

安装hexo-generator-search插件

1	npm install hexo-generator-search --save

修改站点配置文件_config.yml

search:
  path: search.xml
  field: post
  content: true

在主题配置文件_config.butterfly.yml中开启搜索

1
2
3

local_search:
-  enable: false
+  enable: true

RSS订阅

点击查看教程

安装hexo-generator-feed插件

1	npm install hexo-generator-feed --save

配置_config.yml

feed:
  type: atom
  path: atom.xml
  limit: 20

配置_config.butterfly.yml

文章链接

点击查看教程

安装 hexo-abbrlink插件

1	npm install hexo-abbrlink --save

修改站点配置文件_config.yml中的permalink属性

permalink: posts/:abbrlink.html    # or permalink: posts/:abbrlink/
abbrlink:
  alg: crc32
  rep: hex

字数统计

点击查看教程

安装hexo-wordcount插件

1	npm install hexo-wordcount --save

修改主题配置文件

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

Customization

页面美化 👗

一图流 👈

点击查看教程

配置自定义样式文件【source/css/custom.css】

/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

配置站点配置文件

取消头图和页脚图的加载项，避免冗余加载

# The banner image of home page
index_img: 

# Footer Background
footer_bg: false

设置背景图

1	background: url(image_address)

个人卡片渐变色

点击查看教程

在【source/css/custom.css】自定义样式文件中引入下面的代码：

/* 侧边栏个人信息卡片动态渐变色 */
#aside-content > .card-widget.card-info {
  background: linear-gradient(
    -45deg,
    #e8d8b9,
    #eccec5,
    #a3e9eb,
    #bdbdf0,
    #eec1ea
  );
  box-shadow: 0 0 5px rgb(66, 68, 68);
  position: relative;
  background-size: 400% 400%;
  -webkit-animation: Gradient 10s ease infinite;
  -moz-animation: Gradient 10s ease infinite;
  animation: Gradient 10s ease infinite !important;
}
@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 黑夜模式适配 */
[data-theme="dark"] #aside-content > .card-widget.card-info {
  background: #191919ee;
}

/* 个人信息Follow me按钮 */
#aside-content > .card-widget.card-info > #card-info-btn {
  background-color: #3eb8be;
  border-radius: 8px;
}

文章双侧栏显示

点击查看教程

安装hexo-butterfly-article-double-row插件

1	npm i hexo-butterfly-article-double-row --save

在网站配置文件中添加以下项

1 2	butterfly_article_double_row: enable: true

修复显示bug：在自定义样式文件custom.css中添加以下代码

/* 翻页按钮居中 */
#pagination {
  width: 100%;
  margin: auto;
}

wowjs动画

点击查看教程

安装hexo-butterfly-wowjs插件

1	npm install hexo-butterfly-wowjs --save

在站点配置文件或主题配置文件中添加以下选项

wowjs:
  enable: true #控制动画开关。true是打开，false是关闭
  priority: 10 #过滤器优先级
  mobile: false #移动端是否启用，默认移动端禁用
  animateitem:
    - class: recent-post-item #必填项，需要添加动画的元素的class
      style: animate__zoomIn #必填项，需要添加的动画
      duration: 2s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
      delay: 1s #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
      offset: 100 #选填项，开始动画的距离（相对浏览器底部）
      iteration: 1 #选填项，动画重复的次数
    - class: card-widget
      style: animate__zoomIn
  animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
  wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
  wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

小修小补

设置文章大标题前面的图标

beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f863' # '\f0c1'
  title-prefix-icon-color: '#F47466'

设置水平分割线图标

hr_icon:
  enable: true
  icon: '\f2dc' # the unicode value of Font Awesome icon, such as '\3423'
  icon-top: -10px

设置通知弹窗

1
2
3

snackbar:
  enable: true
  position: top-left

设置中英文之间添加空格

1
2
3

pangu:
  enable: true
  field: site # site/post

打开字数统计（需安装hexo-wordcount插件）

1 2	wordcount: enable: true

代码块显示编程语言类型文字居中

1
2
3

#article-container figure.highlight .highlight-tools .code-lang {
  left: 50%;
}

设置在阅读文章时侧边栏只显示toc

全局设置：配置站点配置文件
1
2
toc:
style_simple: true # for post

特定的文章配置：设置文章的front matter

1 2	toc: true # equivalent style_simple: true toc: false # equivalent style_simple: false

将导航栏中的搜索图标位置放在右边

1
2
3

#nav #search-button {
  float: right;
}

关闭鼠标靠近头像时头像旋转效果

1
2
3

.avatar-img img:hover {
  transform: unset;
}

设置夜间模式专用背景

[data-theme="dark"] #web_bg {
  position: fixed;
  z-index: -999;
  width: 100%;
  height: 100%;
  background: url(/img/dark.jpg);
  background-attachment: local;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Prerequisites

工具安装

仓库搭建

命令教程

博客安装

初始化项目

主题配置

页面配置

标签页

分类页

友情链接

插件推荐

网站部署

LaTeX\LaTeXLATE​X

外挂标签 👍

本地搜索

RSS订阅

文章链接

字数统计

Customization

页面美化 👗

一图流 👈

个人卡片渐变色

文章双侧栏显示

wowjs动画

小修小补

$\LaTeX$