前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >重写Hexo豆瓣影评插件

重写Hexo豆瓣影评插件

原创
作者头像
ZONGLYN
修改2020-12-23 11:52:32
7670
修改2020-12-23 11:52:32
举报
文章被收录于专栏:程序萌部落

不知道从什么时候开始,习惯于在豆瓣找电影看,到了后来,就偶尔写个电影观后感,随着看电影看的越来越多,可比较的东西就越来愈多,所以现在看完一部新电影,写写自己的感想就成了固定环节了,作为一种“动态”,能够搬到博客上与他人共享那是再好不过的了,找了一圈Hexo的插件,发现都不怎么好用,那么索性就魔改个自己用的版本!

基于HEXO豆瓣插件 hexo-douban 的二次开发插,强烈建议先试用原插件,如果您觉得以下特性更能满足您的需要,那么再使用本插件。

原插件 hexo-douban 的不足:

  • 书影音、大部分人就想放影评
  • 样式不好看,字体大小的一致性即颜色
  • 渲染全部观影记录,几百部电影会导致有几十页翻页,臃肿
  • 单纯的构造豆瓣原页面,在“已看”列表中,只会出现短评内容,长影评是另外的部分
  • 构造的页面目录较深,和博客其他部分关联度不够
  • 主题兼容性问题,valine部分的缺失
  • 移动端界面不适配/合适

对应的应对措施:

  • 砍掉多余部分
  • 适当的美化了CSS
  • 设置拉取列表的长度控制
  • 魔改原有xpath解析逻辑,拉取长影评页面内容,补全到“已看”列表
  • 改动原模板中样式的位置,以便于无差别的插入到其他同原页面,提升关联度
  • 插入资源文件和valine构建代码
  • 简单的重写了移动端样式

本插件的主要特性:

  • 原项目固有特性;
  • 重构模板页面,支持移动适配;
  • 补全列表影评内容,支持短评和长影评(核心);
  • 支持生成指定长度的列表(对于观影数量较多的用户);
  • 样式inline化,允许直接嵌入同源其他页面;<div id="dbcontent"></div> <script>$('#dbcontent').load('./movies/index.html .hexo-douban-item:nth-child(1)');</script> 12

注意:本插件构建的页面完全不保证兼容IE等上古浏览器,推广使用现代浏览器,人人有责。

第一步:安装

代码语言:javascript
复制
# 如果您使用过原插件请先卸载之
$ npm uninstall --save hexo-douban
$ npm install --save hexo-douban-list

第二步:配置

将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件).

代码语言:javascript
复制
douban:
  user: ID(数字或字幕|无需引号)
  builtin: true
  movie:
    title: '生成页面的标题'
    quote: '生成页面的内容的导语'
    length: 2
    valine_id: WbLE88qfAcz4hSI5
    valine_key: ycqjmtEfUxuxD
  timeout: 10000 

注意:以上内容中务必确定 USER ID 的正确性!

  • user: 你的豆瓣ID.打开豆瓣,登入账户,然后在右上角点击 “个人主页” ,这时候地址栏的URL大概是这样:“https://www.douban.com/people/xxxxxx/” ,其中的"xxxxxx"就是你的个人ID了。
  • builtin: 是否将生成页面的功能嵌入hexo shexo g中,默认嵌入(TRUE)即npm安装后无需任何操作按原命令部署博客即可生效。
  • title: 该页面的标题。
  • quote: 写在页面开头的一段话,支持html语法。
  • length: 默认值为2,非页数,可以自由尝试(建议取值:2-4)。
  • timeout: 爬取数据的超时时间,默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

对于 valine_idvaline_key,主要针对的是Volantis主题(以及其他默认渲染评论区域的主题),如果您在测试时页面没有评论区域,则可以忽略这两项,如果出现以下显示则需要填写此两项。(这两项是什么?请移步Valine官方介绍

使用

注意,通常大家都喜欢用hexo d来作为hexo deploy命令的简化,但是当安装了hexo douban之后,就不能用hexo d了,因为hexo doubanhexo deploy的前缀都是hexo d

升级

使用 npm install hexo-douban-list --update --save 直接更新。

测试

执行 hexo clean && hexo generate && hexo server,之后访问 localhost:4000/movies 即可访问生成的影评页面。

删除(可补回来)的内容

相比较于原项目,取消或删除了以下内容:

  • 去掉了书籍和音乐,单纯针对电影
  • 去掉了影评页跳转的菜单按钮
  • 去掉了以上项目涉及的配置开关

异常

如果构建页面为空或404,且日志输出为 INFO 0 movies have been loaded in xx ms,这时怀疑您的IP由于多次请求豆瓣的页面而被豆瓣封禁了,一般第二天会解禁,使用代理或更改IP即可解决。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第一步:安装
  • 第二步:配置
  • 使用
    • 升级
      • 测试
      • 删除(可补回来)的内容
      • 异常
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档