hexo - 标签 - 菠菜眾長

个人博客从 Hexo 迁移至 Hugo

Lruihao — Sun, 03 Oct 2021 15:27:58 +0800

电脑升级 win 11 后，分盘操作存在 bug, 然后又不小心把装代码的盘格式化了，虽然都有备份到 github, 但是当时为了省事，hexo Node 安装的很多以来插件都没有备份，现在又下载不到了，所以 hexo 博客没办法完整复原，另外，早就觉得基于 Node 的 hexo 实在有些臃肿，且博客内容多了以后部署太慢，就干脆乘机换了好了，经过一段时间寻找，最终选择了基于 Go 的 hugo, 记录一下迁移过程及待办事项。

Hugo 准备

概念

Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.

那 hugo 基于编译语言 GO 构建，对于静态页面的构建肯定是碾压 hexo 的存在，其官方标语也是很直白 "The world’s fastest framework for building websites", 作为先后使用过 hexo 和 hugo 的我来说，这确实名副其实。

gohugo

安装

hugo 提供了很多种安装方式，Git, Docker, Binary.
个人电脑使用二进制安装是最方便快捷的，无需安装其他依赖。
到 Hugo Releases 下载对应的 windows 操作系统版本的 Hugo 二进制文件，玩就要玩全的，所以我就选择了扩展版本，此次选择的最新版为 hugo_extended_0.88.1_Windows-64bit.zip, 然后自行解压安装即可。

生成站点

使用 Hugo 快速生成站点，比如希望生成到 /path/to/site 路径：

1

hugo new site /path/to/site

站点目录结构：

▸ archetypes/    # 配置文章模板，相当于 hexo 的 scaffolds
▸ content/       # 文章页面内容，相当于 hexo 的 source
▸ data/          # 可存放一些 yaml, json, toml 格式的数据
▸ layouts/       # 页面布局源码，改造主题可不动主题源码
▸ static/        # 静态文件存放
  config.toml    # 站点配置文件，相当于 hexo 的 _config.yml

创建文章

注：路径要写以 content/ 为根目录的相对路径

1

hugo new path/fileName

添加主题

添加主题的方式选用 Git 子模组的形式，为了日后快速升级，避免在使用 hexo 中因大量魔改 next 主题而导致难以升级的困扰。
精挑细选最终选择了 ~~LoveIt~~ => FixIt

1
2


git init
git submodule add https://github.com/Lruihao/FixIt.git themes/FixIt

在 config.toml 添加 ~~theme = “LoveIt”~~

1

theme = "FixIt"

在本地启动网站

使用以下命令启动网站：

1

hugo serve --disableFastRender

去查看 http://localhost:1313

hugo build

使用以下命令生成静态文件，然后自己可手动选择部署到 github pages 或 COS 等服务器

1

hugo --minify

写作指北

Todo list

本站源码备份 https://github.com/Lruihao/hugo-blog

原来 hexo 做了大量的美化和扩展功能，迁移到 hugo 想尽可能多的保留。取之精华，去其糟粕。

Base

迁移 hexo 所有文章内容
迁移 hexo 所有页面内容

hexo-theme-next @modified LRH

Lruihao — Thu, 21 Mar 2019 16:43:19 +0000

危险

如无必要，不再更新！（2019.09.13）
今晚我做出了一个慎重的决定，由于博主时间精力有限，需要更多的时间来工作和学习。所以我将放弃对 next 的主题的自定义修改，next 主题官方已经更新到了 7.0+的版本，喜欢 next 主题风格的朋友可以在 github 更新。
我这也算是上古版本了，版本差距实在过大，所以我也将放弃博客使用主题的更新。
以下仍为当前博客使用主题，lib 资源已打包 github。

基于 hexo-theme-next 6.0+ 的 Pisces 模板做的 DIY 扩展性设计（部分兼容 next 其他几种模板）。主要是一些 custom style 还有一些第三方的 js。修改的地方太多也有点小乱就不提 PR 了。
modified 官方 Demo => https://theme-next.org
记录一下折腾过程，以后备份恢复博客也好方便自己。本文之前的美化修改请见 hexo 标签。
主题中若有遗漏第三方插件或应用的 key 及 id 值等请修改为自己对应的值

主要的几个自定义文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


_config.swig                                 #主题配置文件 相关账户信息自己注册替换
\layout\custom\head.swig                     #在头部自定义加入标签
\layout\custom\google_adsense.swig           #谷歌广告模块，内有注释暂时弃用
\layout\_layout.swig                         #主布局
\layout\_macro\post.swig                     #文章布局
\layout\_macro\post-copyright.swig           #文章版权
\layout\_macro\siderbar.swig                 #侧栏模板
\layout\_third-party\copy-code.swig          #复制按钮
\layout\_partials\comments.swig              #评论主模板
\layout\_partials\footer.swig                #底部模板#该模块在 layout.swig 引入，用于在 body 自定义标签
\layout\_partials\footer_custom.swig         #footer 自定义文件
\layout\_third-party\custom.swig             #该模块在 layout.swig 引入用于在 body 自定义标签
\source\css\_custom\customs.styl             #主要用户自定义样式表
\source\fonts\                               #引入了一些我的手写体及外部字体
\scripts\qcloudcdn.js                        #腾讯云 cos 桶刷新缓存的脚本，不需要可删掉 [^1]

初步安装

安装整个改过的主题，然后下载相应的 lib 资源解压放入 source 文件夹

1
2


cd hexo
git clone https://github.com/Lruihao/hexo-theme-next themes/next

主题配置文件_config.yml, 选择主题

1

theme: next

lib 下载 http://github.com/Lruihao/hexo-theme-next/releases/tag/v6.9.1

更新内容

更多自定义详见源码

links 模板

自定义友链模板，打开hexo\themes\next\layout\新建links.swig文件，写下以下内容后保存。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129


