《博客框架学习笔记之hexo》

博客框架

• 常见的博客框架 ： hexo 、WordPress、VuePress、Hugo、Solo、Halo 、Typecho、…

---

博客主题

• 常见的 博客主题 ：jekyll 、Fluid 、Butterfly、Matery、Akina、Muse、Mist、Pisces、Gemini、 Mirages、…

主题：NexT 、Yilia、Melody、mellow、、、、、、、

hexo 主题查找

---

hexo

• 简介

Hexo 是一个基于Node.js的快速、简洁且高效的静态博客框架。Hexo 支持 Markdown 解析文章，在几秒内，即可利用靓丽的主题生成静态网页

hexo 默认主题： —> landscape

• hexo 版本
  

Hexo官网
Hexo中文网

---

安装hexo

• 安装 hexo 的基础依赖 —> git 和 nodejs 的安装
  

• step1: 创建文件夹 personal_blog_yk-ddm, 进入此文件夹
  
• step2: 执行 npm 包管理命令 —> 安装 hexo-cli ( hexo 命令行界面)：cnpm install hexo-cli
  
  
• step3: 查看 hexo 版本 ： hexo -v
  
• step4: 初始化 hexo : hexo init myblog
  
  
• step5: 进入 myblog 文件夹中，开启服务 —> hexo server
  

  关闭服务 —> Ctrl + C

---

将 hexo 部署到 GitHub

• 修改配置文件 _config.yml
  
• 安装deploy-git : npm install hexo-deployer-git --save
  

  执行 hexo clean —-> 清空
  执行 hexo generate —–> 生成静态文章
  执行 hexo deploy ——> 部署发布至 github

• 查看效果
  
  

---

为 hexo 个人博客添加站内搜索

先安装插件 cnpm install hexo-generator-search –save

执行 cnpm install hexo-generator-searchdb –save

修改项目的配置文件 _config.yml

# 添加如下内容：
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题文件夹的 _config.yml 配置文件，设置 Local search 的 enable 为 ture

---

为 个人博客添加 GitHub Corners

GitHub Corners 地址

编辑代码如下

效果展示

---

Butterfly 添加全局吸底Aplayer ( 音乐播放器 )

Butterfly添加全局吸底Aplayer教程

前往 aplayer 官网

---

插件安装

cnpm install hexo-abbrlink --save : 博客链接永久化

npm install hexo-generator-search –save —-> 搜索插件安装

npm i hexo-generator-feed —–> 订阅插件 RSS 安装

---

使用 iconfont 图标

step1: 从 阿里图标 官网 下载 iconfont.css 文件

step2: 将 iconfont.css 文件复制到 hexo 主题theme/source/css/ 中

在主题的配置文件中进行如下配置，引入刚刚存入的 css 文件

设置完毕，即可使用 iconfont icon-csdn1: https://blog.csdn.net/yk_ddm || CSDN

测试查看效果

---

设置 avatar 头像

• 在 主题的 _config.yml 中配置
  

---

草稿 draft 的使用

• hexo new draft draft-test01
  
• 将 草稿文章发布到 post 中 ：hexo publish draft newspapername , 系统会自动删除 _drafts 中对应的草稿文章
  

---

常见操作

语言修改; 配置文件 _config.yml; 默认语言是 en
主题支持三种语言: default(en)、zh-CN (简体中文)、zh-TW (繁体中文)

Front-matter 即 文章开头部分（—–）

Butterfly 主题的使用

书写文章：hexo new newspapername， 注意事项 —> 文章名称不要包含空格，否则会出现文件名称不对应的情况, 此命令以最后一个空格之后的内容作为Markdown文件的名称（例如：我使用 hexo new post 《博客框架 学习笔记 之 hexo》最后得到的Markdown文件名称却为 hexo》）

hexo new [layout] —-> layout 布局方式，默认 post 布局

layout 布局方式：post 、page 、draft

_config.yml : 作为 hexo框架 的配置文件

配置文章的 永久链接 格式，方法如下：第一步，在 _config.yml 配置文件中修改 permalink 的值；第二步，在自定义文章开头书写 category 文章类别

• 查看效果
  
• layout 中 page 的使用
  

取消 分类页、标签页等评论模块, 只需要注释此段代码

extends includes/layout.pug

block content
  #page
    case page.type
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/flink.pug
      when 'categories'
        include includes/page/categories.pug
      default
        include includes/page/default-page.pug

    // 取消 分类页、标签页等评论模块, 只需要注释 以下代码
    //- if page.comments !== false && theme.comments && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

---

遇到的问题

{ err: TypeError: line.matchAll is not a function

• 分析原因：是 node 版本问题, node 12.0.0 以上就没有此问题
  

• 解决： 尝试 将 _config.yml文件 修改一下
  
  

• 浏览器运行查看
  

• problem Two:
  

• 分析原因： 是没有正确安装 hexo-deployer-git
  

• problem Three
  

• 分析原因： 权限问题，我之后采用 ssh 方式之后，解决问题
  
  

• problem fourth : TypeError: Cannot read property 'enable' of undefined
  

• 分析原因： …

• problem
  

• 分析原因： 需要 下载包 hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

执行 cnpm install –save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

theme: butterfly