Hexo博客Next主题配置

发表于 | 分类于 | |

前面我们介绍了如何在搬瓦工VPS上快速搭建自己的个人博客,不会的小伙伴赶快去学习一下

其中我们也介绍了如何将Hexo默认的主题替换为Next主题，但是Next的原始配置还是太过简洁，看上去不尽人意

因此这次我们就来学习一下如何优化Next的配置，丰富其功能。一起来吧~~

站点设置

展示社交联系方式

  • 编辑站点配置文件
  • 修改socal字段，并注释相应的字段，修改值

设置社交链接居中对齐

  • 修改themes\next\source\css\_common\components\sidebar\sidebar-author-links.styl文件，添加如下样式
    1
    2
    3
    .links-of-author-item {
      text-align: center;
    }

添加友链

  • 编辑主题配置文件

  • 添加如下内容

    1
    2
    3
    4
    5
    # title, chinese available
    links_title: 友情链接
    # links
    links:
      百度: https://www.baidu.com/

  • 修改Blog rolls下的links_title为中文

设置友链左对齐

  • 本博客侧栏友情链接使用了与侧栏社交链接相同的css样式，但文本左对齐
  • 实现方法为：
    修改themes\next\layout\_macro\sidebar.swig，将如下内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <ul class="links-of-blogroll-list">
      {% for name, link in theme.links %}
        <li class="links-of-blogroll-item">
          <a href="{{ link }}" title="{{ name }}" target="_blank">
            {{ name }}
          </a>
        </li>
      {% endfor %}
    </ul>

修改为

1
2
3
4
5
6
7
8
9
<ul class="links-of-blogroll-list">
    {% for name, link in theme.links %}
        <span class="links-of-author-item" style="text-align:left">
            <a href="{{ link }}" title="{{ name }}" target="_blank">
                {{ name }}
            </a>
        </span>
    {% endfor %}
</ul>

SEO推广

sitemap

  • Sitemap用于通知搜索引擎网站上有哪些可供抓取的网页，以便搜索引擎可以更加智能地抓取网站
  • 执行命令npm install hexo-generator-sitemap --save和npm install hexo-generator-baidu-sitemap --save，安装插件，用于生成sitemap
  • 运行hexo g生成站点文件
  • 在站点配置文件中添加如下字段
    1
    2
    3
    4
    5
    # Sitemap Setting
    sitemap:
      path: sitemap.xml
    baidusitemap:
      path: baidusitemap.xml

添加 robots.txt

  • 文件放在站点的source文件夹下
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    User-agent: *
    Allow: /
    Allow: /archives/

    Disallow: /js/
    Disallow: /css/
    Disallow: /fonts/
    Disallow: /lib/
    Disallow: /fancybox/

    Sitemap: http://www.cylong.com/sitemap.xml
    Sitemap: http://www.cylong.com/baidusitemap.xml

添加字数统计

  • 安装hexo-wordcount插件npm install hexo-wordcount --save

  • 在站点配置文件中开启字数统计配置

    1
    2
    # 字数统计
    word_count: true

  • 然后在/themes/next/layout/_partials/footer.swig文件尾部加上

    1
    2
    3
    4
    <div class="theme-info">
      <div class="powered-by"></div>
      <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
    </div>

主题设定

  • version: 6.0.3

    选择 Scheme

  • Scheme是NexT提供的一种特性
  • 借助于Scheme，NexT提供了多种不同的外观
  • 同时，几乎所有的配置都可以在Scheme之间共用
  • 目前NexT支持三种Scheme，他们是：
    • Muse - 默认Scheme，这是 NexT最初的版本，黑白主调，大量留白
    • Mist - Muse的紧凑版本，整洁有序的单栏外观
    • Pisces - 双栏Scheme，小家碧玉似的清新
  • Scheme的切换通过更改主题配置文件，搜索scheme关键字，你会看到有三行Scheme的配置，将你需用启用的scheme前面注释#去除即可
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # ---------------------------------------------------------------
    # Scheme Settings
    # ---------------------------------------------------------------

    # Schemes
    #scheme: Muse
    #scheme: Mist
    scheme: Pisces
    #scheme: Gemini

设置语言

  • 编辑站点配置文件，将language设置成你所需要的语言
  • 具体支持的语言可以查看官网说明
  • 建议明确设置你所需要的语言，例如选用简体中文，配置如下
    1
    language: zh-CN

设置菜单

展示菜单内容

  • 菜单配置包括三个部分
    • 第一是菜单项（名称和链接）
    • 第二是菜单项的显示文本
    • 第三是菜单项对应的图标。NexT使用的是Font Awesome提供的图标，Font Awesome提供了600+的图标，可以满足绝大的多数的场景，同时无须担心在Retina屏幕下图标模糊的问题。

  • 编辑主题配置文件，修改以下内容：

    • 设定菜单内容，对应的字段是menu菜单内容的设置格式是：item name: link。其中item name是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      # ---------------------------------------------------------------
      # Menu Settings
      # ---------------------------------------------------------------

      # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
      # Usage: `Key: /link/ || icon`
      # Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
      # Value before `||` delimeter is the target link.
      # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
      menu:
        home: / || home
        archives: /archives/ || archive
        tags: /tags/ || tags
        categories: /categories/ || th
        about: /about/ || user
        #schedule: /schedule/ || calendar
        #sitemap: /sitemap.xml || sitemap
        #commonweal: /404/ || heartbeat

    • 注意：若你的站点运行在子目录中，请将链接前缀的/去掉

    • NexT默认的菜单项有（斜体的项表示需要手动创建这个页面）

      键值 | 设定值 | 显示文本（简体中文）
      —|— | —
      home | home: / | 主页
      archives | archives: /archives | 归档页
      categories | categories: /categories | 分类页
      tags | tags: /tags | 标签页
      about | about: /about | 关于页面
      commonweal | commonweal: /404.html | 公益 404

    • 设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置NexT主题目录下的languages/{language}.yml（{language} 为你所使用的语言）
      以简体中文为例，若你需要添加一个菜单项，比如something。那么就需要修改简体中文对应的翻译文languages/zh-Hans.yml

