0%

Hexo的Next主题个性化设置(一)——基础设置

上一篇博文已经介绍了在 Mac 平台下搭建 Github+Hexo 博客的流程。本文来介绍一些常用的对 Hexo+Next 博客的基础设置。

  1. 注意配置文件选择:
    站点配置文件:是安装的 hexo 博客目录,如 ~/userName.github.io 目录下的 _config.yml 文件。
    主题配置文件:是选定的主题,如 themes/next 目录下的 _config.yml 文件。
  2. 配置文件 yml 的注释是 #
  3. 如果没有特殊说明,本文提到的 bash 命令均是在站点根目录下执行,如:~/userName.github.io/

头像设置

  1. 编辑主题配置文件 _config.yml, 搜索字段 avatar,设置头像图片文件连接
    a. 完整互联网地址:https://yoursite.com/avatar.png
    b. 站内地址: 将头像图片放置在 ~/userName.github.io/source/images/ 目录下,设置为:avatar: /images/avatar.png (如 images 目录不存在,则需新建)

    头像

    头像设置

设定站点创立时间

  1. 编辑站点配置文件 _config.yml,新增字段 since

    1
    $ since: 2017

Next主题的Scheme设置

  1. 编辑主题配置文件 _config.yml, 搜索字段 scheme,将需用启用的 scheme 前面注释 # 去除即可。(有三种:MuseMistPisces系统默认使用 Muse)

    Scheme设置

Next 主题侧边栏设置

  1. 编辑主题配置文件 _config.yml,搜索字段 sidebar,如图:

    Sidebar设置

    a. 设置侧栏的位置,修改 sidebar.position 的值,支持的选项有:

    • left : 靠左放置

    • right : 靠右放置

      注意:此配置只适用于 SchemePisces,在 MistMuse 下无效。

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

    • post : 默认行为,在文章页面(拥有目录列表)时显示
    • always : 在所有页面中都显示
    • hide : 在所有页面中都隐藏(可以手动展开)
    • remove : 完全移除
    > **注意:**此配置只适用于 `Scheme` 是 `Mist`,在 `Pisces` 和 `Muse` 下无效。

创建“分类”页面

  1. 新建一个页面,命名为 categories,将会在 ~/userName.github.io/source/ 目录生成 categories 目录

    1
    $ hexo new page categories 

    创建“分类”页面

  2. 编辑该目录下的 index.md 文件,将页面的类型设置为 categories

    1
    2
    3
    4
    5
    ---
    title: categories
    date: 2017-04-05 21:22:54
    type: "categories"
    ---
  3. 同时编辑主题配置文件 _config.yml,添加 categoriesmenu 中, 如下:

    1
    2
    3
    4
    menu:
    home: /
    categories: /categories
    archives: /archives

创建“标签”页面

  1. 新建一个页面,命名为 tags,将会在 ~/userName.github.io/source/ 目录生成 tags 目录

    1
    $ hexo new page tags 

    创建“分类”页面

  2. 编辑该目录下的 index.md 文件,将页面的类型设置为 tags

    1
    2
    3
    4
    5
    ---
    title: tags
    date: 2017-04-05 21:48:16
    type: "tags"
    ---
  3. 同时编辑主题配置文件 _config.yml,添加 tagsmenu 中, 如下:

    1
    2
    3
    4
    menu:
    home: /
    archives: /archives
    tags: /tags

创建“关于我”页面

  1. 新建一个页面,命名为 about,将会在 ~/userName.github.io/source/ 目录生成 about 目录

    1
    $ hexo new page about 

    创建“分类”页面

  2. 编辑该目录下的 index.md 文件,将页面的类型设置为 about

    1
    2
    3
    4
    5
    ---
    title: about
    date: 2017-04-05 21:59:11
    type: "about"
    ---
  3. 同时编辑主题配置文件 _config.yml,添加 aboutmenu 中, 如下:

    1
    2
    3
    4
    menu:
    home: /
    archives: /archives
    about: /about
  4. 注意: 主题配置文件 _config.yml 下的 menu 字段下的选项顺序,将会是页面显示的顺序

    侧边栏菜单设置

    侧边栏菜单显示效果

Next侧边栏社交链接设置

  1. 编辑主题配置文件 _config.yml,新增字段 social,然后添加社交站点名称与地址,如:

    1
    2
    3
    4
    5
    6
    7
    8
    # Social links
    social:
    GitHub: https://github.com/your-user-name
    Twitter: https://twitter.com/your-user-name
    Weibo: http://weibo.com/your-user-name
    douban: http://douban.com/people/your-user-name
    zhihu: http://www.zhihu.com/people/your-user-name
    # 等等

更新[2019-04-14]

添加非 Font Awesome 图标

由于 Hexo NexT 原始主题是采用了 Font Awesome 图标,并未包含如 掘金简书 网站的图标。因此需要加入另一种图标的支持,使得 Hexo 博客可以显示出 掘金、简书 这类的图标。

1、下载图标

  • 前往 阿里巴巴矢量库 选择需要的图标,

  • 并将其(所有需要的)都加入购物车,

  • 再下载相应的代码,

  • 将下载的文件解压后,找到 iconfont.css 文件,打开后将其中的所有内容都复制加入到 /themes/next/source/css/_custom/custom.styl 文件中(任意位置);

  • 并将 .iconfont 修改为 .fa_custom,如下:

2、应用图标

  • 在主题配置文件中,设置好了 social: 之后,再设置对应的 social_icons:(注意:需要在名称前加上 custom):

  • 效果如图:

设置代码高了主题

  1. NexT 使用 Tomorrow Theme 作为代码高亮,共有5款主题可供选择:
    a. normal

    代码高亮主题-normal

    b. night

    代码高亮主题-night

    c. night eighties

    代码高亮主题-night eighties

    d. night blue

    代码高亮主题-night blue

    e. night bright

    代码高亮主题-night bright

  2. 编辑主题配置文件 _config.yml,搜索字段 Code Highlight,设置想要的代码高亮主题 highlight_theme: night

    代码高亮主题设置

设置本地搜索

  1. 安装并使用 hexo-generator-search

  2. ~/userName.github.io 目录下执行以下命令进行安装:

    1
    $ npm install hexo-generator-search --save
  3. 编辑站点配置文件 _config.yml,新增以下内容到任意位置:

    1
    2
    3
    search:
    path: search.xml
    field: post
  4. 编辑主题配置文件 _config.yml,启用本地搜索功能:

    1
    2
    3
    # Local search
    local_search:
    enable: true

参考资料

  1. Next - 开始使用
  2. Next - 主题配置
  3. Font Awesome 图标
  4. 阿里巴巴矢量库
  5. Hexo NexT 博客增加知乎豆瓣图标支持