为你的Hexo加上评论系统-Valine

一、注册Leancloud

# 打开网站,按要求注册
https://www.leancloud.cn/

二、配置leancloud

1. 创建应用

2. 进入配置--存储

# 创建class
查看是否有Comment和 Counter,没有则创建,权限设为无限制。

3.设置 > 安全中心 ,将除了数据存储的服务全部关闭。

4. 最后点击应用 Key 取得我们 AppKey 和 App id

三、在Hexo Next主题中配置

1.打开主题_config.yml

2.找到valine,设置一下内容

enable: true
appid: xxxx
appkey: xxxx
language: zh-cn

四、指定文章(页面)评论功能是否开启

我们可以在 Front-matter 中通过comments属性设置true或false控制该页面或者是文章的评论功能是否打开,如我设置标签页面的评论功能关闭:

title: 标签
date: 2019-07-18 15:16:50
type: "tags"
comments: false

hexo在文章中添加图片

1.安装插件

npm install hexo-asset-image --save

2.站点配置

# 在_config.yml配置文件中,修改为 
post_asset_folder: true

3.新建文章时就会产生同名文件夹

hexo new hexo在文章中添加图片

如图:

01.png01.png

4.添加图片到文章中

02.png02.png

5.如果插入图片无法显示,请修改插件内容

打开/node_modules/hexo-asset-image/index.js,将内容更换为下面的代码

'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 next主题设定代码高亮格式

1.首先需要动的地方有:

  • 主题的_config.yml文件
  • 站点的_config.yml文件
  • 代码块的语言标注

2.在站点的配置文件中,搜索hightlight:

highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

文字自动检测默认不启动,所以改成true使其起作用。

3.再到主题的配置文件:

highlight_theme: normal,注释显示有五种显示主题可用

  • normal
  • night
  • night eighties
  • night blue
  • night bright

4.代码中设置

'``Python 
code here 
'`` 

Hexo-NexT主题内添加pdf插件

1.安装插件

npm install --save hexo-pdf

2.next/_config.yml中修改此处:打开pdf

pdf:
  enable: true
  # Default height
  height: 500px
  pdfobject:
    # Use 2.1.1 as default, jsdelivr as default CDN, works everywhere even in China
    cdn: //cdn.jsdelivr.net/npm/pdfobject@2.1.1/pdfobject.min.js
    # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
    #cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js

3.新建页面

hexo new test

4.在生成的md文件中添加pdf

外部链接:
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}
本地连接:把pdf放置到source文件夹下pdf文件夹下
{% pdf /pdf/文件名.pdf %}

给HexoNext设置阅读全文的两种方式

Hexo 的 Next 主题默认是首页显示你每篇文章的全文内容,但这会使你的首页篇幅过于冗长,针对这个问题我们可以这么做:

第一种方法:

用编辑器打开themes/next 目录下的_config.yml文件,找到代码:

auto_excerpt:
  enable: false
  length: 150

将enable的 false改成true,length可以设定文章预览的文本长度。

第二种方法:

用md写的话,在文章里加“<!-- more -->” 会自动截断

备注:next7.6版本关于设置阅读全文

cnpm install hexo-excerpt --save
在站点配置中添加:
excerpt:
  depth: 10
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true