Hexo-主题美化

发表于 | 分类于 | 阅读次数:
  • 博客搭建已经好久了，这段时间对next主题也根据个人的意愿进行了一些美化，就在这里记载下来

首页不显示全文

  • 进入hexo博客项目的themes/next目录
  • 打开_config.yml文件（主题配置文件）

  • 搜索”auto_excerpt”

    1
    2
    3
    4
    5
    # Automatically Excerpt. Not recommend.
    # Please use <!-- more --> in the post to control excerpt accurately.
    auto_excerpt:
      enable: false
      length: 150

  • 将enable的值从false改为true，再 hexo g hexo d就可以了

增加搜索功能

  • 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

    1
    $ npm install hexo-generator-searchdb --save

  • 编辑站点配置文件（hexo博客项目下的config_yml）

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

  • 博客里使用 Ctrl + F 进行搜索

添加顶部加载条

  • 打开/themes/next/layout/_partials/head.swig文件，在maximum-scale=1”/>后添加如下代码:
1
2
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
  • 但是，默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码（接在刚才link的后面）
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

标签图标替换

  • 将标签 # 更换为
  • 修改模板 /themes/next/layout/_macro/post.swig
    1
    2
    搜索 rel="tag">#，将 # 换成
    <i class="fa fa-tag"></i>

鼠标点击小红心

  • 将 love.js 文件添加到 \themes\next\source\js\src 文件目录下。
  • 找到 \themes\next\layout_layout.swing 文件， 在文件的后面， 标签之前 添加以下代码：
    1
    2
    <!-- 页面点击小红心 -->
    <script type="text/javascript" src="/js/src/love.js"></script>

链接文本设置为蓝色

  • 将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。
  • 找到文件 themes\next\source\css_custom\custom.styl ，添加如下 css 样式：
    1
    2
    3
    4
    5
    6
    7
    8
    .post-body p a {
      color: #0593d3;
      border-bottom: none;
      &:hover {
        color: #0477ab;
        text-decoration: underline;
      }
    }

访问量及阅读统计

为NexT主题添加文章阅读量统计功能