Day 6：设定你的 Hexo 布景主题：Next（上）

昨天我们安装了 Next 这个布景主题，今天就要来介绍如何编辑设定 Next，以及 Next 提供了什麽样的功能与选项给我们使用。

开启设定档

我们要开启的档案是在 Hexo 根目录下的 thems/next/_config.yml 这支档案。不是根目录的 _config.yml 哦！

• 根目录下的 _config.yml：针对网站进行设定
• thems/next/_config.yml：针对布景主题进行设定

Scheme 设定

找到以下这段语法：

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

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

# Dark Mode
darkmode: false

选择 Schemes

Next 提供了四种 Scheme 给我们选择，所以虽然同为 Next，但其实分别有四种不同的样式可以提供我们选择，以我的部落格 Gui Blog - 网站的工具人 为例，目前选择使用的就是 Pisces 的 Scheme。

Next 预设 Scheme 为 Muse，此时如果要设定成其它 Scheme，只要将原本的 Muse 设定为注解，将选择使用的 Scheme 解除注解就可以指定了。yml 档的注解是使用 # 井字号来区隔。

这边就不提供四种 Scheme 的展示图了，让各位动手尝试看看！

黑暗模式

现在 Facebook、Instagram 都有提供黑暗模式，Next 也有黑暗这个模式 XD 将 darkmode 设定值改为 true，网站就会启用黑暗模式了。

设定页尾作者链结

在昨天的篇章有设定到作者名字，因此正常来说页尾部分就会显示你所设定的名称。不过预设仅仅是一段文字，要怎麽设定成一个链结呢？

找到以下这段语法：

# If not defined, `author` from Hexo `_config.yml` will be used.
copyright:

撰写HTML a 链结语法，设定完成後就可以看到页尾作者文字变成了链结。

copyright: "<a href='指定链结'>你的名字</a>"

主选单设置

找到以下这段语法：

menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

基本上它的格式会是：

分页名称: 路径 || Icon 图示

由於 Hexo 预设开启的页面为首页以及 archives 归档页，其它像是关於、标签以及分类页都需要我们额外新增页面，因此在这里就先不进行开启，会於日後章节说明。

新增自订选单链结，也可以设定绝对路径！

主选单不一定只能连到网站本身的页面，也可以透过设定绝对链结连到其它网站。这边的范例就设定 URL 连到我正式的部落格，Icon 图示则稍微偷偷用了目前尚未开启的 about 的图示（也可以换成其它 Icon），如下所示：

前往 Gui Blog: https://guiblogs.com/ || fa fa-user

设定完之後就可以看到新增了新的选单链结，另外点选这个链结之後会以新分页开启，左边两个链结则会在本页开启。

选单样式设定

找到以下这段语法：（主选单设置下方）

menu_settings:
  # 是否要显示 icon 图示
  icons: true
  # 是否要显示数值
  badges: false

• icons 控制选单是否要显示图示，若改为 false 主选单只会呈现我们所设定的文字，图示则不会显示。
• badges 可以理解成像是 Line 旁边会显示你有几则未读讯息，如果设定成 true：
  • 「归档」其实就是收录你所有的文章，因此若 badges 设定为 true，就会在文字旁边显示你目前的文章数量。
  • 未来若新增标签、分类页面并设定於主选单，在 badges 设定为 true 的情况之下，也会分别於文字旁分别显示你目前的标签数量以及分类数量。

一样不附图，请大家动手尝试看看～（其实是懒癌发作 XD）

边栏位置

如果你的 Scheme 是选择 Pisces 或 Gemini 的话，就会直接看到文章列表旁边的边栏（如果是 Muse 跟 Mist 的话，可以看到左下角的方形内三条线的按钮，点一下就会跑出边栏了），预设是靠左的，但如果我希望它靠右该如何做到？

找到以下这段语法：

sidebar:
  # Sidebar Position.
  position: left
  #position: right

position 的部分，将 left 那行注解并将 right 那行解除注解就可以看到边栏变成在右边了。

另外如果使用手机或是较小可视范围的视窗查看的话，都是会直接消失的。这个部分我也还在看怎麽解决 QQ 如果有大神路过也可以帮我解答一下 ><

个人资讯区块

大头贴

找到以下这段语法：

avatar:
  # Replace the default image and set the url here.
  url: #/images/avatar.gif

把 url 改成大头贴的网址就可以了。

社群链结

找到以下这段语法：

social:
  #GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:[email protected] || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

格式其实跟主选单很像，就是先名称、网址，再来则是 Icon 图示。

另外也有提供针对社群链结选单的样式设定：

social_icons:
  # 是否开启显示 icon 功能
  enable: true
  # 是否只显示 icon，false 则只会显示图示
  icons_only: false
  # 若设定 true，滑动到社群链结时，会有转场效果，链结不会硬生生转色
  transition: false

一样效果请大家自己尝试看看罗！另外有趣的一点是，enable 跟 icons_only 似乎是相互矛盾的设定（？）不过如果要显示 Icon，enable 一定要设定 true 才行。因为我自己测试 enable 设定 false、icons_only 设定 true，也只会显示文字，不会显示 Icon。

未完待续！

由於篇幅过长，所以就拆分成两篇来写啦～明天还有许多精彩的设定在等着大家，大家敬请期待罗！

参考资料

• 3分钟完成HexoBlog主题Next设定

本篇文章同步发布於我的部落格 Gui Blog