给基于HEXO的博客添加gitter在线交流

最新推荐文章于 2020-04-15 08:39:28 发布

零壹视界

最新推荐文章于 2020-04-15 08:39:28 发布

阅读量1.2k

点赞数

分类专栏：博客搭建文章标签： hexo gitter

本文链接：https://blog.csdn.net/u011606307/article/details/89504541

版权

博客搭建专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引子

在逛别人博客空间的时候，偶然发现了可以直接在网页上打开一个窗口和其他在线用户聊天交流的软件gitter，感觉很新奇很轻的聊天讨论方式，就想自己的主页上也弄一个，于是开始各种搜索……整理如下。

gitter介绍

先看看别人主页上的gitter的效果

打开前：

零壹视界

打开后：

零壹视界

gitter的功能特色（直接摘抄官网）

免费无限制：用户可以自由免费地创建、搜素、加入社区、聊天室。支持单独私人聊天、markdown编辑、媒体文件发送等功能。
简单便捷：支持github项目库关联创建社区，一键即刻加入聊天讨论，仅在一个浏览器页面中即可查看和订阅多个聊天室。
对外开放：所有社区支持对外分享并可被搜索到，一个链接即可访问参与聊天讨论，用户头像显示其GitHub账号的相关信息。

gitter注册

gitter中文站：http://www.gitter.net.cn/
gitter国际站：https://gitter.im

集成代码

<script>
  ((window.gitter = {}).chat = {}).options = {
    //room替换成自己的聊天室名称即可，room的名称规则是：username/roomname
    room: 'xetlab/community'
  };
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

集成很简单，把上面的代码拷贝到html页面里就可以了。

至于HEXO，是这样集成的（以下步骤适用Next主题）：

找到目录E:\hexo\blog\themes\next\layout_third-party，可以看到很多第三方功能的显示相关代码都在这里

零壹视界

在这个目录下面新建gitter.swig文件，文件内容就是上面的集成代码。
修改E:\hexo\blog\themes\next\layout_layout.swig文件，在第三方功能显示区域添加gitter，如下（关注倒数第三行）：

<!DOCTYPE html>

{# NexT version #}
{% set version = next_env('version') %}

{# Language & Config #}
{% set title = __('title') !== 'title' && __('title') || config.title %}
{% set subtitle = __('subtitle') !== 'subtitle' && __('subtitle') || config.subtitle %}
{% set author = __('author') !== 'author' && __('author') || config.author %}
{% set description = __('description') !== 'description' && __('description') || config.description %}

{% set html_class = 'theme-next ' + theme.scheme %}
{% if theme.motion.enable %}
  {% set html_class = html_class + ' use-motion' %}
{% endif %}

<html class="{{ html_class | lower }}" lang="{{ config.language }}">
<head>
  {{ partial('_partials/head/head.swig', {}, {cache: theme.cache.enable}) }}
  {% include '_partials/head/head-unique.swig' %}
  <title>{% block title %}{% endblock %}</title>
  {% include '_third-party/analytics/index.swig' %}
  {{ partial('_scripts/noscript.swig', {}, {cache: theme.cache.enable}) }}
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang || page.language || config.language }}">

  {% set container_class = 'container' %}
  {% if theme.sidebar.position %}
    {% set container_class = container_class + ' sidebar-position-' + theme.sidebar.position %}
  {% endif %}

  <div class="{{ container_class }} {% block page_class %}{% endblock %}">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner">{% include '_partials/header/index.swig' %}</div>
    </header>

    {{ partial('_partials/github-banner.swig', {}, {cache: theme.cache.enable}) }}

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          {% if theme.scheme === 'Pisces' || theme.scheme === 'Gemini' %}
            {% include '_partials/header/sub-menu.swig' %}
          {% endif %}
          <div id="content" class="content">
            {% block content %}{% endblock %}
          </div>
          {% include '_partials/comments.swig' %}
        </div>
        {% if theme.sidebar.display !== 'remove' %}
          {% block sidebar %}{% endblock %}
        {% endif %}
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        {{ partial('_partials/footer.swig', {}, {cache: theme.cache.enable}) }}
        {% include '_third-party/analytics/analytics-with-widget.swig' %}
        {% block footer %}{% endblock %}
      </div>
    </footer>

    {% if not theme.sidebar.b2t %}
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        {% if theme.sidebar.scrollpercent %}
          <span id="scrollpercent"><span>0</span>%</span>
        {% endif %}
      </div>
    {% endif %}

    {% if theme.needmoreshare2.enable and theme.needmoreshare2.float.enable %}
      <div id="needsharebutton-float">
        <span class="btn">
          <i class="fa fa-share-alt" aria-hidden="true"></i>
        </span>
      </div>
    {% endif %}

    {% if theme.baidushare and theme.baidushare.type === "slide" %}
      <div>
        {% include '_partials/share/baidushare.swig' %}
      </div>
    {% endif %}

    {% if theme.add_this_id %}
      <div>
        {% include '_partials/share/add-this.swig' %}
      </div>
    {% endif %}
  </div>

  {% include '_scripts/vendors.swig' %}
  {% include '_scripts/commons.swig' %}

  {% set scheme_script = '_scripts/schemes/' + theme.scheme | lower + '.swig' %}
  {% include scheme_script %}

  {% block script_extra %}{% endblock %}

  {% include '_scripts/boostrap.swig' %}

  {% include '_third-party/comments/index.swig' %}
  {% include '_third-party/search/index.swig' %}
  {% include '_third-party/analytics/lean-analytics.swig' %}
  {% include '_third-party/analytics/firestore.swig' %}
  {% include '_third-party/math/index.swig' %}
  {% include '_third-party/pdf.swig' %}
  {% include '_third-party/baidu-push.swig' %}
  {% include '_third-party/schedule.swig' %}
  {% include '_third-party/needsharebutton.swig' %}
  {% include '_third-party/rating.swig' %}
  {% include '_third-party/pangu.swig' %}
  {% include '_third-party/scroll-cookie.swig' %}
  {% include '_third-party/exturl.swig' %}
  {% include '_third-party/bookmark.swig' %}
  {% include '_third-party/copy-code.swig' %}
  {% include '_third-party/gitter.swig' %}
</body>
</html>

Ending

很简单，完工。一起期盼下Avengers：EndGame。

关于零壹视界

个人博客：http://www.xetlab.com
零壹视界

零壹视界

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
给基于HEXO的博客添加gitter在线交流

引子在逛别人博客空间的时候，偶然发现了可以直接在网页上打开一个窗口和其他在线用户聊天交流的软件gitter，感觉很新奇很轻的聊天讨论方式，就想自己的主页上也弄一个，于是开始各种搜索……整理如下。gitter介绍先看看别人主页上的gitter的效果打开前：打开后：gitter的功能特色（直接摘抄官网）免费无限制：用户可以自由免费地创建、搜素、加入社区、聊天室。支持单独私人聊天、...
复制链接

扫一扫