Hexo-Next主题美化

1. 修改文章内链接文本样式

将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。修改文件themes\next\source\css\_common\components\post\post.styl，添加如下css样式

.post-body p a{
  color: #0593d3;
  border-bottom: none;

  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}

选择.post-body是为了不影响标题，选择p是为了不影响首页“阅读全文”的显示样式。

2. 删除标题上下方横线

修改文件themes/next/layout/_partials/header.swig文件，删除logo-line相关项

修改前

<div class="custom-logo-site-title">
  <a href="{{ config.root }}"  class="brand" rel="start">
    <span class="logo-line-before"><i></i></span>
    <span class="site-title">{{ config.title }}</span>
    <span class="logo-line-after"><i></i></span>
  </a>
</div>

修改后

<div class="custom-logo-site-title">
  <a href="{{ config.root }}"  class="brand" rel="start">
    <span class="site-title">{{ config.title }}</span>
  </a>
</div>

找到themes\next\source\css\_schemes\Mist\header.styl文件，修改.header { background: $white; }，将颜色改为白色

找到themes/next/source/css/_schemes/Mist/index.styl文件中的footer，将.footer-inner的text-align: left修改为center

5. 修改post-title的颜色

找到\themes\next\source\css\_common\components\post\post-title.styl文件，将.post-title-link下的color修改为自己想要的颜色

6. 为边框添加立体阴影效果

找到\source\css\_common\components\post\post.styl文件，在use-motion .post下，添加box-shadow的代码box-shadow生成网站

7. 将菜单栏的文字颜色改为白色

找到\themes\next\source\css\_schemes\Mist\menu.styl文件，在.menu-item a下添加color: white;，并将background改为header一样的颜色，那样就不会出现不协调的情形。

8. 改变post-meta的颜色

找到\next\source\css\_common\components\post\post-meta.styl文件，在.post-meta下添加如下代码

a {
  color: blueviolet;
  text-decoration: none;
  border-bottom: 1px solid #999;
  word-wrap: break-word;
  }

更新于：2017/3/12 16:28:59

9. 新建导航栏

找到主题文件下的\languages\zh-Hans.yml文件，在title和menu下添加machinelearning: 机器学习字段。然后再到主题配置文件_config.yml的menu下添加绝对路径，menu_icons下添加对应的FontAwesome图标

10. 静态资源cdn加速

在主题配置文件中，找到vendors，添加字段，cdn地址来自bootcdn

vendors:
  # Internal path prefix. Please do not edit it.
  _internal: vendors
  # Internal version: 2.1.3
  jquery: //cdn.bootcss.com/jquery/2.1.3/jquery.min.js
  # Internal version: 2.1.5
  # Fancybox: http://fancyapps.com/fancybox/
  fancybox: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js
  fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css
  # Internal version: 1.0.6
  fastclick: //cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
  # Internal version: 1.9.7
  lazyload: //cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js
  # Internal version: 1.2.1
  velocity: //cdn.bootcss.com/velocity/1.3.1/velocity.min.js
  # Internal version: 1.2.1
  velocity_ui: //cdn.bootcss.com/velocity/1.3.1/velocity.ui.min.js
  # Internal version: 0.7.9
  ua_parser: //cdn.bootcss.com/UAParser.js/0.7.12/ua-parser.min.js
  # Internal version: 4.4.0
  # http://fontawesome.io/
  fontawesome: //cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css

11. 添加百度统计

之前用的是google统计，但是每次进入首页加载的时候太慢了，所以干脆换一个百度统计。在百度统计注册账号之后，按照官网文档教程，在主题配置文件下找到baidu_analytics字段，去掉前面的注释，添加百度统计的ID。

自动生成网站地图

网站地图，又称站点地图，它就是一个页面，上面放置了网站上需要搜索引擎抓取的所有页面的链接。网站地图可以通过在线的形式生成，但是速度会有点慢，使用插件 hexo-generator-sitemap和hexo-generator-baidu-sitemap能自动生成站点地图，方法如下

1
2
3

# 安装两个插件
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

到站点配置文件中，添加如下字段

sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

当hexo g -d之后，public文件夹下回自动生成网站地图，然后再将生成好的网站地图分别添加至百度和谷歌即可。

12. 设置点击加载 Disqus

在没有满足科学上网条件下的网络，访问网站时往往由于 Disqus 而迟迟不能完全加载，下面这个教程则可以满足既能使用 Disqus，又不会影响网站加载的速度。

Hexo Next 主题点击加载 Disqus

Hexo-Next-CSS样式修改