建站-个人博客

Posted on | In

创建个人博客

使用hexo创建博客

参考链接

hexo+github搭建教程

windows安装hexo（记得Add to Path这步要勾选install local...）

typora+picgo上传图片到gitee

给自己用的：

（要换个新的电脑搭建，我自己的站点配置和主题配置已经改好）

  1. 运行以下命令

npm install hexo-cli -g
hexo -v
npm update hexo -g
hexo init
npm install –save hexo-deployer-git
npm install hexo-abbrlink –save
npm install hexo-excerpt –save
npm install crypto-js
npm install hexo-hide-posts –save
npm install hexo-wordcount
npm install hexo-generator-searchdb –save
npm uninstall hexo-generator-index –save
npm install hexo-generator-index-pin-top –save
npm install hexo-asset-image –save
npm i hexo-renderer-swig
npm install hexo-generator-index –save
npm install hexo-generator-archive –save
npm install hexo-generator-tag –save
npm install hexo-generator-category –save

npm install –save hexo-helper-live2d

  1. 再把.git、source、themes、_config.yml、.gitignore覆盖过来

  2. hexo cl && hexo g && hexo s

hexo命令

安装、升级、初始化

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
#升级npm【可选】
npm install -g npm 
#安装
npm install hexo-cli -g 
#验证
hexo -v 
#升级【可选】
npm update hexo -g


#初始化
hexo init
#克隆最新的next主题
git clone https://github.com/iissnan/hexo-theme-next themes/next 
#安装hexo d插件
npm install --save hexo-deployer-git
#修改文章永久链接为随机编号。可以提升访问速度
npm install hexo-abbrlink --save 

#首页自动收缩
npm install hexo-excerpt --save
#指定文章加密
npm install crypto-js
#指定文章隐藏
npm install hexo-hide-posts --save

#新版hexo需要手动安装以下插件
#网页显示不出的问题
#不统计字数的问题
npm install hexo-wordcount 
#本地搜索功能用不了的问题
npm install hexo-generator-searchdb --save 

#让文章能置顶
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

#可加载本地图片
npm install hexo-asset-image --save

#可选
#让网站能被百度搜索
npm install hexo-generator-sitemap --save     
#让网站能被百度搜索
npm install hexo-generator-baidu-sitemap --save 
#主动推送死链到百度
npm install hexo-baidu-url-submit --save

博客的目录结构

npm查看安装了哪些包 npm list --depth=0

npm查看全局安装了哪些工具 npm list --depth --global

npm查看某个模块是否安装了 npm list <packagename>

创建目录

1
hexo new page "categories"

创建新文件（在 source/_posts 下生成“文件名.md”文件）

1
hexo n [layout] "文件名" #新建文章（也会创建文件夹）

Run server（本地直接查看）（是建议步骤）

1
hexo s

本地生成静态网页

1
hexo g

发布到博客

1
hexo d

服务器

1
2
3
4
5
6
7
8
hexo server #Hexo 会监视文件变动并自动更新，您无须重启服务器。
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP

hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署

监视文件变动

1
2
hexo generate #使用 Hexo 生成静态文件快速而且简单
hexo generate --watch #监视文件变动

完成后部署

1
2
3
两个命令的作用是相同的
hexo generate --deploy
hexo deploy --generate
1
2
hexo deploy -g`
`hexo server -g

草稿

1
hexo publish [layout]

hexo设置

以下设置仅供参考，因为使用的next主题的版本有升级过（有些设置不一样了）

参考链接、参考链接2、参考链接3

添加本地搜索

next/_config.yml中打开搜索开关

1
2
local_search:
  enable: true

打开文章的资源文件夹功能

站点配置文件

1
post_asset_folder: true # 默认值false，关闭文章资源文件夹功能

直接在markdown文章中写入：

1
<img src="{asset_path full-image.jpg %}/>"

增加支付宝和微信打赏功能

主题配置文件next/_config.yml

1
2
3
reward_comment: 坚持原创，您的支持将鼓励我继续创作 
wechatpay: /images/wechat_money.jpg 
alipay: /images/alipay_money.jpg

