Fork me on GitHub

hexo Next主题如何集成 hexo-leancloud-counter-security 插件

  记录一次大折腾。LeanCLoud这个是记录单篇博文阅读量的一个东西,感觉配置这特别麻烦,配置了很多天还不行。这次学习了之后,发现这个东西还是挺麻烦的。多配几次就不麻烦了。mark一下。

在配置前,请升级NexT至v6.0.6以上。

在配置过程中请注意博客配置文件主题配置文件的区别。


注册Leancloud并创建应用

  • 首先,前往Leancloud官网leancloud.cn进行注册,并登陆。

  • 然后点击图示1处,进入控制台:

    1

  • 接着,点击图示1处,创建应用:

    2

  • 在弹出窗口1处输入应用名称(可随意输入,可更改,为演示方便取名为test),并选择2处“开发版”,然后点击3处创建:

    3

到这里应用创建完成。

建立Counter类并在NexT中启用插件

  • 点击1处应用名称进入应用管理界面:

    4

  • 如图,点击侧边栏1处创建Class:

    5

  • 在弹出窗口1处填入Counter,勾选2处无限制,并点击3处创建Class:

    6

  • 此时类已创建完成。接下来点击图示1处进入设置,然后点击2处进入应用Key:

    8

  • 粘贴App IDApp KeyNexT主题配置文件_config.yml对应位置。此时配置文件应如下:

    1
    2
    3
    4
    5
    leancloud_visitors:
    enable: true
    security: true
    app_id: <<your app id>>
    app_key: <<your app key>>
  • 设置Web安全域名确保域名调用安全。点击1处进入安全中心,然后在2处填写自己博客对应的域名(注意协议、域名和端口号需严格一致):

    9

到这里内容均与Doublemine的为NexT主题添加文章阅读量统计功能这篇文章相同,只不过截图为新版的Leancloud的界面。

部署云引擎以保证访客数量不被随意篡改

  • 点击左侧1处云引擎,然后点击2处部署,再点击3处在线编辑:

    10

  • 点击1处创建函数:

    11

  • 在弹出窗口选择1Hook类型,然后2处选择beforeUpdate3处选择刚才建立的Counter类。在4中粘贴下方代码后,点5处保存。

    1
    2
    3
    4
    5
    6
    7
    8
    var query = new AV.Query("Counter");
    if (request.object.updatedKeys.indexOf('time') !== -1) {
    return query.get(request.object.id).then(function (obj) {
    if (obj.get("time") + 1 !== request.object.get("time")) {
    throw new AV.Cloud.Error('Invalid update!');
    }
    })
    }

    如图所示:

    12

  • 点击保存后应出现类似红框处函数。此时点击1处部署:

    13

  • 在弹出窗口点击1处部署:

    14

  • 等待出现红框处的成功部署信息后,点击1处关闭:

    15

至此云引擎已成功部署,任何非法的访客数量更改请求都将失败。

进一步设置权限

  • 打开NexT主题配置文件_config.yml,将leancloud_visitors下的security设置为true(如没有则新增):

    1
    2
    3
    4
    5
    6
    7
    leancloud_visitors:
    enable: true
    app_id: <<your app id>>
    app_key: <<your app key>>
    # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
    security: true
    betterPerformance: false

    betterPerformance选项的说明:

    由于Leancloud免费版的云引擎存在请求线程数和运行时间限制以及休眠机制,很多时候访客数量加载会很慢。如果设置betterPerformancetrue,则网页则会在提交请求之前直接显示访客人数为查询到的人数+1,以增加用户体验。

  • 打开cmd并切换至博客根目录,键入以下命令以安装hexo-leancloud-counter-security插件:

    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:
  • 在相同目录键入以下命令:

    1
    hexo lc-counter register <<username>> <<password>>

    1
    hexo lc-counter r <<username>> <<password>>

    <<username>><<password>>替换为你自己的用户名和密码(不必与leancloud的账号相同)。此用户名和密码将在hexo部署时使用。

    • 打开博客配置文件_config.yml,将<<username>><<password>>替换为你刚刚设置的用户名和密码:

      1
      2
      3
      4
      5
      6
      leancloud_counter_security:
      enable_sync: true
      app_id: <<your app id>>
      app_key: <<your app key>
      username: <<your username>> #如留空则将在部署时询问
      password: <<your password>> #建议留空以保证安全性,如留空则将在部署时询问
  • 博客配置文件_config.ymldeploy下添加项:

    1
    2
    3
    deploy:
    # other deployer
    - type: leancloud_counter_security_sync
  • 返回Leancloud控制台的应用内。依次点击1 2,检查_User表中是否出现一条记录(图示以用户名为admin为例):

    16

  • 点击1处进入Counter表,依次点击2 3,打开权限设置:

    17

  • 点击1add_fields后选择2指定用户, 并将下两栏留空:此处应与下条create设置相同(选择你所创建的用户):

    18

  • 点击1create后选择2指定用户, 在3处键入用户名,点击4处后点击5处添加:

    19

    完成此步操作后,界面应与图示类似:

    20

  • 点击1delete后选择2指定用户, 并将下两栏留空:

    21

