准备工作

安装npm、GIt

安装hexo

新建hexo文件夹

gitlab中新建项目。同步gitlab项目到该文件夹。

hexo init初始化该文件夹为hexo目录。删除或者转移hexo根目录下的.gitignore文件

安装主题

如果需要用GitHub、gitlab同步源代码，或者需要用各种pages发布网页，就用下载压缩包的方式安装主题（我的方式）。

应用主题

修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly

theme: butterfly

安装主题依赖

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

主题配置文件独立出来

复制的是主题的 _config.yml，到hexo根目录（注意不要覆盖hexo自身的配置文件），并命名为_config.butterfly.yml

以后修改_config.butterfly.yml文件即可配置butterfly主题。使用了 _config.butterfly.yml，主题文件夹中的 _config.yml 将不会有效果。

此后，建议不再动主题文件夹内任何文件。

主题有大版本更新导致主题config内容结构变化的，升级说明中一般会说。config内容结构发生变化后需要重新复制、粘贴、配置_config.butterfly.yml。

主题普通更新无主题config内容结构变化的，直接删除就的主题文件夹，下载新的主题包解压过去就行

部署到cloudflare pages

新建cloudflare pages，选择连接到gitlab，选择好gitlab项目，给cloudflare pages取名，并在根目录（高级）中填写

hexo/public。

设置永久链接

安装hexo-abbrlink插件，

npm install hexo-abbrlink –save

修改hexo配置文件 config.yml 文件中的永久链接：


permalink: posts/:abbrlink.html #建议

#or

permalink: posts/:abbrlink/

在hexo配置文件 config.yml中添加abbrlink设置

# abbrlink config
abbrlink:
  alg: crc16      # Algorithm used to calc abbrlink. Support crc16(default) and crc32
  rep: dec        # Representation of abbrlink in URLs. Support dec(default) and hex
  drafts: false   # Whether to generate abbrlink for drafts. (false in default)
  force: false    # Enable force mode. In this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had an abbrlink. (false in default)
  writeback: true # Whether to write changes to front-matters back to the actual markdown files. (true in default)

内嵌html网页

在hexo\source文件夹下新建html文件夹，html文件夹下放置各个静态网页文件夹