打开themes\next\layout\_macro\reward.swig文件，修改打赏按钮和图片下方的文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 改动1：把下方的Donate改为赏,对应打赏按钮
<span>Donate</span> 

# 改动2  把p标签内的WetChar Pay改为微信打赏
{% if theme.wechatpay %}
  <div id="wechat" style="display: inline-block">
    <img id="wechat_qr" src="{{ theme.wechatpay }}" alt="{{ theme.author }} WeChat Pay"/>
    <p>WetChar Pay</p>  
  </div>
{% endif %}

# 改动3： 把p标签内的Alipay pay改为支付宝打赏
{% if theme.alipay %}
  <div id="alipay" style="display: inline-block">
    <img id="alipay_qr" src="{{ theme.alipay }}" alt="{{ theme.author }} Alipay"/>
    <p>Alipay pay</p> 
  </div>
{% endif %}

修正打赏说明文字闪动问题

打开themes\next\source\css\_common\components\post\post-reward.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//#wechat:hover p{
//    animation: roll 0.1s infinite linear;
//    -webkit-animation: roll 0.1s infinite linear;
//    -moz-animation: roll 0.1s infinite linear;
//}
//#alipay:hover p{
//    animation: roll 0.1s infinite linear;
//    -webkit-animation: roll 0.1s infinite linear;
//    -moz-animation: roll 0.1s infinite linear;
//}
//#bitcoin:hover p {
//    animation: roll 0.1s infinite linear;
//    -webkit-animation: roll 0.1s infinite linear;
//    -moz-animation: roll 0.1s infinite linear;
//}

设置网站博客肖像

主题配置文件next/_config.yml

1
2
# Sidebar Avatar
avatar: /images/header.jpg #也可以设置成网络url

添加点击头像跳转到指定网址

themes/hexo-theme-next/source/js/src/motion.js的文章头部添加

1
2
3
4
/* 点击头像，添加跳转的链接 */
$('.site-author-image').click(function(){
  window.location.href="https://gitee.com/shen_bh";
});

头像边框改为圆形框

打开位于themes/next/source/css/_common/components/sidebar/下的sidebar-author.syl文件,修改如下

1
2
3
4
5
6
7
8
9
10
11
12
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
 // 修改头像边框
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

鼠标放置头像上旋转

打开位于themes/next/source/css/_common/components/sidebar/下的sidebar-author.syl文件,修改如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
 // 修改头像边框
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  // 设置旋转
  transition: 1.4s all;
}
// 可旋转的圆形头像,`hover`动作
.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

设置页面动态背景

主题配置文件next/_config.yml

动态特效：该特效打开的是3条线段追踪鼠标

1
2
# Canvas-nest
canvas_nest: true

3D特效：该特效由三维js库提供的三维动态背景

1
2
# three_waves
three_waves: true

线条特效：该开关的打开，在背景上显示较长线条及小球。

1
canvas_lines: false

球状特效：该开关在背景上显示一个球状图案。

1
canvas_sphere: true

特别注意，上述四种特效，可以独立设置，也可以叠加

设置网站缩略图标

主题配置文件next/_config.yml

1
2
3
4
5
favicon:
  small: /images/favicon-16x16-next.png
  medium: /favicon.ico
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

建议采用ico格式的缩略图，其他图可能存在兼容性问题

去掉文章目录标题的自动编号

主题配置文件next/_config.yml

1
2
3
toc:
  enable: true
  number: false  #false去掉文章目录标题的自动编号，默认true

自定义头部区域背景图

在Prisse Theme中，是不是清一色的黑色让你非常不爽啊，我也不爽。 我想要一个不一样的的效果，比如在加一个背景图片。我的副标题是“面朝大海，春乱花开”，我想来一张应景的图片。 找到如下themes\next\source\css\_custom\custom.styl 文件，添加 

1
2
3
4
5
6
.site-meta {
	background-image: url(/images/log-big.jpg);
	@media(min-width: 992px){
		background-image: url(/images/log-small.jpg);
	}
}

hexo next去掉上方的黑线or改掉颜色

  • 方法一：去掉黑线div
    修改文件知“themes\next\layout_layout.swig”，道删除“

    ”
    修改黑线高度为0

  • 方法二：修改黑线高度为0
    修改文件“themes\next\source\css_variables\base.styl”，找到“$headband-height”，把3px改成0px；