至此权限已设置完成,数据库记录只能在本地增删。

每次运行hexo d部署的时候,插件都会扫描本地source/_posts下的文章并与数据库对比,然后在数据库创建没有录入数据库的文章记录。

如果在博客配置文件中留空username或password,则在部署过程中程序会要求输入。


以上就是Next 主题对 LeanCLoud 配置的官方教程,但是我在这个步骤中遇到了以下的问题:

1
2
3
deploy:
# other deployer
- type: leancloud_counter_security_sync
1
2
3
4
5
6
7
8
9
10
11
12
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: fatal: 'leancloud_counter_security_sync' does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

at ChildProcess.<anonymous> (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/hexo-util/lib/spawn.js:37:17)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at maybeClose (internal/child_process.js:915:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
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
gclm@gclm-MacBook-Pro  /Volumes/Workspace/OneDrive - 广厚设计学校/hexo   hexo ●  hexo d:ATAL bad indentation of a mapping entry at line 139, column 3:
- type: leancloud_counter_securi ...
^
YAMLException: bad indentation of a mapping entry at line 139, column 3:
- type: leancloud_counter_securi ...
^
at generateError (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/js-yaml/lib/js-yaml/loader.js:165:10)
at throwError (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/js-yaml/lib/js-yaml/loader.js:171:9)
at readBlockMapping (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/js-yaml/lib/js-yaml/loader.js:1080:7)
at composeNode (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/js-yaml/lib/js-yaml/loader.js:1332:12)
at readDocument (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/js-yaml/lib/js-yaml/loader.js:1492:3)
at loadDocuments (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/js-yaml/lib/js-yaml/loader.js:1548:5)
at Object.load (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/js-yaml/lib/js-yaml/loader.js:1569:19)
at Hexo.yamlHelper (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/hexo/lib/plugins/renderer/yaml.js:7:15)
at Hexo.tryCatcher (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/bluebird/js/release/util.js:16:23)
at Hexo.<anonymous> (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/bluebird/js/release/method.js:15:34)
at Promise.then.text (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/hexo/lib/hexo/render.js:61:21)
at tryCatcher (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/bluebird/js/release/promise.js:512:31)
at Promise._settlePromise (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/bluebird/js/release/promise.js:569:18)
at Promise._settlePromise0 (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/bluebird/js/release/promise.js:614:10)
at Promise._settlePromises (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/bluebird/js/release/promise.js:693:18)
at Async._drainQueue (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/bluebird/js/release/async.js:133:16)
at Async._drainQueues (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/bluebird/js/release/async.js:143:10)
at Immediate.Async.drainQueues (/Volumes/Workspace/OneDrive - 广厚设计学校/hexo/node_modules/bluebird/js/release/async.js:17:14)
at runCallback (timers.js:810:20)
at tryOnImmediate (timers.js:768:5)
at processImmediate [as _immediateCallback] (timers.js:745:5)

我在官方教程中没有找到相应问题的解决方案,最后在一位大佬的博客中找到了问题的解决方案.

1
2
3
4
5
6
7
8
9
10
11
12
13
# Deployment  | 部署配置
## Docs: https://hexo.io/docs/deployment.html
deploy:
-
type: git
#repo: https://git.coding.net/gclm/gclm.git,master
repo:
# 部署到github
github: https://github.com/gclm/gclm.github.io.git,master
# 部署到coding.net
coding: https://git.coding.net/gclm/gclm.git,master
-
type: leancloud_counter_security_sync

这个问题其实很简单,就是博客配置文件中deploy的那个位置配置错误。如果诸位要问一个为什么的话,请百度 YAML语法’ 就可以解决疑惑了。

参考链接

本文标题:hexo Next主题如何集成 hexo-leancloud-counter-security 插件

文章作者:孤城落寞

发布时间:2018年11月04日 - 15:30:11

最后更新:2018年11月04日 - 16:00:41

原始链接:https://blog.gclmit.club/archives/344cc1f2.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。



-------------本文结束 感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!