NexT 主题配置及第三方服务集成

发表于 Disqus：

搭好了 Blog 的基础，要让它符合我们的心意，还得折腾一番。

前言

Hexo 是依赖于 Node.Js 技术生成静态页面，且 GitHub Pages 只支持部署静态页面，一些类似于评论、阅读量等需要数据库支持的功能就需要借助于第三方的服务。主题 NexT 友好的提供了一些常用功能的集成，只需简单配置，即可使用。

简介

Hexo

Hexo 是一个依赖于 Node.Js 技术的快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。支持 Markdown、一键部署、强大的插件系统和丰富的插件。中文支持良好。

NexT

NexT 是一款 Hexo Theme，主旨在于简洁优雅且易于使用。

Font Awesome

Font Awesome 是一款包含了很多常用图标的字体文件，兼容性好，完全免费。

多说

多说 是一款追求极致体验的社会化评论框，可以用微博、QQ、人人、豆瓣等帐号登录并评论。帮助用户搭建更活跃，更互动的评论平台，功能强大且永久免费。

LeanCloud

LeanCloud 是一款领先的 BaaS 提供商，为移动开发提供强有力的后端支持。一站式后端云服务，包括云存储、数据分析、用户关系、消息推送、即时通信等现代应用基础模块，满足移动开发所有需求。开发版可免费使用。

主题配置

前提：以下命令行操作都在，Hexo 博客目录下。(目录切换命令 cd XXX/Hexo)

以下默认目录为 <folder>

所有 .yml 文件，以两个空格来区分所属。冒号后跟空格才会生效。修改时需注意。

  1. 设置中文语言（<folder>/_config.yml)

    • 搜索 language 参数
    • 设置为：language: zh-Hans

  2. 设置菜单（<folder>/themes/next/_config.yml)

    • 根据需要删除前面#，取消注释即可
    • NexT 使用的是 Font Awesome 提供的图标
    • menu 与 menu_icons 一一对应。
    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
    29
    30
    # ---------------------------------------------------------------
    # Menu Settings
    # ---------------------------------------------------------------

    # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -	> archives)
    menu:
      home: /
      #categories: /categories
      #about: /about
      archives: /archives
      #tags: /tags
      #sitemap: /sitemap.xml
      #commonweal: /404.html
      
    # Enable/Disable menu icons.
    # Icon Mapping:
    #   Map a menu item to a specific FontAwesome icon name.
    #   Key is the name of menu item and value is the name of FontAwsome icon. Key is case-senstive.
    #   When an question mask icon presenting up means that the item has no mapping icon.
    menu_icons:
      enable: true
      #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
      home: home
      about: user
      categories: th
      schedule: calendar
      tags: tags
      archives: archive
      sitemap: sitemap
      commonweal: heartbeat
    • 除 home（首页）和 archives（归档），其他页面需要手动创建，例如 about （关于）页面：
    1
    $ hexo new page about

    通过该命令创建后，在 <folder>/source/ 下可以看到一个叫 about 的文件夹，里面的 index.md 就是关于页。其他页面同理。若需要添加不在列出内的页面，且需要中文支持，要在 <folder>/themes/next/languages/zh-Hans.yml 里添加对应参数与显示文字。

  3. 添加标签（tags）页面

    1
    $ hexo new page tags
    1
    2
    3
    4
    5
    6
    7
    ---
    title: 标签
    date: 2017-02-09 15:09:03
    type: "tags"
    comments: false

    ---

    文件位置：<folder>/source/tags/index.md，comments: false 表示禁用评论

    标签的使用，在文章的开头如下写上：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ---
    title: 使用 GitHub&Hexo&Next 搭建个人博客
    date: 2017-02-08 13:21:54
    tags:
        - GitHub
        - Hexo
        - Hexo-Theme-NexT

    ---

  4. 添加分类 (categories) 页面

    1
    $ hexo new page categories
    1
    2
    3
    4
    5
    6
    7
    ---
    title: 分类
    date: 2017-02-10 14:39:44
    type: "categories"
    comments: false

    ---

    文件位置：<folder>/source/categories/index.md，comments: false 表示禁用评论

    分类的使用，在文章的开头如下写上：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ---
    title: 使用 GitHub&Hexo&Next 搭建个人博客
    date: 2017-02-08 13:21:54
    tags:
        - GitHub
        - Hexo
        - Hexo-Theme-NexT
    categories: 
        - coder
        - Hexo

    ---

    Hexo 的分类是单层分类，具有顺序性和层次性，如例，Hexo 是 Coder的子分类

  5. 代码高亮（<folder>/themes/next/_config.yml)

    • 使用 Tomorrow Theme
    • 具有 5 款主题normal，night， night blue， night bright， night eighties
    1
    2
    3
    4
    5
    # Code Highlight theme
    # Available value:
    #    normal | night | night eighties | night blue | night bright
    # https://github.com/chriskempson/tomorrow-theme
    highlight_theme: night bright

  6. 设置头像（<folder>/_config.yml)，#site下加上avatar。

    • 可使用完整的 URI: http://example.com/avatar.png
    • 可放在：<folder>/source/images/avatar.png
    • 可放在：<folder>/uploads/images/avatar.png
    1
    2
    #site
    avatar: http://example.com/avatar.png

  7. 社交链接（<folder>/themes/next/_config.yml)

    • social 和 social_icons 具有对应关系
    • NexT 使用的是 Font Awesome 提供的图标
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    # Social Links
    # Key is the link label showing to end users.
    # Value is the target link (E.g. GitHub: https://github.com/iissnan)
    social:
      #LinkLabel: Link
      GitHub: https://github.com/yamdestiny
      #Twitter: twitter
      #Weibo: weibo
      Steam: http://steamcommunity.com/id/maple_wqs/

    # Social Links Icons
    # Icon Mapping:
    #   Map a menu item to a specific FontAwesome icon name.
    #   Key is the name of the item and value is the name of FontAwsome icon. Key is case-senstive.
    #   When an globe mask icon presenting up means that the item has no mapping icon.
    social_icons:
      enable: true
      # Icon Mappings.
      # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
      GitHub: github
      #Twitter: twitter
      #Weibo: weibo
      Steam: steam

第三方服务集成

  1. 多说评论系统

    1. 使用多说前需要先在多说 创建一个站点。
    2. 登录后在首页选择“我要安装”。
    3. 创建站点，填写站点相关信息。多说域名可以任意填写。
    4. 创建完成后，在 (<folder>/_config.yml) 添加两个属性
      • duoshuo_shortname: 刚刚填写的 多说域名 的填写部分。
      • duoshuo_hotartical: 热门文章推荐栏位，true or false
    1
    2
    3
    4
    5
    6
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next
    duoshuo_shortname: yamdestiny
    duoshuo_hotartical: true

  2. 阅读次数统计（LeanCloud)，参考于 Doublemine

结语

至此，Blog 该具备的功能，基本都已经有了。

1
2
3
$ hexo g	//生成静态文件
$ hexo s	//本地启动服务，http://localhost:4000，查看显示效果
$ hexo d	//部署

后续有添加再更新。

参考资料