1
2
$headband-height                = 0px
$headband-bg                    = $black-deep

代码上增加“复制”功能

参考文章

  1. 在themes\hexo-theme-next\layout\_third-party\下新建copy-code.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
{% if theme.codeblock.copy_button.enable %}
  <style>
    .copy-btn {
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      color: #333;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      background-color: #eee;
      background-image: linear-gradient(#fcfcfc, #eee);
      border: 1px solid #d5d5d5;
      border-radius: 3px;
      user-select: none;
      outline: 0;
    }

    .highlight-wrap .copy-btn {
      transition: opacity .3s ease-in-out;
      opacity: 0;
      padding: 2px 6px;
      position: absolute;
      right: 4px;
      top: 8px;
    }

    .highlight-wrap:hover .copy-btn,
    .highlight-wrap .copy-btn:focus {
      opacity: 1
    }

    .highlight-wrap {
      position: relative;
    }
  </style>
  
  <script>
    $('.highlight').each(function (i, e) {
      var $wrap = $('<div>').addClass('highlight-wrap')
      $(e).after($wrap)
      $wrap.append($('<button>').addClass('copy-btn').append('{{__("post.copy_button")}}').on('click', function (e) {
        var code = $(this).parent().find('.code').find('.line').map(function (i, e) {
          return $(e).text()
        }).toArray().join('\n')
        var ta = document.createElement('textarea')
        document.body.appendChild(ta)
        ta.style.position = 'absolute'
        ta.style.top = '0px'
        ta.style.left = '0px'
        ta.value = code
        ta.select()
        ta.focus()
        var result = document.execCommand('copy')
        document.body.removeChild(ta)
        {% if theme.codeblock.copy_button.show_result %}
          if(result)$(this).text('{{__("post.copy_success")}}')
          else $(this).text('{{__("post.copy_failure")}}')
        {% endif %}
        $(this).blur()
      })).on('mouseleave', function (e) {
        var $b = $(this).find('.copy-btn')
        setTimeout(function () {
          $b.text('{{__("post.copy_button")}}')
        }, 300)
      }).append(e)
    })
  </script>
{% endif %}
  1. 在themes\hexo-theme-next\layout\_layout.swig的</body>上一行添加
1
{% include '_third-party/copy-code.swig' %}
  1. 在themes\hexo-theme-next\languages\zh-Hans.yml的post:下增加
1
2
3
copy_button: 复制
copy_success: 复制成功
copy_failure: 复制失败

在themes\hexo-theme-next\languages\en.yml的post:下增加

1
2
3
copy_button: Copy
copy_success: Copied
copy_failure: Copy failed
  1. 在themes\hexo-theme-next\_config.yml的font:跟
    1
    2
    3
    # ------
    # Third Party Services Settings
    # ------
    之间增加
1
2
3
4
5
6
7
8
9
# Manual define the border radius in codeblock
# Leave if empty for the default 1
codeblock:
    border radius:
    # Add copy button on codeblock
    copy_button:
        enable: true
        # Show text copy result
        show_result: true

添加live2d卡通人物

  1. 安装hexo-helper-live2d
1
npm install --save hexo-helper-live2d
  1. 安装live2d
1
npm install live2d-widget-model-wanko
  1. 配置

next/_config.yml中添加

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
# https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/          # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/                # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/          # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr            # jsdelivr CDN
  # scriptFrom: unpkg               # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false                    # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  log: false                        # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko  # npm-module package name
    # use: wanko                    # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko            # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true                      # 手机中是否展示
  react:
    opacity: 0.7

重新hexo d -g即可看效果

给指定标签的文章加密

给文章加密，需要密码才能观看

next/layout/_partials/head.swing的<script></script>标签种添加方法

1
2
3
4
5
6
7
8
(function(){
    if('{{ page.password }}'){
        if (prompt('请输入文章密码') !== '{{ page.password }}'){
            alert('密码错误！');
            history.back();
        }
    }
})();

代码块主题更改

站点_config.yml打开代码高亮和自动识别语言的开关

1
2
3
4
5
6
7
highlight:            #代码块的设置，Hexo自带的代码高亮插件
  enable: true			 #是否开启代码高亮
  line_number: true		 #是否增加代码行号
  auto_detect: true		 #自动判断代码语言
  tab_replace: ''
  wrap: true
  hljs: false

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

1
2
#可选主题normal | night | night eighties | night blue | night bright
highlight_theme: night bright

优化文章（代码块）字体

themes/next/source/css/_variables/custom.styl添加内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 标题，修改成你期望的字体族
$font-family-headings = Georgia, sans

// 修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif

// 代码字体
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace

// 正文字体的大小
$font-size-base = 16px

// 代码字体的大小
$code-font-size = 13px

设置社交网址和图标

themes/next/_config.yml

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
social:
  GitHub: https://github.com/shenbh || github
  #E-Mail: mailto:shenbh@qq.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
  微博: http://weibo.com/2551187965/profile?topnav=1&wvr=6 || weibo
  Coding: https://sbh.coding.net/user || monkey
  Gitee: https://gitee.com/shen_bh || alien-monster
  掘金: https://juejin.im/user/57ea31a1a22b9d0061656f52 || angle-double-down
  知乎: https://www.zhihu.com/people/shenbh || snapchat

social_icons:
  enable: true
  icons_only: false #只显示图标，不显示文字
  transition: false #动画效果
  # Icon Mappings.
  # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  E-Mail: envelope
  Google: google
  Twitter: twitter
  FB Page: facebook
  VK Group: vk
  Skype: skype
  YouTube: youtube
  Instagram: instagram
  StackOverflow: stack-overflow
  微博: weibo
  Coding: monkey
  Gitee: alien-monster
  掘金: angle-double-down
  知乎: snapchat

去除底部 powerby

Next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: 2019

  # Icon between year and copyright info.
  icon: user

  # If not defined, will be used `author` from Hexo main config.
  copyright: 大力出奇迹
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: true

修改copyright

感觉底部版权信息不够丰富，打算新增一些内容。

设置前的效果：

设置前的效果

修改文件：themes/next/layout/_macro/post-copyright.swig

修改前：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>{{ __('post.copyright.author') + __('symbol.colon') }}</strong>
    {{ post.author | default(config.author) }}
  </li>
  <li class="post-copyright-link">
    <strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
    <a href="{{ post.url | default(post.permalink) }}" title="{{ post.title }}">{{ post.url | default(post.permalink) }}</a>
  </li>
  <li class="post-copyright-license">
    <strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>
    {{ __('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license) }}
  </li>
</ul>

修改后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>{{ __('post.copyright.author') + __('symbol.colon') }}</strong>
    {{ post.author | default(config.author) }}  |  微信公众号【不正经程序员】
  </li>
  <li class="post-copyright-link">
    <strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
    <a href="{{ post.url | default(post.permalink) }}" title="{{ post.title }}">{{ post.url | default(post.permalink) }}</a>
  </li>
  <li class="post-copyright-license">
    <strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>
    {{ __('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license) }}
  </li>
  <li class="post-copyright-license">
    并保留本声明和上方二维码。感谢您的阅读和支持！
  </li>
</ul>

主要是新增了一些文字描述。

设置后的效果：

设置后的效果

添加评论系统

leancloud网站：

  1. 创建个应用，名字随便起个，如：blog
  2. 存储–结构化数据–创建 Class：名字 Counter
  3. 设置–应用 Keys–这里面的 AppID 和 AppKey 要复制出来用
  4. 设置–安全中心：Web 安全域名填入https://shenbh.top（coding 那也强制成 https）

打开 next/config.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid:  填上leancloud 上复制的 AppID # your leancloud application appid
  appkey:  填上leancloud 上复制的 AppKey # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

添加leancloud统计

Next /config.yml

1
2
3
4
5
6
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true #值改成 true，打开 leancloud 统计
  app_id: 填上leancloud 上复制的 AppID #<app_id>
  app_key: 填上leancloud 上复制的 AppKey #<app_key>

鼠标点击有心

  1. 添加文件next/source/js/src/clicklove.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
! 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);
  1. next/layout/_layout.swing在</html>后添加如下
1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

思维导图

思维导图插件的代码仓库

使用：

1
npm install hexo-simple-mindmap

范例：

1
2
3
4
5
6
7
8
9
10
{% pullquote mindmap mindmap-md %}
- [Hexo 的思维导图插件](https://hunterx.xyz/hexo-simple-mindmap-plugin-intro.html)
  - 前言
  - 使用方法
    - 一
    - 二
    - 三
  - 太长不看
  - 参考资料
{% endpullquote %}

思维导图的样板图.jpg

上面的在windows上试了不起效

添加记录访问ip

多级分类

让网站可被百度搜索

修改文章永久链接为随机编号

  1. 安装abbrlink插件

    1
    npm install hexo-abbrlink --save

  2. 编辑站点配置文件

    1
    2
    3
    4
    5
    6
    #permalink: :year/:month/:day/:title/
    #permalink_defaults:
    permalink: posts/:abbrlink/
    abbrlink:
      alg: crc32 #support crc16(default) and crc32
      rep: dec   #support dec(default) and hex

  3. 重新生成部署

    1
    hexo cl && hexo g

升级 Hexo 和 NexT 主题

查看hexo版本

1
hexo version

升级hexo版本

1
npm upgrade

升级next主题（目前最新版本7.8）

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

更改配置：

  1. 更改站点配置文件的themes为刚刚的next

    1
    2
    3
    4
    5
    6
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    # git clone https://github.com/theme-next/hexo-theme-next themes/next
    theme: next
    # theme: next-5.1.4

  2. 站点的language更改成language:zh-CN（原来的是 themes\next\language\zh-Hans.yml文件，现在是zh-CN.yml文件）

  3. 首页内容全部展示出来，没有“查看更多”按钮

    1
    npm install hexo-excerpt --save

    在站点配置文件添加

    1
    2
    3
    4
    5
    excerpt:
      depth: 5  
      excerpt_excludes: []
      more_excludes: []
      hideWholePostExcerpts: true

    主题配置文件设置

    1
    2
    excerpt_description: true
    read_more_btn: true

  4. 下载本地搜索插件

    1
    npm install hexo-generator-searchdb --save

  5. 设置字数统计和预计阅读时间

    1
    npm install hexo-symbols-count-time --save

    站点配置文件添加

    1
    2
    3
    4
    5
    symbols_count_time:
      symbols: true			 # 文章字数统计
      time: true			 # 文章阅读时长
      total_symbols: true	 # 站点总字数统计
      total_time: true		 # 站点总阅读时长

    主题配置文件

    1
    2
    3
    4
    5
    6
    # Post wordcount display settings
    # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
    symbols_count_time:
      separated_meta: true
      item_text_post: true
      item_text_total: false

设置首页显示摘要和阅读原文按钮

next/_config.yml中

1
2
3
auto_excerpt:
  enable: true
  length: 150

指定文章加密

  • 指定文章的tags中添加private会加密
  • 指定文章（与tags同级）添加hide: true，首页、分类页、归档页会隐藏此文章
  1. 安装插件
1
npm install crypto-js
  1. 站点配置文件中添加
1
2
encrypt: # blog-encrypt
  password: somepassword
  1. 主题目录下scripts文件夹下，新建encrypt.js文件，内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const CryptoJS = require('crypto-js');

hexo.extend.filter.register('after_post_render', (data) => {
    // 如果没有设置密钥则跳过
    if (!hexo.config.encrypt || !hexo.config.encrypt.password || !data.tags) {
        return data;
    }
    // 跳过没有包含private这个tag的文章
    if (!data.tags.map(tag => tag.name).find(tag => tag === 'private')) {
        return data;
    }
    data.origin = data.content;
    data.encrypt = true;
    const password = hexo.config.encrypt.password;
    const ciphertext = CryptoJS.AES.encrypt(data.content, password).toString();
    // 替换content为加密后的内容，同时为了方便前端识别，包裹一个特殊的div
    data.content = `<div class="encrypted">${ciphertext}</div>`;
    // 标题加密
    data.title = CryptoJS.AES.encrypt(data.title, password).toString();
    return data;
});
  1. 首页、分类页、归档页隐藏指定文章
1
npm install hexo-hide-posts --save

在站点目录下的_config.yml中如下配置：

1
2
3
4
5
6
7
8
9
10
# hexo-hide-posts
hide_posts:
  # 可以改成其他你喜欢的名字
  filter: hide
  # 指定你想要传递隐藏文章的位置，比如让所有隐藏文章在存档页面可见
  # 常见的位置有：index, tag, category, archive, sitemap, feed, etc.
  # 留空则默认全部隐藏
  public_generators: []
  # 为隐藏的文章添加 noindex meta 标签，阻止搜索引擎收录
  noindex: true

要隐藏的文章的头部添加hide:true

如：

1
2
3
4
5
6
7
8
9
---
title: 个人博客相关笔记
categories: 其他
keywords: hexo
tags:
  - 个人博客
date: 2019-12-25 09:54:00
hide: true
---

列出隐藏的文章（cmd窗口中输入以下内容）

1
hexo hidden:list

让文章能置顶

  1. 安装插件

    1
    2
    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save

  2. 对应的文章的开头加入top: true

    1
    2
    3
    4
    5
    6
    7
    ---
    title: Hexo Next主题设置文章置顶
    date: 2020-01-03 17:26:01
    categories: Hexo
    tags: Next主题
    top: true
    ---

  3. 设置置顶标志

    打开**\themes\next\layout\_macro\post.swig**

    找到<div class="post-meta">下面插入一下代码：

    1
    2
    3
    4
    5
    {% if post.top %}
        <i class="fa fa-thumb-tack"></i>
        <font color="RED">置顶</font>
        <span class="post-meta-divider">|</span>
    {% endif %}

更改页面宽度

列出Pisces Scheme的修改方式

打开/Hexo/themes/hexo-theme-next/source/css/_variables/custom.styl 添加两行代码即可

1
2
$main-desktop = 1450px 
$content-desktop = 1200px

渲染跳过

方法一：在顶部模块内添加layout: false

方法二：站点配置文件_config.yml中，找到skip_render，做如下修改：

1
2
3
skip_render:
  - 'tools/*'
  - 'tools/**'

最后执行hexo clean和hexo s -g 本地预览，检查无误后hexo g -d部署到服务器上即可。

picgo+gitee 做图床

image-20210314090601339

其他/PicGo配置

![工具/设置 typora](./知识-个人博客/设置 typora.png)

注意点

  • 所有文章都在 source/_posts 下
  • hexo g 生成的 （在public目录下） 静态页面可以拷贝出来放到自己服务器展示
  • 首页显示文章列表(带部分内容预览)的做法：
    • 方法一：在文章需要“截断”的位置加上<!-- more -->
    • 方法二：在主题 themes/next下的_config.yml 最后一行加上 
      1
      2
      3
      4
      5
      -# Automatically excerpt (Not recommend).
      -# Use <!-- more --> in the post to control excerpt accurately.
      -# 从NexT 7.6.0开始，NexT取消了首页预览设置，得用 <!-- more -->	auto_excerpt:
      	enable: true ##打开文章折叠开关
      	length: 150 ##指定预览内容长度
  • 文章头部可以指定本文所属的分类(categories)、标签(tags)

遇到问题

git@git.coding.net: Permission denied (publickey)

问题：hexo d发布时报上面的错误，打开coding的个人设置–SSH公钥：新增，提示已经存在（但实际没有公钥）

解决：打开blog仓库，代码仓库–仓库设置–重置代码仓库。再去个人设置中添加SSH公钥，添加成功了。所以应该这样就可以解决问题了。

参考链接：https://blog.csdn.net/qq_36667170/article/details/100894172

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
menu:
  home: / || home
  about: /about/ || user
  tags: /tags || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  commonweal: /404/ || heartbeat

# Enable/Disable menu icons.
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  schedule: calendar
  tags: tags
  archives: archive
  sitemap: sitemap
  commonweal: heartbeat

上面的menu的每项后要加 ||别名（对应底下的menu_icons内的名称）

  1. 安装对应的插件

Hexo在生成静态页的时候，需要使用对应的插件：

1
2
3
4
hexo-generator-index #生成首页
hexo-generator-archive #生成归档页
hexo-generator-tag #生成标签页
hex0-generator-category #生成分类页

对应安装命令:

1
2
3
4
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-tag --save
npm install hexo-generator-category --save
  1. next/_config.yml中menu下的||前后多了空格，去掉空格即可

如:

1
2
3
4
5
6
7
8
9
menu:
  home: /||home
  about: /about/||user
  tags: /tags||tags
  categories: /categories/||th
  archives: /archives/||archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  commonweal: /404/||heartbeat

Cannot GET /archives/%7C%7Carchive

打开next/layout/_macro/sidebar.swig

找到<a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">

更改成<a href="{{ url_for(theme.menu.archives.split('||')[0] | trim) }}">

点首页等的时候链接自动带上了%20

解决：主题的_config.yml的menu中的斜杠后的空格要去掉。如home: / || home改成home: /|| home

分页按钮（向左向右箭头显示异常的问题）

修改代码的位置: themes\next\layout\_partials\pagination.swig

原来为:

1
2
3
4
5
6
7
8
9
10
11
{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '<i class="fa fa-angle-left"></i>',
        next_text: '<i class="fa fa-angle-right"></i>',
        mid_size: 1
      })
    }}
  </nav>
{% endif %}

修改为:

1
2
3
4
5
6
7
8
9
10
11
{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '<',
        next_text: '>',
        mid_size: 1
      })
    }}
  </nav>
{% endif %}

busuanzi_count只显示图标不显示具体值

hexo-theme-next主题中使用了dn-lbstatics.qbox.me域名的文件位置为：
themes\next\layout\_third-party\analytics\busuanzi-counter.swig

修改busuanzi-counter.swig

1
2
3
4
找到如下代码：
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
修改为：
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

hexo s或hexo d 后在网页上无法正常显示

问题：

1
2
网页上显示：
{% extends '_layout.swig' %}...

解决：hexo在5.0之后需要再安装个东西

1
npm i hexo-renderer-swig

hexo d部署的时候提示权限不足 Please make sure you have the correct access rights。。。

解决：打开coding.net（部署的仓库），找到项目，找到部署公钥，添加公钥（把本地 id_rsa.pub 的内容添加到网站上）

ERROR Cannot find module ‘hexo’ from ‘D:\blog_source’

问题：

1
2
3
4
hexo clean
ERROR Cannot find module ‘hexo’ from ‘D:\blog_source’
ERROR Local hexo loading failed in D:\blog_source
ERROR Try running: ‘rm -rf node_modules && npm install --force’

解决：

切换到blog_source目录，重新安装

1
npm install hexo -g #安装

部署到github上后访问不了

问题：访问 https://shenbh.github.io 拒绝了我们的连接请求

解决：访问git个人博客时报“拒绝了我们的连接请求”

  1. 查询git博客地址的ip，输入“shenbh.github.io”，搜到的结果为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    185.199.110.153 [美国 GitHub+Fastly节点]
    185.199.109.153 [美国 GitHub+Fastly节点]
    185.199.108.153 [美国 GitHub+Fastly节点]
    185.199.111.153 [美国 GitHub+Fastly节点]

    185.199.111.153 [美国 GitHub+Fastly节点]
    185.199.109.153 [美国 GitHub+Fastly节点]
    185.199.108.153 [美国 GitHub+Fastly节点]
    185.199.110.153 [美国 GitHub+Fastly节点]

  2. 把上述内容更改成以下内容，贴到hosts文件中（“C:\Windows\System32\drivers\etc\hosts”）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #github.io
    185.199.111.153 shenbh.github.io
    185.199.110.153 shenbh.github.io
    185.199.109.153 shenbh.github.io
    185.199.108.153 shenbh.github.io
    185.199.108.153 shenbh.github.io
    185.199.111.153 shenbh.github.io
    185.199.109.153 shenbh.github.io
    185.199.110.153 shenbh.github.io

在dos窗口输入ipconfig /flushdns来刷新dns解析缓存

最终hosts内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# For example:
127.0.0.1 localhost

#github.io
185.199.111.153 shenbh.github.io
185.199.110.153 shenbh.github.io
185.199.109.153 shenbh.github.io
185.199.108.153 shenbh.github.io
185.199.108.153 shenbh.github.io
185.199.111.153 shenbh.github.io
185.199.109.153 shenbh.github.io
185.199.110.153 shenbh.github.io
13.229.188.59 shenbh.github.io
52.69.186.44 shenbh.github.io

Error: Cannot find module './db.json'

解决：把node-modules删除之后重装

首页最底部的向右箭头显示成<i class="fa fa-angle-right"></i>

打开next > layout > _partials > pagination.swig把错误代码改成“上一页”、“下一页”即可

1
2
3
4
5
6
7
8
9
10
11
{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '上一页',
        next_text: '下一页',
        mid_size: 1
      })
    }}
  </nav>
{% endif %}