在hexo配置文件 config.yml中的```

skip_render:下添加

skip_render:
  - html/** # 渲染时跳过文件夹下所有子文件夹和文件

报错记录

在家里台式机一切正常，同步到笔记本hexo s的时候报错

Asset render failed: css/index.css

原因：笔记本的hexo目录文件夹名称有#字符。

外挂css、js

在butterfly的独立配置文件_config.butterfly.ym中，找到inject，添加head中添加外挂css路径，bottom中添加外挂js路径

inject:
  head:
    - <link rel="stylesheet" href="/css/XXX.css">
    # 自定义css
    # - <link rel="stylesheet" href="/css/style.css?1">
    # 静态文件后面加个  ?任意内容  可以在每次更新之后用户自动重新请求.
    # 例如添加 ?1 ,在修改此文件后改成 ?2 ,用户访问你的网站时,不会使用本地的缓存,而是请求新的内容。没修改的话就不用动。
  bottom:
    - <script src="/js/XXX.js"></script>
    # 自定义js
    # - <script src="/js/script.js?1"></script>
    # 引入多个文件就直接往下复制一行改一下文件名即可，如下：
    # - <script src="/js/script1.js?1"></script>
    # - <script src="/js/script2.js?1"></script>

彩虹加载进度条

引入pace.css

.pace {  
  -webkit-pointer-events: none;  
  pointer-events: none;  
  -webkit-user-select: none;  
  -moz-user-select: none;  
  user-select: none;  
}  
  
.pace-inactive {  
  display: none;  
}  
  
.pace .pace-progress {  
  background: #e90f92;  
  position: fixed;  
  z-index: 2000;  
  top: 0;  
  right: 100%;  
  width: 100%;  
  height: 2px;  
}  
  
.pace .pace-progress-inner {  
  display: block;  
  position: absolute;  
  right: 0px;  
  width: 100px;  
  height: 100%;  
  box-shadow: 0 0 10px #e90f92, 0 0 5px #e90f92;  
  opacity: 1.0;  
  -webkit-transform: rotate(3deg) translate(0px, -4px);  
  -moz-transform: rotate(3deg) translate(0px, -4px);  
  -ms-transform: rotate(3deg) translate(0px, -4px);  
  -o-transform: rotate(3deg) translate(0px, -4px);  
  transform: rotate(3deg) translate(0px, -4px);  
}  
  
.pace .pace-activity {  
  display: block;  
  position: fixed;  
  z-index: 2000;  
  top: 15px;  
  right: 15px;  
  width: 14px;  
  height: 14px;  
  border: solid 2px transparent;  
  border-top-color: #e90f92;  
  border-left-color: #e90f92;  
  border-radius: 10px;  
  -webkit-animation: pace-spinner 400ms linear infinite;  
  -moz-animation: pace-spinner 400ms linear infinite;  
  -ms-animation: pace-spinner 400ms linear infinite;  
  -o-animation: pace-spinner 400ms linear infinite;  
  animation: pace-spinner 400ms linear infinite;  
}  
  
@-webkit-keyframes pace-spinner {  
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }  
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }  
}  
@-moz-keyframes pace-spinner {  
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }  
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }  
}  
@-o-keyframes pace-spinner {  
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }  
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }  
}  
@-ms-keyframes pace-spinner {  
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }  
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }  
}  
@keyframes pace-spinner {  
  0% { transform: rotate(0deg); transform: rotate(0deg); }  
  100% { transform: rotate(360deg); transform: rotate(360deg); }  
}  
/* 在下面修改进度条外观 */  
.pace .pace-progress {  
  background: #1ef4fbec; /*进度条颜色*/  
  height: 3px;/* 进度条厚度 */  
}  
.pace .pace-progress-inner {  
  box-shadow: 0 0 10px #1ef4fbce, 0 0 5px #1ecffbd0; /*阴影颜色*/  
}  
.pace .pace-activity {  
  border-top-color: #1edafbe5;	/*上边框颜色*/  
  border-left-color: #1ef4fbec;	/*左边框颜色*/  
}

引入pace.min.js，

PACE — Automatic page load progress bars

在线引入

- <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>

本地引入

将以上js文件下载到source/js文件夹中，

- <script src="/js/pace.min.js"></script>

字体压缩

使用Fontmin-app软件进行字体提取和压缩

使用在线字体

免费商用字体和 WebFonts 字体 CDN - ZeoSeven Fonts (ZSFT)

remixIcon图标

新窗口打开导航栏站内链接

在引入的js文件里面添加

'/html/' 可修改为要匹配的字符串

/*浏览器新窗口中打开导航栏包含/html/字符的网页链接*/
//拦截点击事件防止pjax处理导致的仅第一次点击生效
document.addEventListener('click', function(e) {
  const a = e.target.closest('a');
  if (a) {
    const href = a.getAttribute('href');
    if (href && href.includes('/html/')) {
      // 强制设置属性确保生效
      a.target = '_blank';
      // 阻止事件继续传播
      e.stopImmediatePropagation();
    }
  }
}, true); // 使用捕获阶段确保优先执行

站点logo常驻显示

G:\Blog\hexo\themes\zhrq95\nav.pug文件

原代码为

if globalPageType === 'post'
  a.nav-page-title(href=url_for('/'))
    span.site-name=(page.title || config.title)

把上面显示site-icon的语句加在这个if条件里

if globalPageType === 'post'
  a.nav-page-title(href=url_for('/'))
    img.site-icon(src=url_for(theme.nav.logo) alt='Logo')
    span.site-name=(page.title || config.title)

独立设置每层标题icon

引入的css文件中添加

/*独立设置每层标题icon*/
/*有独立设置颜色需求时添加属性title_prefix_icon_color: 即可*/ 
.container.post-content h1::before {
    font-family: 'remixicon';
    content: "\ede6";
}
.container.post-content h2::before {
    font-family: 'remixicon';
    content: '\ede7';
}
.container.post-content h3::before {
    font-family: 'remixicon';
    content: '\ede8';
}
.container.post-content h4::before {
    font-family: 'remixicon';
    content: '\ede9';
}
.container.post-content h5::before {
    font-family: 'remixicon';
    content: '\edea';
}
.container.post-content h6::before {
    font-family: 'remixicon';
    content: '\edeb';
}

图片加上边框

引入的css文件中添加

/*图片加边框*/
.container img {
    border-radius: 10px;
    border: 1px #B3D0CE dashed;
}
/*留言板图片不加边框*/
.container img[src*="envelope"]{ /*选择每一个src属性的值包含子字符串"envelope"的元素*/
    border: 0px;
}

调整页脚高度

引入的css文件中添加

/*调整页脚高度*/
#footer-wrap {
    padding: 10px 10px;
}

copyright字体大小设置

引入的css文件中添加

/*copyright字体大小设置*/
#post .post-copyright {
    font-size: 14px;
}

正文段落缩进，行间距设置

引入的css文件中添加


/*正文段落缩进2字符，行间距设置为10px*/
.container p {
    text-indent: 2em; /*正文段落缩进2字符，符合中文习惯*/
    margin: 0 0 10px; /*行间距设置为10px*/
}

站点标题居中显示

原代码中站点标题和站点logo都是在导航栏最左侧显示，不好看。可以用下面代码使站点标题居中显示，站点logo还维持靠左显示

引入的css文件中添加

/*站点标题居中显示*/
.site-name {
  position: relative;
  left: 50%;
}
/*可选，解决右侧菜单也居中的问题
#menus {
  margin-left: auto;
}*/

文章页文章标题居中

引入的css文件中添加

/*文章标题居中*/
#post-info {
    text-align: center;
}

Hexo安装指南

准备工作

部署到cloudflare pages

设置永久链接

内嵌html网页

报错记录

外挂css、js

彩虹加载进度条

字体压缩

使用在线字体

remixIcon图标

新窗口打开导航栏站内链接

站点logo常驻显示

独立设置每层标题icon

图片加上边框

调整页脚高度

copyright字体大小设置

正文段落缩进，行间距设置

站点标题居中显示

文章页文章标题居中