next主题使用(2)

针对next主体使用进阶

参考博客: 主题背景 置顶 Valine官网 Next官方文档 百度统计

next自定义背景

本博客背景源自 Wallpaper Engine gaze。

网络上大部分教程都是7.0以前，但是next主题在7.0以后取消了 _custom 文件夹。针对此问题提出解决方式

第一种：根据 _comfig.yml文件进行修改

在 comfig.yml文件中搜索 custom_file_path

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

取消style行注释并建立相应 /_data/styles.styl 文件。并在文件中进行背景设置

第二种：根绝阅读源码进行修改

已知在7.0版本以前需要修改 source/css/_custom 中的文件进行格式自定义，因此需要研究 css 文件夹中的文件。

// CSS Style Guide: http://codeguide.co/#css


$scheme    = hexo-config('scheme') ? hexo-config('scheme') : 'Muse';

$variables = base $scheme;


// Variables Layer
// --------------------------------------------------
for $variable in $variables
  @import "_variables/" + $variable;
for $inject_variable in hexo-config('injects.variable')
  @import $inject_variable;

此段代码节选自 css/main.styl。因此可以得出结论此文件为主题样式的导入文件。
通过添加代码 @import '_custom/style.styl' ，并在css文件夹中建立 _custom 文件路径可以实现和7.0版本以前相同的使用效果。

next置顶文章

本博客置顶方法为针对 hexo-generator-index 插件进行修改实现置顶功能。

文章置顶设置

将 node_modules/hexo-generator-index/lib/generator.js 中的比较方法进行修改实现Hexo置顶功能

原程序使用以下方法对posts.data进行排序
sort(posts.data, (a, b) => (b.sticky || 0) - (a.sticky || 0));
现将程序改为:

posts.data = posts.data.sort(function(a,b){
    if(a.top && b.top){
      if(a.top == b.top){
        return b.top - a.top;
      }
      else{
        return b.top - a.top;
      }
    }
    else if(a.top && !b.top){
      return -1;
    }
    else if(!a.top && b.top){
      return 1;
    }
    else return b.data - a.data;
  })

优先对top属性进行比较top大的在置顶，top一样则按data倒序排序。

文章置顶标记

通过在网页中按F12找到文章标签位置

<div class="post-meta"></div>

修改themes/next/layout/_macro/post.swig文件。将如下代码加入div中

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=6495ED>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

如果文章具有top属性择添加置顶标记

Valine使用

Valine开启

首先创建LeanCloud账号并创建应用，之后将应用设置-应用凭证中的AppID,AppKey辅助并粘贴到next主题的 _comfig.yml文件中(搜索Valine即可找到)

Valine自定义

本博客处理方式，参照自定义背景，将自定义CSS写入_custom文件夹内的.styl文件中进行自定义

百度统计使用

登陆百度统计，填写网站域名后，复制代码中hm.js?后面的字符串，粘贴至next主题的 _comfig.yml 文件中 baidu_analytics: 字段后，即可使用。