添加标签页

  • 在站点source文件夹下，建立tags目录
  • 在tags目录中创建index.md，内容如下：
    1
    2
    3
    4
    5
    6
    ---
    title: 标签
    date: 2018-02-04 21:33:54
    type: "tags"
    comments: false
    ---

添加分类页

  • 在站点source文件夹下，建立categories目录
  • 在categories目录中创建index.md，内容如下：
    1
    2
    3
    4
    5
    6
    ---
    title: 分类
    date: 2018-02-04 21:33:54
    type: "categories"
    comments: false
    ---

添加关于页

  • 在站点source文件夹下，建立about目录
  • 在about目录中创建index.md，具体内容参加github源码

设置侧栏

  • 默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。 可以通过修改主题配置文件中的sidebar字段来控制侧栏的行为。

  • 侧栏的设置包括两个部分，其一是侧栏的位置， 其二是侧栏显示的时机。

    • 设置侧栏的位置，修改sidebar.position的值，支持的选项有

      • left - 靠左放置
      • right - 靠右放置
        1
        2
        sidebar:
           position: left

    • 设置侧栏显示的时机，修改sidebar.display的值，支持的选项有

      • post - 默认行为，在文章页面（拥有目录列表）时显示
      • always - 在所有页面中都显示
      • hide - 在所有页面中都隐藏（可以手动展开）
      • remove - 完全移除
        1
        2
        sidebar:
            display: post

设置头像

  • 编辑站点配置文件， 添加字段avatar，值设置成头像的链接地址
  • 其中，头像的链接地址可以是：
    • 完整的互联网 URI
    • 站点内的地址
      • 将头像放置主题目录下的source/uploads/（新建uploads目录若不存在），配置为：avatar:/uploads/avatar.png
      • 或者 放置在 source/images/目录下，配置为：avatar: /images/avatar.png
        1
        2
        # Avatar
        avatar: /images/avatar.jpg

设置作者昵称

  • 编辑站点配置文件
  • 设置author为你的昵称

设置站点描述

  • 编辑站点配置文件
  • 设置description为你的站点描述。站点描述可以是你喜欢的一句签名:)

设置首页预览和阅读全文

  • 编辑主题配置文件
  • 设置auto_excerpt的配置
    1
    2
    3
    auto_excerpt:
      enable: true
      length: 300

关闭打开文章自动跳转到more

  • 编辑主题配置文件
  • 修改scroll_to_more值为false

fontawesome图标显示问题

  • 2018-02-12更新*
    今天早上打开博客发现导航的图标不能正常显示了。然而本地启动确实正常了。经过一番检查，发现是服务器上无法加载fontawesome的css。没办法，只能自己指定fontawesome的css的地址了

编辑主题配置文件，指定fontAwesome的cdn地址

1
fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

集成第三方服务

百度统计

  • 登录百度统计, 定位到站点的代码获取页面
  • 复制 hm.js? 后面那串统计脚本 id，如
    image
  • 编辑主题配置文件，修改字段 baidu_analytics字段，值设置成你的百度统计脚本id

谷歌统计

  • 需科学上网
  • 登录谷歌统计， 定位到管理页面
  • 创建新的媒体资源，获取跟踪id
  • 编辑主题配置文件，添加字段 google_analytics字段，值设置成你的谷歌统计跟踪id

集成Disqus评论

  • 注册登陆Disqus
  • 点击Admin进入管理页面
  • 选择第二个I want to install Disqus on my site
  • 按照表单填写信息，记住Website Name这条属性，配置文件中需要用到
  • 接下来按照指引填写信息（基本都是默认就行）
  • 安装过程中会出现下面页面，这里面会有disqus在不同博客系统上或者其他系统上对应的代码。因为hexo自带支持disqus，所以不需要这里面的代码，这个页面的内容会在其他除hexo之外的博客系统中用到，如果是hexo搭建博客disqus，可以跳过
    image
  • 接下来配置主题下面的config.yml文件
    1
    2
    3
    4
    5
    6
    # Disqus
    disqus:
      enable: true
      shortname: winsky #就是前面填写的Website Name属性
      count: true
      lazyload: false

不蒜子

  • 编辑主题配置文件中的busuanzi_count的配置项
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    busuanzi_count:
      # count values only if the other configs are false
      enable: true
      # custom uv span for the whole site
      site_uv: true
      site_uv_header: <i class="fa fa-user"></i>
      site_uv_footer: 人
      # custom pv span for the whole site
      site_pv: true
      site_pv_header: <i class="fa fa-eye"></i>
      site_pv_footer: 次
      # custom pv span for one page only
      page_pv: true
      page_pv_header: <i class="fa fa-file-o"></i>
      page_pv_footer:

不蒜子

本地搜索

2018-05-08更新，添加本地搜索功能
在hexo的根目录下执行命令：npm install hexo-generator-searchdb --save

在根目录下的_config.yml文件中添加配置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在根目录下的/theme/next/_config.yml文件中搜索local_search，将enable改为true：

1
2
local_search:
  enable: true

运行效果

image

参考文章

next中文手册

Hexo+nexT主题搭建个人博客

为Hexo NexT主题添加字数统计功能

Github 搭建 hexo （四）——更换主题，disqus，RSS