Hexo主题折腾日记(二) 添加豆瓣和聊天插件

Hexo主题折腾日记(二) 添加豆瓣和聊天插件

前言

今上午翻看别人的博客,看到了Next主题相关优化的帖子,有关于豆瓣主页和博客聊天插件的内容,于是就想在 icarus 主题内也实现这个功能,折腾了一下午,终于搞好了。

豆瓣主页插件

实现效果

配置

  1. 安装模块依赖
    $ npm install hexo-douban --save
  2. 在站点配置文件中添加配置
    _config.xml 文件中添加
    1
    douban:
    2
      user: mythsman
    3
      builtin: false
    4
      book:
    5
        title: 'This is my book title'
    6
        quote: 'This is my book quote'
    7
      movie:
    8
        title: 'This is my movie title'
    9
        quote: 'This is my movie quote'
    10
      game:
    11
        title: 'This is my game title'
    12
        quote: 'This is my game quote'
    13
      timeout: 10000

说明:

  • user: 你的豆瓣ID.打开豆瓣,登入账户,然后在右上角点击 “个人主页” ,这时候地址栏的URL大概是这样:”https://www.douban.com/people/xxxxxx/" ,其中的”xxxxxx”就是你的个人ID了。
  • builtin: 是否将生成页面的功能嵌入hexo s和hexo g中,默认是false,另一可选项为true, 如果豆瓣更新频率不高建议选择false,没有必要再每一次部署的时候重新生成豆瓣的页面
  • title: 该页面的标题.
  • quote: 写在页面开头的一段话,支持html语法.
  • timeout: 爬取数据的超时时间,默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
    如果只想显示某一个页面(比如movie),那就把其他的配置项注释掉即可。
  1. 修改/layout/common/article.ejs

    1
    <%- list_categories(post.categories, {
    2
                        class: 'has-link-grey ',
    3
                        show_count: false,
    4
                        style: 'none',
    5
                        separator: '&nbsp;/&nbsp;'
    6
                    }) %>
    7
                    </div>
    8
                    <% } %>
    9
    +               <% if (post._content && word_count(post._content)) { %>
    10
                        <% if (!has_config('article.readtime') || get_config('article.readtime') === true) { %>
    11
                        <span class="level-item has-text-grey">
    12
                            <% const words = word_count(post._content); %>
    13
                            <% const time = duration((words / 150.0) * 60, 'seconds') %>
    14
                            <%= `${ time.locale(get_config('language', 'en')).humanize() } ${ __('article.read')} (${ __('article.about') } ${ words } ${ __('article.words') })` %>
    15
                        </span>
    16
                    <% } %>
    17
    +               <% } %>
    18
                    <% if (!index && (has_config('plugins.busuanzi') ? get_config('plugins.busuanzi') : false)) { %>
    19
                    <span class="level-item has-text-grey" id="busuanzi_container_page_pv">
    20
                        <i class="far fa-eye"></i>
    21
                        <%- _p('plugin.visit', '<span id="busuanzi_value_page_pv">0</span>') %>
  2. 测试并发布
    hexo douban -bgm && hexo server
    如果终端没有报错且网页 http://localhost:4000/books, http://localhost:4000/movies, http://localhost:4000/movies 没有问题,就可以直接发布了,这里注意 bgm = books+ games+ movies, 如果前面的配置中只选择了 books,那这里只需要 hexo douban -b 即可,其他同理。

  3. 主题文件修改
    在对应主题的 _config.xml 文件 menu 模块添加对应的配置,示例如下。

    1
    menu:
    2
        Home: /
    3
        About: /about
    4
        Articles: /archives
    5
        Gallery: /gallery
    6
        Books: /books

    最后测试发布

博客聊天插件

实现效果

配置

  1. 首先需要注册 Tidio 账号,根据引导填写应用信息。
  2. 在个人主页中选择 Channels -> Live Chat -> Integration ,复制 JS 代码
  3. 修改 /layout/layout.ejs, 在文件最后插入对应的代码.
    1
        <% } %>
    2
    +    <script src="//code.tidio.co/token.js" async></script>
    3
    </body>
    4
    </html>
    其中将token替换成你对应的token即可,接下来可以在 Tidio 控制台的 Channel -> Live chat -> Appearance 中根据提示定制聊天对话框的主题外观和语言包,以适应自己的需求。

# Recommend Posts
 1.1/1/2019 - 12/31/2019
 2.1/1/2019 - 12/31/2019
 3.82 年生的金智英
 4.Hexo主题折腾日记(二) 添加豆瓣和聊天插件
 5.Hexo主题折腾日记(一) 从cactus到icarus

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×