Hexo使用笔记

发表于 更新于 分类于

说明

记录一下搭建 hexo 博客中的一些笔记

Hexo 安装

网上的教程很详细了，这里简单记一下

在 D:\Files 打开 git bash

1
2
npm install -g hexo-cli
hexo init hexo-blog
1
2
3
4
5
zhf@DESKTOP-2EL8QVU MINGW64 /d/Files
$ cd hexo-blog/

zhf@DESKTOP-2EL8QVU MINGW64 /d/Files/hexo-blog
$ npm install

hexo s 启动

配置 git 

1
2
3
4
5
6
7
8
git init
git remote add origin https://github.com/zhouhongfa/hexo-blog.git

git config user.email 'zhouhongfa1996@gmail.com'
git pull origin master
git add .
git commit -m 'init'
git push --set-upstream origin master

next 主题配置

先 fork next主题github仓库 ，(这样就能保存你的配置了，需要进入 next 目录来推，如果有更新，则用 pull request拉更新的内容，可参考 github上fork了别人的项目后，再同步更新别人的提交)

1
2
cd hexo-blog
git clone https://github.com/zhouhongfa/hexo-theme-next.git themes/next

主题wiki

github Pages部署

到 github 创建一个 zhouhongfa.github.io 公开项目

_config.yml 配置如下

1
2
3
deploy:
  type: git
  repo: https://github.com/zhouhongfa/zhouhongfa.github.io.git

同步到 github 上

1
2
hexo clean
hexo deploy

头像配置

主要配置 avatar 属性

1
2
3
4
5
6
# 配置头像路径
url: /images/avatar.jpg
# If true, the avatar would be dispalyed in circle.为true时会将头像显示为圆形的
rounded: true
# If true, the avatar would be rotated with the cursor.为true时，鼠标放在头像上会旋转~
rotated: true

侧边栏配置

社交栏邮箱正确配置

如下

1
2
3
social:
  GitHub: https://github.com/zhouhongfa || github
  E-Mail: mailto:zhouhongfa1996@gmail.com || envelope

侧边栏位置

在 _config.yml 中配置 sidebar 属性

1
position: right

默认展开所有目录

在 _config.yml 中配置 toc 属性

1
expand_all: true

搜索配置

参考博客

记录一下

1
npm install hexo-generator-searchdb --save

编辑博客配置文件：_config.yml

增加以下

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件：_config.yml

修改以下

1
2
3
# Local search
local_search:
  enable: true

重新部署

点击爱心效果

这里我用的 next 主题比较新，可能会不一样
请参考

记录一下

在 themes/next/source/js 目录下创建 clicklove.js 文件

内容如下

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

修改 themes\next\layout\_layout.swig 文件

在最后的</body>下加上以下

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/clicklove.js"></script>

分类和标签

参考博客

记得要在 主题配置文件中解开注释

大概在 158行

menu 属性下

如何设置read more?

用以下语法即可

1
<!--more-->

图片引用问题

开启 _config.yml 下的

1
post_asset_folder: true

然后将需要用到的图片放置到 文章同名目录下

引用语法如下

1
{% asset_img  1566638486203.png test%}

然后首页和文章内都能正常访问啦

语言问题

需要根据主题里的文件名进行配置

如 next 主题里是 zh-CN ，就在 _config.yml 配置为 zh-CN

是配置 hexo 的配置

大概在 11 行

我是如下配置的 

1
2
3
language: 
- zh-CN
- en

评论功能

这里用 Gitalk 来实现、

参考

额，注意配置里的是 repo name ，也就是配置仓库名字即可，而不是克隆的地址

看板娘设置

参考

1
git clone https://github.com/galnetwen/Live2D.git

复制 live2d 目录到 themes/next/source下

修改 themes/next/layout/_layout.swig 文件

  • 在 head 标签增加以下
1
<link rel="stylesheet" href="/live2d/css/live2d.css" />
  • 在 body 标签增加以下
1
2
3
4
5
<div id="landlord">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    <div class="hide-button">隐藏</div>
</div>
  • 增加以下脚本
1
2
3
4
5
6
7
8
9
10
<!-- 看板娘 -->
<script type="text/javascript">
    var message_Path = '/live2d/'
    var home_Path = 'https://zhouhongfa.github.io/'  //此处修改为你的域名，必须带斜杠
</script>
<script type="text/javascript" src="/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/live2d/js/message.js"></script>
<script type="text/javascript">
    loadlive2d("live2d", "/live2d/model/tia/model.json");
</script>

效果如下

引用其他文章

举例 引用 Hello.md

1
{% post_link Hello %}

hexo 常用命令

1
2
3
4
5
hexo clean：清除缓存文件和已生成的静态文件
hexo g：生成静态文件
hexo s：启动服务器。默认情况下，访问网址为： http://localhost:4000/
hexo d：部署网站
hexo v：显示 Hexo 版本

写作

官方文档

你可以执行下列命令来创建一篇新文章或者新的页面。

1
$ hexo new [layout] <title>

您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

Layout

Hexo 有三种默认布局：post、page 和 draft。在创建者三种不同类型的文件时，它们将会被保存到不同的路径；而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

草稿

刚刚提到了 Hexo 的一种特殊布局：draft，这种布局在建立时会被保存到 source/_drafts 文件夹，您可通过 publish 命令将草稿移动到 source/_posts 文件夹，该命令的使用方式与 new 十分类似，您也可在命令中指定 layout 来指定布局。

1
$ hexo publish [layout] <title>

草稿默认不会显示在页面中，您可在执行时加上 --draft 参数，或是把 render_drafts 参数设为 true 来预览草稿。

0%
隐藏