Unable to call symbolsCount, which is undefined or falsey

1
npm install hexo-symbols-count-time --save

新版next主题没有了auto excerpt

  1. 在网站根目录下运行
1
npm install hexo-excerpt --save
  1. 在站点配置文件里添加
1
2
3
4
5
excerpt:
  depth: 5  
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true
  1. 主题配置文件里设置
1
2
excerpt_description: true
read_more_btn: true

在某个文章上，再点搜索到的结果，出现的新链接带俩posts的问题

npm list --depth=0

查看到是安装的 hexo-generator-search@2.4.2

解决：

  1. 卸载这个search插件：npm uninstall hexo-generator-search
  2. 安装另一个search插件：npm install hexo-generator-searchdb --save

PS：记得next的 _config.yml中打开local search的开关

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: true

加载本地图片不正常

安装插件 npm install hexo-asset-image --save之后图片还显示不出来，打开/node_modules/hexo-asset-image/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
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    	var link = data.permalink;
	if(version.length > 0 && Number(version[0]) == 3)
	   var beginPos = getPosition(link, '/', 1) + 1;
	else
	   var beginPos = getPosition(link, '/', 3) + 1;
	// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
	var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
		if ($(this).attr('src')){
			// For windows style path, we replace '\' to '/'.
			var src = $(this).attr('src').replace('\\', '/');
			if(!/http[s]*.*|\/\/.*/.test(src) &&
			   !/^\s*\//.test(src)) {
			  // For "about" page, the first part of "src" can't be removed.
			  // In addition, to support multi-level local directory.
			  var linkArray = link.split('/').filter(function(elem){
				return elem != '';
			  });
			  var srcArray = src.split('/').filter(function(elem){
				return elem != '' && elem != '.';
			  });
			  if(srcArray.length > 1)
				srcArray.shift();
			  src = srcArray.join('/');
			  $(this).attr('src', config.root + link + src);
			  console.info&&console.info("update link as:-->"+config.root + link + src);
			}
		}else{
			console.info&&console.info("no src attr, skipped...");
			console.info&&console.info($(this));
		}
      });
      data[key] = $.html();
    }
  }
});

然后需要重新生成hexo cl && hexo g

文章中图片的相对路径需要使用./开头，比如 ![图片名称](./文件名称/图片名称.png)

Error: Cannot find module ‘....\package.json’

简述：就是重新clone这个next主题下来，然后具体配置自己再改下。。

Deployer not found: [35mbaidu_url_submitter

因为我不用百度推送，所以检查站点配置_config.yml，注释掉type: baidu_url_submitter

个人服务器上部署博客

需要购买ECS服务器，点击领取优惠券

原文链接

用docsify创建博客

相关教程

一些资源

主题：https://github.com/docsifyjs/awesome-docsify

切换国内镜像源

1
2
3
npm config set registry https://registry.npm.taobao.org/

npm get registry

docsify 官方 源码

docsify 官方API

初始化

  1. 安装node

  2. 安装docsify-cli

    1
    npm i docsify-cli -g

  3. 项目初始化

    我这边从git上clone下来了（路径：D:\docsify），包含了初始化后的文件，所以这步跳过

  4. 启动docsify

    cmd中cd到D:\docsify

    1
    docsify serve ./

  5. 在浏览器中输入 http://localhost:3000/ 即可查看

YankNote笔记设置

图片设置：Img