Hexo 小结

** Hexo **
hexo 是一个十分简洁的框架,上手也相对容易。


使用前提

Node.js
Git

使用npm安装Hexo

1
2
npm install -g hexo-cli

创建项目

1
2
3
4
hexo init <folder>
cd <folder>
npm install

常用指令

1
2
3
4
5
hexo new [layout] <title>	—————————— [layout] => [post, draft, page]
hexo publish [layout] <title>
hexo generate
hexo server

hexo 配置部署

在 _config.yml 中 deploy 下进行配置

1
2
3
4
5
deploy: 
type: git
repo: <url>
branch: master

开始部署

安装部署依赖

1
2
npm install hexo-deployer-git --save

开始部署

1
2
hexo deploy

Markdown 语法

hexo 是使用 Markdown 编辑文章的,使用简洁,详见 Markdown 官方文档

hexo 常用语法

引用站内文章

1
{% post_link 文章文件名(不要后缀) 文章标题(可选) %}

hexo 扩展


主题

移步 hexo主题 选择主题

开启图片上传

在配置文件中启用设置

1
post_asset_folder: true

然后安装相关插件

1
npm install hexo-asset-image --save

创建文章会生成同名文件夹,只需要将图片放在该路径中,使用时使用相对路径引用即可,eg:

1
<div align=center>![test.png](article/test.png)

开启搜索

需要安装 hexo-generator-searchdb,安装后到配置文件中开启相关选项即可

1
npm install hexo-generator-searchdb --save

启用 CodePen

安装 hexo-codepen

1
npm install hexo-codepen --save

使用方法(详见 hexo-codepen):

1
{% codepen userId|anonymous|anon slugHash theme [result [height [width]]] %}

hexo-blog-encrypt

详见 hexo-blog-encrypt

开启进度条(NexT)

在主题配置中

1
pace: true

回顶部百分比(NexT)

在主题配置中

1
scrollpercent: true

文章缩略图(NexT)

通常可以在文章折叠上方插入图片,或者使用文章模板定义图片

1
photos: imgUrl

注意事项

  • 使用 git clone 修改 hexo 主题时,如果是在 hexo 项目中,删掉主题中的 .git 文件
  • 使用 hexo new page 生成单页面
  • 修改语言时,依据当前主题的 languages 中的语言进行修改,每个主题都会有所差异
  • 使用 table 表格时,回出现产生多余空白的情况,这时可以将标签修改为紧凑模式,或者使用如下格式编写
    1
    2
    3
    {% raw %}
    html tags & content
    {% endraw %}

常见问题

部署时报 protected branch hook declined

需要在 Github 中设置部署分支的 Allow force pushes



universe

作者

晓策

发布于

2018-07-25

更新于

2023-05-25

许可协议

评论