本文介绍了在 NexT(v7.0+) 主题的基础上整体布局美化的方案，主要包括:
本文介绍了在 NexT(v7.0+) 主题的基础上整体布局美化的方案，主要包括:
本文介绍了在 NexT(v7.0+) 主题的基础上整体布局美化的方案，主要包括:
本文介绍了在 NexT(v7.0+) 主题的基础上整体布局美化的方案，主要包括:
- Font：字体、动态背景canvas_ribbon
- Top：进度条、Follow me、菜单背景收缩
- Footer：备案显示、运行时间、访客统计
- Sidebar：近期文章、浏览进度、左边显示、目录展开
大家可以选择喜欢的方案美化自己的博客，当然最好可以再加入点自己的想法改造。
Font
前端的美化，可以做的比较多，比如修改字体、修改背景等等。
首先在 主题配置文件 _config.yml 中修改配置font：
1 | font: |
修改字体
默认的字体是微软雅黑，有点审美疲劳了 (lll￢ω￢)，在浏览其他人网站的时候看到了一种很有科技感的字体 『Monda』，感觉还是不错的。如何应用到自己的博客呢？
首先，可以从 frontyukle 下载字体文件，在服务器上安装。
然后在 主题配置文件 _config.yml 中的修改全局字体配置：
1 | global: |
设置三角丝带背景
该功能由 Vue 作者 尤雨溪 首创。注意：添加动态背景会极大增加页面内存占用及 CPU 消耗。
首先，在根目录下执行以下命令安装相关依赖：
1 | $ git clone https://github.com/theme-next/theme-next-canvas-ribbon themes/next/source/lib/canvas_ribbon |
然后，在 主题配置文件 _config.yml 中的修改配置canvas_ribbon：
1 | canvas_ribbon: |
Top
顶部我们保持简洁为主，设置主要包括：进度条、Fork、菜单等等。
加载进度条
当网络不好的时候会出现白屏等待，此时如果能有加载进度提示将会提高用户操作体验。
首先，在根目录下执行以下命令安装相关依赖：
1 | $ git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace |
然后，修改 主题配置文件 _config.yml 中的配置pace 改为 true，并从上面提供的样式中选择一种填入pace_theme中就可以了。
右上角的Follow-Github
如果你想大家在看博客的时候能快速链接到你的Github，不妨设置Github_banner，效果图如下：
修改 主题配置文件 _config.yml 中的配置github_banner，在permalink里配置自己的github地址：
1 | github_banner: |
菜单背景收缩
在 Muse主题方案中 Header 和 Footer 是没有背景色的，的颜色与内容一致不易区分，而且网站标题的字体不够明显，我做了几个修改
- 头部和底部颜色修改
- 网站标题加粗和颜色修改
- 菜单字体增大显示
在主题自定义样式文件中添加以下样式：
1 | //窗口效果相关样式 |
改完才发现顶部菜单的空间太大了，于是调节菜单高度，在自定义布局文件中添加以下代码：
1 |
|
如果 custom.swig 文件不存在，需要手动新建并在布局页面中 body 末尾引入：
1 | ... |
调节移动端显示的高度
1 | mobile() { |
Footer
底部设置的可完性就比较多了，建站信息、备案信息、以及访客和统计信息等信息都可以个性化定制。
ICP备案和公安备案
我们的网站已经有备案号了，但是应该如何添加备案号到博客最下面呢？
首先，在 主题配置文件 _config.yml 中的配置添加备案配置：
1 | # 这里打开备案信息，填写ICP备案号 |
然后，在语言配置文件里，添加表述文案beian：
1 | footer: |
接下来，删除原有的布局文件中备案样式的代码：
1 | #}{% set current = date(Date.now(), "YYYY") %}{# |
最后，在主题布局文件中添加我们自定义的备案样式：
1 | <div class="footer-inner"> |
网站的建站时间
NexT主题已经内置了添加建站时间。在 主题配置文件 _config.yml 中修改配置since ：
1 | footer: |
网站的运行时间
本章节受 Yearito’s Blog | 站点运行时间统计 的启发，自行重构了代码逻辑。
接下来我们显示网站的运行时间，在这里我做了一些个性化文案，可供大家参考：
在 主题配置文件 _config.yml 中的添加 ages配置：
1 | ages: # site running time |
在语言配置文件里，添加表述文案age：
1 | footer: |
在主题自定义布局文件中添加以下代码：
1 | {# 页脚站点运行时间统计 #} |
添加访客统计
该功能由 不蒜子 提供。UV：独立访客数，PV：网站浏览量，访客数和浏览量的区别在于一个用户连续点击n篇文章，会记录n次浏览量，但只记录一次访客数，效果如图：
由于不蒜子是基于域名来进行统计计算的，所以通过 localhost:4000 端口访问的时候统计数据UV和PV都会异常的大，属于正常现象。
首先，在 主题配置文件 _config.yml 中打开不蒜子功能：
1 | busuanzi_count: |
然后，在语言配置文件里，修改个性化表述文案：
1 | footer: |
最后，修改不蒜子模板文件：
1 | <div class="busuanzi-count"> |
在自定义样式文件中添加如下样式：
1 | //修改不蒜子数据颜色 |
Sidebar
侧边栏里的信息有很多，比如站点信息、RSS、链接信息、目录信息等等，我们要有选择性的显示。尽量保持Next主题的宗旨 – 简洁
显示近期文章
当你新写了一些好文章，想尽快告诉大家要怎么办呢？放在侧边栏里那是最合适不过了～(￣▽￣～)(～￣▽￣)～ 比如这样：
首先配置开关和文案，便于随时修改。
在 主题配置文件 _config.yml 中添加近期文章recent_posts的配置：
1 | # 近期文章 |
在语言配置文件里，添加表述文案recent_posts：
1 | sidebar: |
在侧边栏原有布局文件中的合适位置添加近期文章显示代码：
1 | {% if theme.social %} |
显示当前浏览进度
在 主题配置文件 _config.yml 中修改back2top的scrollpercent：
1 | back2top: |
配置完之后，发现这个按钮颜色有点单调，让它炫酷点的吧 <(￣ˇ￣)/ ，每次刷新可以生成不同的颜色，在自定义样式文件中添加如下样式：
1 | // 回到顶部样式 |
侧边栏移到左边
用惯了Ofice的人习惯导航菜单在左边的格式，如何把侧边栏放在左侧呢？
NexT 主题中 Pisces 和 Gemini 支持通过主题配置文件来将侧边栏置于左侧或右侧。
在 主题配置文件 _config.yml 中修改配置sidebar ：
1 | sidebar: |
而 Muse 和 Mist 则需要深度修改源码才能实现改变侧边栏位置：
1 | .sidebar-toggle { |
修改动效脚本代码：
1 | $(document) |
如此以来就可以将侧边栏放置在左边了，但当窗口宽度缩小到991px之后会出现样式错误：侧边栏收缩消失但是页面左侧仍留有空白间距，此时修改如下代码即可：
1 | body { |
侧边栏目录展开
侧边栏的TOC目录每次滑到哪儿，目录展开到哪。这样查看文章结构就很不方便，如何设置才能让文章目录默认全部都展开？
在 主题配置文件 _config.yml 中修改配置toc ：
1 | toc: |