引子
在逛別人博客空間的時候，偶然發現了可以直接在網頁上打開一個窗口和其他在線用戶聊天交流的軟件gitter，感覺很新奇很輕的聊天討論方式，就想自己的主頁上也弄一個，於是開始各種搜索……整理如下。
gitter介紹
先看看別人主頁上的gitter的效果
打開前：
打開後：
gitter的功能特色（直接摘抄官網）
- 免費無限制：用戶可以自由免費地創建、搜素、加入社區、聊天室。支持單獨私人聊天、markdown編輯、媒體文件發送等功能。
- 簡單便捷：支持github項目庫關聯創建社區，一鍵即刻加入聊天討論，僅在一個瀏覽器頁面中即可查看和訂閱多個聊天室。
- 對外開放：所有社區支持對外分享並可被搜索到，一個鏈接即可訪問參與聊天討論，用戶頭像顯示其GitHub賬號的相關信息。
gitter註冊
- gitter中文站：http://www.gitter.net.cn/
- gitter國際站：https://gitter.im
集成代碼
集成很簡單，把上面的代碼拷貝到html頁面裡就可以了。
至於HEXO，是這樣集成的（以下步驟適用Next主題）：
- 找到目錄E:\hexo\blog\themes\next\layout_third-party，可以看到很多第三方功能的顯示相關代碼都在這裡
- 在這個目錄下面新建gitter.swig文件，文件內容就是上面的集成代碼。
- 修改E:\hexo\blog\themes\next\layout_layout.swig文件，在第三方功能顯示區域添加gitter，如下（關注倒數第三行）：
{# 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 %}
{{ partial('_partials/head/head.swig', {}, {cache: theme.cache.enable}) }}
{% include '_partials/head/head-unique.swig' %}
{% block title %}{% endblock %}
{% include '_third-party/analytics/index.swig' %}
{{ partial('_scripts/noscript.swig', {}, {cache: theme.cache.enable}) }}
{% set container_class = 'container' %}
{% if theme.sidebar.position %}
{% set container_class = container_class + ' sidebar-position-' + theme.sidebar.position %}
{% endif %}
{% include '_partials/header/index.swig' %}
{{ partial('_partials/github-banner.swig', {}, {cache: theme.cache.enable}) }}
{% block content %}{% endblock %}
{% include '_partials/comments.swig' %}
{% if theme.scheme === 'Pisces' || theme.scheme === 'Gemini' %} {% include '_partials/header/sub-menu.swig' %} {% endif %}{% include '_partials/comments.swig' %}
{% if theme.sidebar.display !== 'remove' %} {% block sidebar %}{% endblock %} {% endif %}
{% if not theme.sidebar.b2t %}
{% if theme.sidebar.scrollpercent %}
0
%
{% endif %}
{% endif %}
{% if theme.needmoreshare2.enable and theme.needmoreshare2.float.enable %}
{% endif %}
{% if theme.baidushare and theme.baidushare.type === "slide" %}
{% include '_partials/share/baidushare.swig' %}
{% endif %}
{% if theme.add_this_id %}
{% include '_partials/share/add-this.swig' %}
{% endif %}
{{ partial('_partials/github-banner.swig', {}, {cache: theme.cache.enable}) }}{% if not theme.sidebar.b2t %}{% endif %} {% if theme.needmoreshare2.enable and theme.needmoreshare2.float.enable %}{% endif %} {% if theme.baidushare and theme.baidushare.type === "slide" %}{% endif %} {% if theme.add_this_id %}{% endif %}
Ending
很簡單，完工。一起期盼下Avengers：EndGame。
