0%

Hexo配置

发表于 更新于 分类于 Valine：
本文字数： 5.7k 阅读时长 ≈ 9 分钟

1. Hexo搭建博客有用的一些配置

1.1. 统计字数和时间

  • 安装命令

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

  • 安装完后在_config.yml中配置

    1
    2
    3
    4
    5
    6
    symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true
      exclude_codeblock: false #这行不能少

  • 在NexT的config中进一步配置

    1
    2
    3
    4
    5
    6
    7
    symbols_count_time:
      separated_meta: true
      item_text_post: true
      item_text_total: false
      awl: 2
      wpm: 300
      suffix: mins.

如果出现阅读字数undefined或者阅读时间NaN的情形，可以先clean然后再生成，还不行可以重启一下试试

  • 参数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    awl – Average Word Length (chars count in word). Default: 4. You can check this here.
    CN ≈ 2
    EN ≈ 5
    RU ≈ 6
    wpm – Words Per Minute. Default: 275. You can check this here.
    Slow ≈ 200
    Normal ≈ 275
    Fast ≈ 350
    suffix – If time to read less then 60 minutes, added suffix as string parameter.
    If not defined, mins. will be used as default.
    exclude_codeblock – Allow to exclude all content inside code blocks for more accurate words counting.
    If not defined, false will be used as default.
    Note for Chinese users: because in Chinese language average word length about ~1.5 and if you at most cases write posts in Chinese (without mixed English), recommended to set awl to 2 and wpm to 300.
    But if you usualy mix your posts with English, awl to 4 and wpm to 275 will be nice.

1.2. 添加站内搜索

  • 安装插件
    1
    2
    npm install hexo-generator-search --save
    npm install hexo-generator-searchdb --save

  • 安装完后在_config.yml中配置

    1
    2
    3
    4
    5
    6
    # 站内搜索
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

  • 在NexT的config中进一步配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Local Search
    # Dependencies: https://github.com/wzpan/hexo-generator-search
    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: false.

1.3. 添加热度

  • LeanCloud注册
    注册完后创建应用，然后在存储中新建class，class的名称必须为Counter
  • 在设置中的安全中心设置安全域名

  • 安装插件

    1
    npm install hexo-leancloud-counter-security --save

  • 安装完后在_config.yml中配置

    1
    2
    3
    4
    5
    6
    leancloud_counter_security:
      enable_sync: true
      app_id: <<your app id>>
      app_key: <<your app key>
      username: 
      password:

其中采用hexo lc-counter r <<username>> <<password>>命令注册用户（注意：密码不包括感叹号之类的），用户和密码可以选择配置到对应位置，如果不配置，每次部署记得输入用户名或者密码就好。

  • NexT的config中配置
    到LendCloud应用class设置里面复制id和key，拷贝到对应位置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # Show number of visitors to each article.
    # You can visit https://leancloud.cn to get AppID and AppKey.
    leancloud_visitors:
      enable: true
      app_id: # <app_id>
      app_key: # <app_key>
      # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
      # If you don't care about security in leancloud counter and just want to use it directly
      # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
      security: true
      betterPerformance: false

  • 页面LeanCloud访问统计提示’Counter not initialized! See more at console err msg.’
    可以按照该文进行修复
    NexT主题使用的Leancloud访客统计插件存在重大安全漏洞

  • 多个部署
    1
    2
    3
    4
    5
    deploy:
    - type: git
      repository: git@github.com:SXong/SXong.github.io.git
      branch: master
    - type: leancloud_counter_security_sync

1.4 采用动态背景图片

首先，在next/source/css/_custom中创建custom.styl文件
然后，在custom.styl文件中输入以下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body {
    background:url(https://source.unsplash.com/random/1600x900);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    
}
.main-inner {
    margin-top: 60px;
    padding: 60px 60px 60px 60px;
    background: #fff;
    opacity: 0.8;
    min-height: 500px;
    border-radius: 1em; //边框圆角
}

常用的随机图片API接口有：
https://unsplash.it/1600/900?random
https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture
https://uploadbeta.com/api/pictures/random
https://source.unsplash.com/random
最后，在main.styl中应用custom.styl

1
@import "_custom/custom.styl";

1.5. 增加加密文档

  • 首先需要安装插件，插件网址请点这

    1
    npm install --save hexo-blog-encrypt

  • 在_config.yml中配置标签和密码等信息
    在_config.yml配置后，就不需要在每一篇文章中配置信息了，只要在文章中添加加密的标签名就好

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # 私密文档
    encrypt: # hexo-blog-encrypt
      abstract: 文章加密了~~~，需要输入密码继续阅读~~~
      message: 此处输入密码，嘻嘻~~~
      tags:
      - {name: 加密文档, password: passwordA}
      - {name: encryptAsTips, password: passwordB}
      template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
      wrong_pass_message: Oh, this is an invalid password. Check and try again, please.
      wrong_hash_message: Oh, these decrypted content cannot be verified, but you can still have a look.

  • 单独文章配置
    如果是想对单个文章配置加密标签和密码，可以仿照_config.yml中设置，以下是参考格式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ---
    title: test
    date: 2020-12-02 21:32:13
    categories: 生活
    tags: [加密文档]
    password: mikemessi
    abstract: Here's something encrypted, password is required to continue reading.
    message: Hey, password is required here.
    wrong_pass_message: Oh, this is an invalid password. Check and try again, please.
    wrong_hash_message: Oh, these decrypted content cannot be verified, but you can still have a look.
    ---