Day 7：设定你的 Hexo 布景主题：Next（下）

由於篇幅太长，所以拆分成上下篇啦！经过昨天的一些设定，相信大家已经慢慢上手了。接着今天也要接续昨天没有介绍到的设定。一起加油设定起来！！

网站 Favicon

Favicon 就是在浏览器标题旁边的小 Icon，Next 预设有提供一个 N 字样的 Favicon，但身为一个可以识别自己网站的地方，当然是不要放过啦！

产生 Favicon

至於 Favicon 的产生方式除了自行制作之外，网路上也有许多 Favicon 制作与产生器，可以尝试看看哦～

设定 Hexo Favicon

当 Favicon 制作好後就要设定到 Hexo 啦，首先一样到 next 目录下的 _config.yml，找到以下这段语法：

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

换成自己的图示网址，或是放置到 ./themes/next/source/images 目录内，在指定档案名称即可。（或是直接覆盖原先档案）

回到顶部按钮

在 ./themes/next/_config.yml 找到以下这段语法：

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: false

将 sidebar 设定为 true：设定在侧边栏的个人资讯区块中，Social Links 下，显示回到顶部按钮。
将 scrollpercent 设定为 true：回到顶部按钮旁加上阅读进度百分比。

回到顶部按钮

阅读进度条

上一段刚好有介绍到阅读进度数值，而这一段则是可以在读者滑动的过程中，顶部或是底部有个进度条，随着你的阅读进度进行滑动。

在 ./themes/next/_config.yml 找到以下这段语法：

# Reading progress bar
reading_progress:
  enable: false
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px

enable：设定是否开启进度条，开启则设定 true
position：设定进度条在顶部还是底部显示
color：进度条背景颜色
height：进度条高度

阅读进度条

我设定个高度 10px 在底部显示让大家看比较清楚，目前阅读进度 62%，进度条的宽度就会在可视范围内宽度 62% 位置处。

大家也可以把高度设定为 100vh 来看看部落格被进度条整个盖住的效果哦（笑）

语法区块样式

我们可以看到预设范例文章就有语法区块的范例，但是我想改变呈现的样式，该怎麽做呢？

预设语法区块样式

找到以下这段语法：

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal
  # Add copy button on codeblock
  copy_button:
    enable: false
    # Show text copy result.
    show_result: false
    # Available values: default | flat | mac
    style:

highlight_theme 是整体区块主题、copy_button 则是设定复制语法的按钮位置与样式。一样，每个都尝试套用看看，找到一个你满意的语法区块样式吧！