{% extends '_layout.swig' %}
{% import '_macro/sidebar.swig' as sidebar_template %}

  {% block title %}{#
  #}{% set page_title_suffix = ' | ' + title %}{#

  #}{% if page.type === "categories" and not page.title %}{#
    #}{{ __('title.category') + page_title_suffix }}{#
  #}{% elif page.type === "tags" and not page.title %}{#
    #}{{ __('title.tag') + page_title_suffix }}{#

  #}{% elif page.type === "photos" and not page.title %}{#
  #}{{ __('title.photos') + page_title_suffix }}{#

  #}{% else %}{#
    #}{{ page.title + page_title_suffix }}{#
  #}{% endif %}{#
#}{% endblock %}

{% block page_class %}page-post-detail{% endblock %}

{% block content %}


    {##################}
    {#### PAGE BLOCK ###}
    {##################}

      {% include '_partials/page-header.swig' %}
      {#################}
      {#### PAGE BODY ###}
      {#################}

      


          {% for svg,link in site.data.links %}

              
                {% if link.avatar %}
                  
                {% else %}
                  
                    
                  
                {% endif %}
                @{{ link.nickname }}
              
            
          {% endfor %}
        
        {{ page.content }}
      

      

      {#####################}
      {#### END PAGE BODY ###}
      {#####################}
    
    {% include '_partials/breadcrumb.swig' %}
    {######################}
    {#### END PAGE BLOCK ###}
    {######################}
  

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

{% block script_extra %}
  {% include '_scripts/pages/post-details.swig' %}
{% endblock %}

若未使用懒加载请将模板中的data-original属性改为src
若懒加载无法加载预览图请手动添加src="/images/loading.gif"
若 fancybox 显示 alt 内容请更换 fancybox2 或者将 alt 属值删除

然后hexo n page links新建一个页面文章配置写下如下内容：

1
2
3
4


---
title: 友情链接
layout: links
---

然后在links页面文件夹下面新建文件夹_data，再在里面新建links.yml，内容如下

1
2
3
4
5
6
7
8


- nickname: 博採眾長
  avatar: http://lruihao.cn/images/avatar.png
  site: http://lruihao.cn
  info: 一个菜鸟的博客
- nickname:                 #友链名称
  avatar:                   #友链头像
  site:                     #友链地址
  info:                     #友链说明

备案信息自定义

1
2
3
4
5
6
7
8


## -------------------------------------------------------------
## footer_custom Settings
## -------------------------------------------------------------
beian:
  enable: true
  gov: 湘公网安备 43030402000254 号
  recordcode: 43030402000254
  icp: 湘 ICP 备 18020535 号

文字抖动特效

1

 class="shaky">（づ●'◡'●) づ ❥内容区

（づ●'◡'●) づ ❥内容区

左下角微信公众号

1

\source\css\_custom\customs.styl

Chat Services

共 chatra,tidio,daovoice 三个选项，三选一

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


## Chatra Support
## See: https://chatra.io
## Dashboard: https://app.chatra.io/settings/general
chatra:
  enable: false
  async: true
  id: ## visit Dashboard to get your ChatraID
  #embed: ## unfinished experimental feature for developers, See: https://chatra.io/help/api/#injectto

## Tidio Support
## See: https://www.tidiochat.com
## Dashboard: https://www.tidiochat.com/panel/dashboard
tidio:
  enable: false
  key: ## Public Key, get it from Dashboard, See: https://www.tidiochat.com/panel/settings/developer

#在线客服
daovoice: true
daovoice_app_id: xxxx   ## http://www.daovoice.io/

pdf 和 Mermaid 解析模块

pdf 传送门

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


pdf:
  enable: false
  ## Default height
  height: 500px
  pdfobject:
    cdn: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js
    #cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js

## Mermaid tag
mermaid:
  enable: false
  ## Available themes: default | dark | forest | neutral
  theme: forest
  cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
  #cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

模仿 csdn 转发样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


...
   
+    {% if post.repost %}
+      转
+    {% endif %}
     {{ post.title | default(__('post.untitled'))}}
   
 {% else -%}
+  {% if post.repost %}
+    转
+  {% endif %}
   {{- post.title -}}
...

1
2
3
4
5
6
7
8


.repost {
  color: #5acc79;
  border: 1px solid #e7f4df;
  border-radius: 20px;
  padding: 2px 5px;
  font-size: 15px;
  font-weight: 500;
}

1
2
3
4


---
title: xxxx
repost: true
---

预览

热度页面

打开hexo\themes\next\layout新建 top.swig 文件，写下如下内容保存：

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109


{% extends '_layout.swig' %}
{% import '_macro/sidebar.swig' as sidebar_template %}

  {% block title %}{#
  #}{% set page_title_suffix = ' | ' + title %}{#

  #}{% if page.type === "categories" and not page.title %}{#
    #}{{ __('title.category') + page_title_suffix }}{#
  #}{% elif page.type === "tags" and not page.title %}{#
    #}{{ __('title.tag') + page_title_suffix }}{#

  #}{% elif page.type === "photos" and not page.title %}{#
  #}{{ __('title.photos') + page_title_suffix }}{#

  #}{% else %}{#
    #}{{ page.title + page_title_suffix }}{#
  #}{% endif %}{#
#}{% endblock %}

{% block page_class %}page-post-detail{% endblock %}

{% block content %}


    {##################}
    {#### PAGE BLOCK ###}
    {##################}

      {% include '_partials/page-header.swig' %}
      {#################}
      {#### PAGE BODY ###}
      {#################}


        {{ page.content }}
      

      
      
      
      

      {#####################}
      {#### END PAGE BODY ###}
      {#####################}
    
    {% include '_partials/breadcrumb.swig' %}
    {######################}
    {#### END PAGE BLOCK ###}
    {######################}
  

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

{% block script_extra %}
  {% include '_scripts/pages/post-details.swig' %}
{% endblock %}

其中第 36 行改成你自己的 leancloud 的 appid 和 appkey, 比如我的是在主题配置文件里面的 valine 配置下，所以我就写成theme.valine.appid。和我一样就不需要修改，其他自行配置。

然后hexo n page top新建一个页面文章配置写下如下内容，limit 表示显示篇数：

1
2
3
4
5


---
title: 热度
layout: top
limit: 20
---

复制按钮样式

本来只想简单美化一下变成 night 样式的，后来写完发现 3dbtn 也挺喜欢的。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


codeblock:
  ## Manual define the border radius in codeblock
  ## Leave it empty for the default 1
  border_radius: 5
  ## Add copy button on codeblock
  copy_button:
    enable: true
    ## Show text copy result
    show_result: true
    ## Style: 'light,night,flat,3dbtn' is currently available, leave it empty or light is default theme
    style: night

模仿知乎卡片式链接

Lruihao — Fri, 15 Mar 2019 15:21:39 +0000

模仿知乎的卡片式链接，idea 来自 [兰州小红鸡]

源码

2021/10/2 1:29 更新

这是一种后加载，创建linkcard.js放到source/js/src/，然后在next\layout\_macro\post.swig中引用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


function cardLink() {
  let $cardLinks = document.querySelectorAll('.card-link');
  if ($cardLinks.length === 0) {
    return;
  }
  //插入样式
  let $linkStyle = document.createElement('style');
  $linkStyle.innerHTML =
    '.card-link,.card-link:hover{text-decoration:none;border:none!important;color:inherit!important}.card-link{position:relative;display:block;margin:1em auto;width:390px;box-sizing:border-box;border-radius:12px;max-width:100%;overflow:hidden;color:inherit;text-decoration:none}.ztext{word-break:break-word;line-height:1.6}.card-link-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-image:url(/images/card-link-bg.jpg);background-repeat:no-repeat;-webkit-filter:blur(20px);filter:blur(20px);background-size:cover;background-position:center}.card-link,.card-link:hover{text-decoration:none;border:none!important;color:inherit!important}.card-link-content{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:inherit;background-color:rgba(246,246,246,0.88)}.card-link-text{overflow:hidden}.card-link-title{display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;max-height:calc(16px * 1.25 * 2);font-size:16px;font-weight:500;line-height:1.25;color:#1a1a1a}.card-link-meta{display:flex;margin-top:4px;font-size:14px;line-height:20px;color:#999;white-space:nowrap}.card-link-url{display: inline-flex;align-items: center;}.card-link-imageCell{margin-left:8px;border-radius:6px}.card-link-image{display:block;width:60px;height:60px;border-radius:inherit}';
  document.querySelector('body').appendChild($linkStyle);
  //渲染 DOM
  for (let $cardLink of $cardLinks) {
    $cardLink.innerHTML = `${$cardLink.innerText}${$cardLink.href}`;
  }
}
window.onload = () => {
  cardLink();
};

使用

1
2

<script type="text/javascript" src="/js/src/card-link.js">script>

html 链接写法，a 标签加上class="card-link"

`1`	`Lruihao 博客`

Lruihao 博客 https://github.com/Lruihao/lruihao.github.io

利用腾讯云对象存储 COS 桶托管 hexo 博客

Lruihao — Tue, 22 Jan 2019 14:57:08 +0000

本以为 coding pages 与腾讯云合作后会更好，没想到正是这种初期 bug 不断，速度也是非常慢。比 gitee, 甚至 github 都要慢很多了。所以决定放弃 coding 了，本想挂到云服务器上，但是这个云服务器只续费了半年，可能不会再续费，前几天看到用腾讯云的 cos 桶 xml 制作动态相册的文章，知道了对象存储这个玩意，腾讯云 COS 提供免费 50G 的存储空间，还有 CDN 加速服务，我觉得是个不错的选择，部署后发现速度还挺好。
适用于 hexo, hugo 等静态博客的部署。

创建存储桶

打开腾讯云控制台–云产品–存储–对象存储，然后创建存储桶。

开启静态网站设置

在基础配置打开静态网站（关掉强制 https)

绑定域名

SSL 设置

域名解析，添加记录

去 dns 服务商添加域名解析记录 CNAME 指向上面的域名

hexo 设置

安装插件

1

npm install hexo-deployer-cos --save

站点配置文件

1
2
3
4
5
6
7


deploy:
  type: cos
  bucket: yourBucketName #cos 桶名称
  appId: yourAppId #cos 桶名称后数字
  secretId: yourSecretId  #云 API 密钥
  secretKey: yourSecretKey #云 API 密钥
  region: yourRegion #所属地域

发布还是一样的

1
2


hexo clean
hexo g -d

结果类似于

CDN 刷新

每次更新博客内容完后，都要登陆腾讯云 CDN–缓存刷新，手动刷新一下 CDN。

用脚本在每次更新后刷新

安装

1

npm install qcloud-cdn-node-sdk --save

创建qcloudcdn.js放入script文件夹

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


const qcloudSDK = require('qcloud-cdn-node-sdk');

qcloudSDK.config({
  secretId: '你的 ID',
  secretKey: '你的密钥'
});

qcloudSDK.request(
  'RefreshCdnDir',
  {
    'dirs.1': 'http://博客地址'
  },
  (res) => {
    console.log(res);
  }
);

自动 CDN 刷新配置（推荐）

进入腾讯云，找到函数计算 -> CDN 缓存刷新函数 -> 创建 CDN 缓存刷新函数
修改 index.js 内容后重新部署

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79


'use strict';

const CosSdk = require('cos-nodejs-sdk-v5');
const CdnSdk = require('./common/CdnSdk');
const CdnRefreshTask = require('./common/CdnRefreshTask');
const { getParams, getObjectUrl, logger, getLogSummary } = require('./common/utils');

exports.main_handler = async (event, context, callback) => {
  /**
   * parse param from event and process.env
   */
  const { objects, cdnHosts, secretId, secretKey, token } = getParams(event);

  logger({
    title: 'param is parsed success, param as follow: ',
    data: { objects, cdnHosts, event }
  });
  /**
   * init cos instance
   */
  if (!secretId || !secretKey || !token) {
    throw new Error(`secretId, secretKey or token is missing`);
  }

  const cdnSdkInstance = new CdnSdk({ secretId, secretKey, token });
  const cosInstance = new CosSdk({
    SecretId: secretId,
    SecretKey: secretKey,
    XCosSecurityToken: token
  });

  const taskList = objects.map(({ bucket, region, key }) => {
    /* 变更内容-START */
    const purgeUrls = [];
    cdnHosts.forEach((host) => {
      const tempUrl = getObjectUrl({
        cosInstance,
        bucket,
        region,
        key,
        origin: `${/^(http\:\/\/|https\:\/\/)/.test(host) ? '' : 'https://'}${host}`
      });
      purgeUrls.push(tempUrl);
      // 如果以 /index.html 结尾，则增加目录首页/。
      // 例如 https://www.xxxx.com/index.html, 则增加 https://www.xxxx.com/。
      if (tempUrl.lastIndexOf('/index.html') == tempUrl.length - 11) {
        purgeUrls.push(tempUrl.substr(0, tempUrl.length - 10));
      }
    });
    return new CdnRefreshTask({
      cdnSdkInstance,
      urls: purgeUrls
    });
    /* 变更内容-END */
  });

  const taskResults = [];
  for (const task of taskList) {
    const results = await task.runPurgeTasks();
    taskResults.push(...results);
  }

  logger({
    title: 'cdn refresh full logs:',
    data: taskResults
  });

  const { status, messages } = getLogSummary(taskResults);

  logger({
    messages: messages.map((item) => item.replace(/\,\ /g, '\n'))
  });

  if (status === 'fail') {
    throw messages.join('; ');
  } else {
    return messages.join('; ');
  }
};

在搜索、文章底部、侧栏添加最近文章模块

Lruihao — Wed, 16 Jan 2019 17:50:52 +0000

首先在主题配置文件添加以下关键字

1
2
3
4
5
6
7
8


recent_posts:
  enable: true
  search: true
  post: false
  sidebar: false
  icon: history
  title: 近期文章
  layout: block

侧栏

在 next/layout/_macro/sidebar.swig 中的 if theme.links 对应的 endif 后面。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{% if theme.recent_posts.enable and theme.recent_posts.sidebar %}


     
     {{ theme.recent_posts.title }}
   
   
     {% set posts = site.posts.sort('-date') %}
     {% for post in posts.slice('0', '3') %}

         {{ post.title }}
       
     {% endfor %}
   
 
{% endif %}

搜索结果处添加

找到路径H:\hexo\themes\hexo-theme-next\layout\_partials\search下localsearch.swig文件
把

修改成以下内容（这里显示 15 篇）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


 id="local-search-result">
  {% if theme.recent_posts.enable and theme.recent_posts.search %}
     style="text-align: center;padding: 3px 0 0;">
      style="margin-top: 20px;font-size: 18px;font-weight: 600;border-bottom: 1px solid #ccc;">
        class="fa fa-{{ theme.recent_posts.icon }}" aria-hidden="true">
       {{ theme.recent_posts.title }}
     
      style="margin: 0;padding: 0;list-style: none;">
       {% set posts = site.posts.sort('-date') %}
       {% for post in posts.slice('0', '15') %}
         
            href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}
         

       {% endfor %}
     
    
  {% endif %}

文章尾部添加

把代码加在H:\hexo\themes\hexo-theme-next\layout\_macro\post.swig里的相应位置（我加在 tags 后）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


{% if not is_index and theme.recent_posts.enable and theme.recent_posts.post %}
   style="text-align: center;padding: 10px 0 0;">
    style="margin: 60px 0px 10px;font-size: 18px;border-bottom: 1px solid #eee;">
      class="fa fa-{{ theme.recent_posts.icon }}" aria-hidden="true">
     {{ theme.recent_posts.title }}
   
    style="margin: 0;padding: 0;list-style: none;font-size: 11px;">
     {% set posts = site.posts.sort('-date') %}
     {% for post in posts.slice('0', '5') %}
          href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }} 
     {% endfor %}
   
  
{% endif %}

其他

可尝试将-date改为-update

hexo 插件及 next 内置样式集

Lruihao — Sat, 24 Nov 2018 16:54:09 +0000

2021/10/2 更新
博客已迁移至 Hugo, 插件演示不适用，已删除。
让文章写的好看又简洁又好用的插件！hexo 完整的标签列表，next 插件列表

hexo 插件

hexo-lazyload-image

1

npm install hexo-lazyload-image --save

First add configuration in _config.yml from your hexo project.

1
2
3
4


lazyload:
  enable: true
  onlypost: false
  loadingImg: # eg ./images/loading.gif

hexo-ruby-marks

不支持ruby新标签的浏览器将显示rp中的内容。

1

博採眾長（ lruihao.cn）

博採眾長（ lruihao.cn）

插件使用

1

npm i hexo-ruby-marks

1

{% ruby _**base**_|_**top text**_ %}

hexo-pwa

1

npm install --save hexo-pwa

You can configure this plugin in _config.yml.（配置完即可使用不许单独设置manifest.json文件及配置，插件生成）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


pwa:
  manifest:
    path: /manifest.json
    body:
      name: hexo
      short_name: hexo
      icons:
        - src: /images/android-chrome-192x192.png
          sizes: 192x192
          type: image/png
        - src: /images/android-chrome-512x512.png
          sizes: 512x512
          type: image/png
      start_url: /index.html
      theme_color: '#ffffff'
      background_color: '#ffffff'
      display: standalone
  serviceWorker:
    path: /sw.js
    preload:
      urls:
        - /
      posts: 5
    opts:
      networkTimeoutSeconds: 5
    routes:
      - pattern: !!js/regexp /hm.baidu.com/
        strategy: networkOnly
      - pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
        strategy: cacheFirst
      - pattern: !!js/regexp /\//
        strategy: networkFirst
  priority: 5

hexo-tag-dplayer

1

npm install hexo-tag-dplayer --save

1

{% dplayer key=value ... %}

key can be

1
2
3
4
5
6
7
8


dplayer options:
    'autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited' : bool options, use "yes" "y" "true" "1" "on" or just without value to enable
    'preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser' : string arguments
    'volume', 'maximum' : number arguments
container options:
    'width', 'height' : string, used in container element style
other:
    'code' : value of this key will be append to script tag

1

{% dplayer "url=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=https://api.prprpr.me/dplayer/" "pic=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

hexo-tag-aplayer

1

npm install --save hexo-tag-aplayer

1

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

标签参数

title : 曲目标题
author: 曲目作者
url: 音乐文件 URL 地址
picture_url: （可选）音乐对应的图片地址
narrow: （可选）播放器袖珍风格
autoplay: （可选）自动播放，移动端浏览器暂时不支持此功能
width:xxx: （可选）播放器宽度（默认：100%)
lrc:xxx: （可选）歌词文件 URL 地址

当开启 Hexo 的文章资源文件夹功能时，可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中，然后直接引用：

1
2
3


{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

{% aplayer "你离开了南京，从此没人和我说话" "李志" "https://cdn-1256932288.cos.ap-chengdu.myqcloud.com/files/nanjing.mp3" "https://p2.music.126.net/UuSe-Vc6rS7JtRJSQgDU2g==/2323268069553116.jpg?param=300x300" %}

hexo-pdf

pdf 传送门

hexo-filter-flowchart（流程图）

语法

1

npm install --save hexo-filter-flowchart

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


```%flow #去掉%号
st=>start: Start|past:>https://lruihao.cn[blank]
e=>end: End:>https://www.lruihao.cn[blank]
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>/hexo/nextplugin.html
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```

hexo-spoiler

1

npm install hexo-spoiler --save

If hexo can’t detect this plugin automatically, you need to modify the plugins section of [path_to_your_site]/_config.yml manually, like:

1
2


plugins:
  - hexo-spoiler

1

{% spoiler [text] %}

It will pixelate your text, and click to reveal. Click again to hide your text again. But you need to add manually if you want line breaks after/before it.

When you writes:

1
2
3
4
5


{% spoiler text %}
{% spoiler ~~text~~ %}
{% spoiler *text* %}
{% spoiler **text** %}

{% spoiler **hello welcome to 博採眾長！** %}

宅音乐侧栏播放器插件

体验源码

目前在 next 中可能引起部分 css 冲突，建议在 next 中使用在单个页面中。
依赖于 jQuery，一行 js 可以引入播放器插件。

caniuse

使用

1
2
3
4
5
6


{% caniuse feature @ periods %}

{% can feature @ periods %}

feature : Search for the feature you want on https://caniuse.com, then click on the hash sign to the left of the search result heading and you will get the unique name of this feature.
periods : Select the browser versions to display. Supported values: past_1, past_2, past_3, past_4, past_5, current, future_3, future_2, future_1. If this value is empty, the default value 'current' will be used.

栗子

Caniuse without periods

1

{% caniuse fetch %}

Caniuse with current period

1

{% can sharedarraybuffer @ current %}

Caniuse with future periods

1

{% caniuse loading-lazy-attr @ future_3,future_2,future_1 %}

Caniuse with past periods

1

{% caniuse link-rel-modulepreload @ past_1,past_2,past_3,past_4,past_5 %}

Include Raw

This tag include any raw content into your posts. Path is relative to your site source directory.

1

{% include_raw '_data/path/to/file.html' %}

Let’s create include-raw.html file in _data directory under site root directory with following content:

1

Any raw content may be included with this tag.

Then in any post we can use this content with include_raw tag:

1

{% include_raw '_data/path/to/include-raw.html' %}

Any raw content may be included with this tag.

button

more info

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{% button url, text, icon [class], [title] %}

{% btn url, text, icon [class], [title] %}

url     : Absolute or relative path to URL.
text    : Button text. Required if no icon specified.
icon    : FontAwesome icon name (without 'fa-' at the begining). Required if no text specified.
[class] : FontAwesome class(es): fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
          Optional parameter.
[title] : Tooltip at mouseover.
          Optional parameter.

{% btn #, Text & Large Icon & Title, home fa-fw fa-lg, Title %}

```

Mermaid

more info

example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


{% mermaid gitGraph: %}
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
checkout master
commit
merge newbranch
{% endmermaid %}

video

Usage

1

{% video url %}

Examples

1
2


{% video https://example.com/sample.mp4 %}
{% video /path/to/your/video.mp4 %}

tab 选项卡

“tab"为选项卡的名称，可以自定义，数字是几表示从第几个选项卡开始。非必须，若数值为-1 则隐藏选项卡内容。查看更多

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


{% tabs Unique name, [index] %}

Any content (support inline tags too).

{% endtabs %}

Unique name   : Unique name of tabs block tag without comma.
                Will be used in #id's as prefix for each tab with their index numbers.
                If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
                Only for current url of post/page must be unique!
[index]       : Index number of active tab.
                If not specified, first tab (1) will be selected.
                If index is -1, no tab will be selected. It's will be something like spoiler.
                Optional parameter.
[Tab caption] : Caption of current tab.
                If not caption specified, unique name with tab index suffix will be used as caption of tab.
                If not caption specified, but specified icon, caption will empty.
                Optional parameter.
[@icon]       : FontAwesome icon name (without 'fa-' at the begining).
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{% tabs tab,2 %}

this is tab1


this is tab2


this is tab3

{% endtabs %}

数值为-1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{% tabs 选项，-1 %}

**选项 1**


**选项 2**


**选项 3**

{% endtabs %}

名字写在选项里面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{% tabs Fourth unique name %}

**This is Tab 1.**


**This is Tab 2.**


**This is Tab 3.**

{% endtabs %}

note 便签

主题配置文件搜索 note, 可设置风格和图标是否显示。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


# Note tag (bs-callout).
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  border_radius: 15
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

写法

1

{% note default %}

default

类型还有以下几种 {% endnote %} {% note primary %}

primary

内容 {% endnote %} {% note success %}

success

内容 {% endnote %} {% note info %}

info

内容 {% endnote %} {% note warning %}

warning

内容 {% endnote %} {% note danger %}

danger

内容 {% endnote %} {% note %}

不填

内容 {% endnote %} {% note danger no-icon %}

danger no-icon

内容 {% endnote %}

1
2

### 引用（文本居中）

{% cq %} there are test words {% endcq %}

1
2
3
4
5
6
7



### [Font Awesome 图标](https://www.runoob.com/font-awesome/fontawesome-tutorial.html)
> Font Awesome 是一套绝佳的图标字体库和 CSS 框架。
> Font Awesome 字体为您提供可缩放矢量图标，它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式。
> 要使用 Font Awesome 图标，请在 HTML 页面的 部分中添加以下行：

#### 1、国内推荐 CDN

``` #### 2、海外推荐 CDN

next 已经引用了，可以直接用，比如：

动态图标

代码块等

1
2
3


[language] [title] [url] [link text]

code snippet

1
2


-  printf("Hello World!");
+  printf("Hello_World!");

iframe 在文章中插入 iframe。

1

{% iframe url [width] [height] %}

Todo list

已完成
未完成

1
2
3
4
5
6
7
8
9



 已完成
 未完成




-  已完成
-  未完成

Label

主题配置文件中打开

1
2


# Label tag.
label: true

@前面的是 label 的名字，后面的是要显示的文字

1
2
3


{% label default@default %}

primary success info warning danger

其他

包括小色块、左侧色条、右侧色条、上方色条、数字色块（需要自定义样式）

next添加支持pdf

Lruihao — Fri, 09 Nov 2018 12:51:48 +0000

最新的 next 主题已经更新了支持 PDF 功能，~~写法也和链接写法一样~~，可是我没有更新，我按 github 上那个 readme 试了一下好像不可以，所以用了另外一种插件的方法。

iframe(推荐)

1

 src="/posts/next-pdf/1.pdf" style="width: 100%;height: 800px;">

模板自带

今天（2019.4.3）又看了一下，改了写法，写法和插件一样，我在我的模板里也更新了。（插件模板二选一即可,个人更喜欢插件）但是如果安装插件后，也是优先模板的 pdf 脚本解析 pdf,所以在我的模板中把模板的 pdf 脚本先注释了。要启用去掉注释即可。

1
2
3
4
5
6
7
8
9


/*
'use strict';

function pdf(args) {
  return `
`;
}

hexo.extend.tag.register('pdf', pdf, {ends: false});
*/

pdf 插件(推荐)

安装

1

npm install --save hexo-pdf

使用

1

{% pdf url %}

比如本文

1

{% pdf /posts/next-pdf/1.pdf %}

hexo 博客源码备份

Lruihao — Sat, 03 Nov 2018 12:49:28 +0000

备份 hexo 博客

1
2
3
4
5
6
7
8
9


//如果 themes/next（主题文件）下面有。git，请删除这个。git 文件夹。
cd hexo
git init  //初始化本地仓库
git add source themes scaffolds _config.yml package.json package-lock.json  //将必要的文件依次添加
git commit -m "blog hexo"
git branch hexo  //新建 hexo 分支
git checkout hexo  //切换到 hexo 分支上
git remote add origin git@github.com:username/username.github.io.git  //将本地与 Github 项目对接
git push origin hexo  //push 到 Github 项目的 hexo 分支上

在其他终端克隆和更新 hexo 博客

nodejs,git,hexo 已经安装好，即搭建完成

克隆 hexo 博客备份

1
2
3


git clone -b hexo git@github.com:username/username.github.io.git  //将 Github 中 hexo 分支 clone 到本地
cd user.github.io
npm install  //注意，这里一定要切换到刚刚 clone 的文件夹内执行，安装必要的所需组件，不用再 init

这样我们的备份文件就会原封不动的拷贝到本地。

写新文章并备份和部署（备用操作）

其实源码拷下来了，这步不做我们也知道怎么做了，完全没必要按照教程死搬硬套。灵活一点就行了。

1
2
3
4
5
6
7


//进入 username.github.io 文件夹，应是 hexo 分支
git pull origin hexo //本地和远端的融合
hexo new post "new post name"  //写新文章
git add source
git commit -m "xxx"
git push origin hexo  //备份
hexo d -g  //部署

参考

网页离开时改变标题“崩溃欺骗”

Lruihao — Wed, 26 Sep 2018 16:36:08 +0000

从暑假到现在有好几个小伙伴问我博客的标题怎么变来变去的，不想再和每个人都说一遍了，耽误时间，索性写一下。

创建一个 js 文件

我们先创建一个 js 文件，我们用记事本就好了，然后改个文件名，不妨就叫crash-cheat.js吧，你们可以随意！
然后把文件放到 source 文件夹的 js 文件夹的 src 里面。（我用的 next 主题，放这里统一存放，其他主题随意）

崩溃欺骗 (Jquery 版）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    $('[rel="icon"]').attr('href', 'https://i.loli.net/2018/08/24/5b7fcb00ed9bf.png');
    document.title = '怎么回事╭(°A°`)╮';
    clearTimeout(titleTime);
  } else {
    $("[rel='icon']").attr('href', 'https://i.loli.net/2018/09/25/5baa4f21661e7.png');
    document.title = '小老弟 (ฅ>ω<*ฅ)';
    titleTime = setTimeout(function () {
      document.title = OriginTitle;
      $("[rel='icon']").attr('href', '/images/favicon-32x32-next.png');
    }, 2000);
  }
});

崩溃欺骗 (JS 版）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var oldTitle = document.title;
var titleTime; //標題恢復計時器
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    document.querySelector("[rel='icon']").setAttribute('href', '/images/icons/favicon-32.png');
    document.title = '網站崩潰了！';
    clearTimeout(titleTime);
  } else {
    document.title = '其實並沒有！';
    document.querySelector("[rel='icon']").setAttribute('href', '/images/icons/crash.png');
    titleTime = setTimeout(function () {
      document.title = oldTitle;
    }, 1000);
  }
});

使用

在hexo\themes\hexo-theme-next\layout文件路径找到layout.swig文件，其他有些主题用的是.ejs后缀，一样的。
然后打开文件，在之间加入调用刚刚的 js。

1

<script type="text/javascript" src="/js/src/crash-cheat.js">script>

重新部署博客就可以了。

hexo next 主题添加字数统计（2018）

Lruihao — Thu, 30 Aug 2018 13:15:50 +0000

警告

2018/11/1 说明 next 主题好像更新了，现在自带的可以用了，如果可以用了，以下教程可以忽略！！！

最近有几个小伙伴问我博客的字数统计怎么实现的，怎么网上的教程不管用啊？一开始我搭建博客的时候也遇到了类似的问题，按照 github 上 wordcount 的 readme 操作后，并没有什么用，我打开 post 相关配置文件并没有发现发现 wordcount 这个关键词，next 本身似乎也并没有在主题配置文件提供选项（或许是个人原因），所以只好自己动手加一个了。为了不重复回答问题，先做个原创记录。转载请注明出处。在此抛转引玉，如果有更好的方法请在留言区提出，我会及时更改。同时也希望小伙伴多发扬折腾精神，多专研，少提问，毕竟还是 RTFSC 大法好！(Read the fucking source code)

安装

wordcount github 如果没有安装 hexo-wordcount 插件，先安装该插件：

1
2
3
4


npm i --save hexo-wordcount

# Node 版本 7.6.0 之前，请安装 2.x 版本 (Node.js v7.6.0 and previous)
npm install hexo-wordcount@2 --save

post 添加

打开hexo\themes\hexo-theme-next\layout\_macro路径下的 post.swig 文件，既然没有字数统计那么我们就加一个，简单暴力地直接在阅读数后面加上一条就好了，在文件类搜索关键词busuanzi, 我用的是不蒜子，如果用的了 leancloud 的搜 leancloud 就好了，其他类似。找到这段代码后

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{% if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.post_views %}
    |
        {% if not theme.post_meta.item_text %} title="{{ __('post.views') }}" {% endif %}>
    
    {% if theme.post_meta.item_text %} {{__('post.views') + __('symbol.colon') }} {% endif %}
    
    

{% endif %}

在endif上面，即本文代码块那个空行处添加以下代码

1
2


|
字数： {{ wordcount(post.content) }}

全站添加

打开hexo\themes\hexo-theme-next\layout\_partials路径下 footer.swig 文件，在你喜欢的位置添加以下代码

1
2
3
4



  全站共 {{ totalcount(site) }} 字

hexo d 出错

Lruihao — Tue, 21 Aug 2018 22:15:01 +0000

搭建这个博客以来，隔一段时间就出现一次部署失败的错误，每次都差不多，莫名其妙地出现的。前几次不知道怎么瞎搞就好了。
现在做一下记录，防止以后出错用。
错误如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


Connection reset by 13.229.188.59 port 22
fatal: sha1 file '' write error: Broken pipe
fatal: The remote end hung up unexpectedly
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: Connection reset by 13.229.188.59 port 22
fatal: sha1 file '' write error: Broken pipe
fatal: The remote end hung up unexpectedly

at ChildProcess. (H:\Hexo\node_modules\hexo-util\lib\spawn.js:37:17)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at ChildProcess.cp.emit (H:\Hexo\node_modules\cross-spawn\lib\enoent.js:40:29)
    at maybeClose (internal/child_process.js:850:16)
    at Socket. (internal/child_process.js:323:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:492:12)

...

确保 ssh 正常，hexo-deploy-git 插件正常的情况下删除。deploy_git 文件夹就好了。最后吐槽一下，这个鬼错误，搞我一晚上醉了。我又打算重装了的。/吐血

hexo 个性化 - next 主题动态显示 subtitle

Lruihao — Mon, 20 Aug 2018 16:16:40 +0000

本文适合我这种纯小白。目前为止，全网也就只有一个博主写到过这样动态显示 subtitle 的文章。传送门（关键词：js, 后加载）
但是嘞，该博写的不怎么详细，17 年底写的。当然更大的可能是 next 更新了一些文件结构，所以不适合现在使用了。以前我按原博的流程配置了一下没成功就搁在那里了，今天突然心血来潮。翻了翻原博主博客的源码，再与自己的对比了一下，发现了一些端倪。稍作调整后如下：

修改站点配置文件，主要修改 subtitle

1

subtitle: 不怕万人阻挡，只怕自己投降。W 你如何回忆，决定你是一个怎样的人！W 这是一个句子。W 这是另一个句子。W 这些句子你们不要搞一样的不然怎么叫个性签名-_-！。

句子与句子之间以 W 分割，后续需要根据该标志位去拆分句子组。
小伙伴们博主这里只是提供一个思路，不要和我用一模一样的啊，不然撞了多尴尬呀

修改 header\index.swig

修改 themes\next\layout_partials\header 下面的 index.swig 文件
在最开头添加如下代码：
（这里用的原博的 js)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<script>
 function GetRandomNum(Min,Max)
  {
    var Range = Max - Min;
    var Rand = Math.random();
    return(Min + Math.round(Rand * Range));
  }
function setSidebarMarginTop (headerOffset) {
    return $('#sidebar').css({ 'margin-top': headerOffset });
  }
 function getHeaderOffset () {
    return $('.header-inner').height() + CONFIG.sidebar.offset;
  }
  window.onload=function(){
    var subtitle = "{{config.subtitle}}";
     var mytitle = subtitle.split("W");
     var max = mytitle.length-1;
     var index = GetRandomNum(0,max);
     var text = mytitle[index];
     $("#helloTitle").html(text);
     var headOffset = getHeaderOffset();
     setSidebarMarginTop(headOffset);
     //动态 subtitle 设置
  }
script>

修改 brand.swig

找到

1
2
3
4
5
6
7


{% if subtitle %}
  {% if theme.seo %}
    ...
  {% else %}
    ...
  {% endif %}
{% endif %}

把这一段，把原来的修改成以下代码即可
ps: title和subtitle的字体还有颜色也可以在这个文件修改，即使用style标签，按个人爱好修改也可不要。

{% if subtitle %}
  {% if theme.seo %}
    
  {% else %}
    
  {% endif %}
{% endif %}

之后部署后每次刷新就可以看到不同的 subtitle 了，开心 😀

今日诗词

1
2


 id="jinrishici-sentence">正在加载今日诗词 ....
 src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8">

正在加载今日诗词 ....

api 调用

直接 js 调用 api 简单快速

2021/9/30 更新
一言 api-参数详见已经挂了

1
2
3
4
5
6
7
8


<div>
  <script type="text/javascript" src="https://api.imjad.cn/hitokoto/?cat=&charset=utf-8&length=&encode=js&fun=sync&source=">script>
  <div id="hitokoto">
    <script>
      hitokoto();
    script>
  div>
div>

在 Android 上搭建 hexo 博客

Lruihao — Sat, 11 Aug 2018 16:59:05 +0000

暑假刚开始的时候放假回家没带电脑，只能玩手机，想折腾一下博客都没有条件，在一个发现一个 app, 卧槽 😱，termux 真的强大！（初始化需要科学上网）安卓手机上的 linux 简直了，在手机就可以搭了一个 hexo 博客，只要在 github 上实现分支管理就可以多终端同步更新了。恕我学疏才浅，还只想到这些！一开始想回校后，折腾一下 hexo-admin 实现类似动态博客一样的多终端管理（手动滑稽），现在发现 termux 这样子的操作也不错嘛，挺装哔 hhhhhh**部署后的效果**

准备

Termux
文件管理器（RE,MT 文件管理器等高级一点的）

开始

打开 Termux，输入$pkg install nodejs安装 Nodejs，在输入pkg install git安装 Git。
过程会出现一个提示，输入 y 回车确认即可。
按照 Hexo 官网提示安装 Hexo。

1
2
3


npm install hexo-cli -g
hexo init blog
cd blog

注意 ssh 配置先安装：pkg install openssh
然后按照基本操作配置 Hexo，GitHub 或者 gitee,coding 等连上，部署测试一次。
安装部署插件npm install hexo-deployer-git --save，部署hexo d -g
没有问题的话进行下一步。

编辑

写文章的话创建 md 文件命令和电脑上一样，文件管理器打开/data/data/com.termux/files/home/i/source/_posts/ 编辑文章 md 文件。这种方式需要 Root。
没有 Root 的话可以使用 Vim，网上很多教程。但是这种方式相对来说更麻烦。

参考

效果图（未连接 github，coding 等）

效果图 1
效果图 2 效果图 3
效果图 4

hexo 博客自定义 console log

Lruihao — Sat, 04 Aug 2018 16:19:06 +0000

看到知乎，百度的页面 F12 检查后都会有一些有趣的招聘信息。于是乎我也想给我的博客加一个。
我主要用到的工具：

console.log()
Notepad++
在线图片转文字工具

用法

用 js 在使用 console.log() 就行了，hexo 的主题文件在_layout.swig里，所以我们打开该文件，在该位置，添加 js 就行了；

图案

我用的我自己的一张照片（电脑上照片就那么几张。)，然后用在线图片转文字工具转字符，
选择文件，设置大小，然后生成，

生成后，复制 TXT 文件（下面那个框，上面的是 HTML 代码）

粘贴到 Notepad++ 里面，然后按图操作；

Ctrl+H 替换

最后就变成一个字符串了。

效果图

线上 demo, 按 F12 找到 console

我的 txt

1

\n`              @@#``@@@@@@@@@@@@@@@@@@##,`   \n`              @@#`;@@@@@@@@@@@@@@@@@@@':'   \n`              @@#`@@@@@@@@@@@@@@@@@@@#+#;`  \n`              @@#`@@@@@@@@@@@@@@@@@@###@'.  \n`              @@+.@@@@@@@@@@@@@@@@@@@@@##,  \n`              @@#,@@@@@@@@@@@@@@@@@@@@@@#,  \n`              #@#:@@@@@@@@@@@@@@@@@@@@@@@,  \n`              #@#'@@@@@@@@@@@@@@@@@@@@@@@.  \n`              +@#;@@@@@@@@@@@@@@@@@@@@@@#   \n`          `;: ;@#'@@@@@@@@@@@@@@@@@@+'+@'   \n`    `,,;';'+';'@@+:@@@@@@@@@@@@##@#',.:#;   \n,, ``    ``..,:;@@#'@@@@@@@@#####@@@@#:`:.   \n`       `````:++@@@@@@@@@@@@@###@@@@#+,..    \n        ``````.#@@@@@@@@@@@@@@#@@@#++#'``    \n`    ```.,,:,.`:@@@@@@@@@@@@@###@@@##'.`     \n``..`````..,::;+@@@@@@@@@@@@#+`::+##'`.      \n`      ````.```,@@@@@@@@@@@##;``.,';` `      \n``.;@@@@@@@@@@@@@@@@@@@@@@###;``..``````     \n#@@@@@@@@@@@@@@@@@@@@@@@@##@#;``,``,.``      \n@@@@@@@@@@@@@@@@@@@.`````..``.. +` `:`       \n@+''++#####@@#`.@@@``````` ` `,```  ``       \n';;;;'+##+'+.`;+@@@,..```` `` :,.            \n;::,,:;+#++``,,#@@@'..``````` ,`.``          \n;,,,,...'#.,,..#@@@#,,.`````` .````          \n:,,,,....`,::;''+#@#;,..`````````.``         \n:,,,.....'##++''';:+':,.`..,,...`            \n:,,,...#####+'+#@@@'.';+:.  ` ``             \n;,,.`'####'#,`.`+@@@+'``` `.`                \n;,.`#@@@#+:'+++##+@##@,,,,`                  \n',.#@@###'''';:,.```,+#.                     \n+,#@@@####;,,..```````````````         `.:,::\n+@@@@###+;,,..``````````````````          `.,\n#@@@##+',,,........``````````````            \n@@@@#+:,,,,`........``````````               \n@@@#+:,,,,.`````.....``````````           `` \n@@##':,......`````....```  `````          ```\n@@@#':,....,..``````..````    ```         ```\n@@@#',....,,,..```````````     ```         ..\n@@@#,.....,,,,.``  ````````   ``````         \n@@@+....,,,,,..`````````````   ``````````    \n@@@:....,,,,.LiRuihao````````  ```````````` \n#@@,....,,,,.Always Be Yourself !````````````\n,##,,...,::,.````````````..``````   `......``\n,'#,,..,,:::.`````````........``````   `.,,..\n\n 你好！\n 欢迎进入什么都不会的李瑞豪的个人网站！\nhttps://lruihao.cn\nhttps://www.lruihao.cn\nhttps://lruihao.github.io\nhttps://liruihao.coding.me\n\n\n\n

其他个人网站，个人博客也是可以的。

hexo+github 搭建个人博客及美化

Lruihao — Fri, 01 Jun 2018 14:34:23 +0000

更多关于 hexo

首先

官方文档是我们的第一手资料，也是最好的。安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

Node.js
Git

hexo 安装

如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm 即可完成 Hexo 的安装。

1

npm install -g hexo-cli

建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3


hexo init 
cd 
npm install

为一个文件夹的名字新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8


.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

安装 hexo 插件

全装上吧，没事。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

本地查看效果

执行下面语句，执行完再登录 localhost:4000 查看效果（执行完不要按 Ctrl+C，不然就停止了）

1
2


hexo g
hexo s

其他步骤在这里不赘述，参见超详细教程 安卓上搭建 hexo 博客

部署

1

hexo g -d

部署后我们可以浏览器搜 username.github.io 查看自己的博客效果，比如我的 lruihao.github.io

美化

这些美化都写的很详细，我建议你们自己好好看看吧，我也是在这里看到的，如果问我和这里说的是一样的。

hexo 个性化教程
valine 特别鸣谢赵俊 👍
asdfv1929
hexo 官方主题集合，~~我用的是 aloha 主题~~，该主题官方文档，后改用 next 主题 next 主题
hexo 官方插件 ~~说说我的主题遇到的一些问题，由于这个主题用的人少，所以作者优化的不是很好（next 使用最多），当然也可以反过来说，所以自己美化了一点~~

博文置顶

修改 hero-generator-index 插件，把文件：node_modules/hexo-generator-index/lib/generator.js 内的代码替换为：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章 top 都有定义
            if(a.top == b.top) return b.date - a.date; // 若 top 值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照 top 值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章 top 有定义，那么将有 top 的排在前面（这里用异或操作居然不行 233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

about 页面

about 页面可以用 HTML 写，你想怎么写都行，我用的最简单的方法，直接hexo n page "about"后，会生成一个 md 文件，也就是后面说的文章，直接写文章就行了。

添加搜索，评论，分享

搜索功能真心好用，当文章多起来的时候，标签提供的作用已经很少了，只能简单索引，搜索却能精确查找，这里我用的依旧是最简单的本地站内搜索。安装hexo-generator-searchdb

在站点的根目录下执行以下命令：

1

npm install hexo-generator-searchdb --save

配置站点配置文件新增以下内容到任意位置：

1
2
3
4
5


search:
  path: search.xml
  field: post
  format: html
  limit: 10000

配置主题配置文件

1
2
3


## Local search
local_search:
  enable: true

algolia 参考文件
让搜索引擎找到你的博客，还是看到邱承佳学长博文有写到传送门

添加访客数，阅读量等

评论有多说（多说好像挂了），计数有不蒜，我用的不蒜子，还有其他的。

文章阅读量

以下适合非 next 主题的部分主题，next 主题已经自带，到主题配置文件修改就好了。

打开以下路径在你喜欢的地方添加代码，\blog\hexo\themes\主题名字、layout\_partial，找到 article.ejs文件

1
2
3


<div align="left">
  <span id="busuanzi_container_page_pv"> 本文总阅读量<span id="busuanzi_value_page_pv">span>次 span>
div>

站点访问量，访客数

打开以下路径在你喜欢的地方添加代码，\blog\hexo\themes\主题名字、layout\_partial，找到 footer.ejs文件

1
2
3
4


<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async defer>script>

<span id="busuanzi_container_page_pv"> 本站总访问量<span id="busuanzi_value_site_pv">span>次 | span>
<span id="busuanzi_container_site_uv"> 本站访客数<span id="busuanzi_value_site_uv">span>人次 span>

2018.10.08 更新不蒜子官网说七牛强制过期域名~~dn-lbstatics.qbox.me~~, 所以 js 文件位置发生改变，改为busuanzi.ibruce.info

写文章

hexo 文章用轻量型标签语言 Markdown 编写

hexo 添加图片，音乐，链接，视频

Lruihao — Thu, 31 May 2018 23:19:22 +0000

如果实在搞得头晕直接去简书写文章，再把简书生成的 md 文章复制过来就好了（简书是个不错的 Markdown 在线编辑器），还可以去马克飞象，专为印象笔记打造的 Markdown 编辑器，typora 也是不错的，突然发现 csdn 也支持 Markdown 编译器了

1. 首先

刚刚搭博客，很多都不懂，就连插入图片的路径问题都把我整的要命。（我用的 Sublime Text 3 编译器）
下面讲讲：

1.1 设置站点配置_config.yml

1

post_asset_folder: true

1.2 安装插件

1

npm install https://github.com/CodeFalling/hexo-asset-image -- save

1.3 下次再运行 hexo n “xxxx"来生成 md 博文时，下路径

1

/source/_posts

文件夹内除了 xxxx.md 文件还有一个同名的文件夹，在 xxxx.md 中想引入图片时，先把图片复制到 xxxx 这个文件夹中，然后只需要在 xxxx.md 中按照 markdown 的格式引入图片。

2. 添加图片

首先大家可以查看 hexo 官方文档资源文件夹章节

2.1 markdown 添加

相对路径添加（我被这个相对路径搞得要死，前面各种出错，大家可以对照我的来插入图片 …）

1
2
3
4
5
6
7


#直接写图片名就好了，图片实例见下
![kyrie irving](294136.jpg)

#如果改了 Permalink 就要加上文章名，即同名文件夹名
![kyrie irving](hexo-添加图片，音乐，链接，视频/294136.jpg)
#代码压缩后前面还要加一个/
![kyrie irving](/hexo-添加图片，音乐，链接，视频/294136.jpg)

2.2 插件添加

传送门
这种方式被很多人诟病，但有时候也不失一种好方式，简单快捷。
还有图片名字显示，不错的。

1

{% asset_img 297787.jpg kyrie irving %}

3. 音乐

大家可以看网易云音乐的官网，播放音乐可以生成外链，直接拿来用就行了。iframe 插件可以在代码中设置宽高等参数，auto 为自动播放。flash 不可以自己设置参数。看喜好，随便你。其他音乐，把插件中的链接替换成要播放的链接就可以了

1
2
3
4


#iframe 插件

1
2
3
4


#flash 插件

4. 添加链接

1
2


[我的微博](https://weibo.com/liahao)
{% link text url title %}

5. 添加视频

视频链接最好是打开就是视频的链接（youku，YouTube，抖音等）可以把视频上传到优酷，抖音等生成外链再拿来用。（优酷上传需要注册和实名认证）插件参考资料

自拍手写视频（优酷）

实验室无聊拍的

1
2
3
4
5


	height=500 width=100%
	src="https://player.youku.com/embed/XMzY0MzgxNDMyOA=="
	frameborder=0 allowfullscreen>

工具集合

Picgo 马克飞象、CSDN、简书 SM.MS 图床

hexo - 标签 - 菠菜眾長

个人博客从 Hexo 迁移至 Hugo

Hugo 准备

概念

安装

生成站点

创建文章

添加主题

在本地启动网站

hugo build

写作指北

Todo list

Base

hexo-theme-next @modified LRH

初步安装

更新内容

links 模板

备案信息自定义

文字抖动特效

左下角微信公众号

相关文章收纳

Chat Services

pdf 和 Mermaid 解析模块

模仿 csdn 转发样式

热度页面

复制按钮样式

模仿知乎卡片式链接

源码

使用

利用腾讯云对象存储 COS 桶托管 hexo 博客

创建存储桶

开启静态网站设置

绑定域名

域名解析，添加记录

hexo 设置

CDN 刷新

自动 CDN 刷新配置 （推荐）

在搜索、文章底部、侧栏添加最近文章模块

侧栏

搜索结果处添加

文章尾部添加

其他

hexo 插件及 next 内置样式集

hexo 插件

hexo-lazyload-image

hexo-ruby-marks

hexo-pwa

hexo-tag-dplayer

hexo-tag-aplayer

hexo-pdf

hexo-filter-flowchart（流程图）

hexo-spoiler

宅音乐侧栏播放器插件

caniuse

使用

栗子

Include Raw

button

Mermaid

video

Usage

Examples

tab 选项卡

note 便签

default

primary

success

info

warning

danger

不填

danger no-icon

代码块等

Todo list

Label

其他

next添加支持pdf

iframe(推荐)

模板自带

pdf 插件(推荐)

自动 CDN 刷新配置（推荐）