Next 调优

Links对齐

　　编辑themes/next/source/css/_custom下的custom.styl，添加如下代码即可。

.links-of-blogroll-title{
   margin-left:6px;
}

.links-of-blogroll-inline .links-of-blogroll-item{
    float: left;
    margin-left: 6px;
    width: 47%;
}

Code标签

　　编辑themes/next/source/css/_custom下的custom.styl，添加如下代码即可。

//修改文章内code样式
code {color:#c7254e;background:#f8f3f4;}

文章版权优化

　　之前添加文章版权的方式比较Low，手工在每个文章末尾添加一段关于版权的代码，不易维护，并且很容易错误。现在优化的办法是将这段代码移至主题的配置加载文件中。并且设置开关，当hexo generate生成代码的时候自动添加版本代码。
　　
　　参考：hexo文章添加版权声明及一些特效
　　
　　与上述参考不同的是，passage-end-tag.swig文件，内容如下：

{% if theme.passage_end_tag.enabled %}
<blockquote>
<p>本文作者： {{ theme.author }}<br>本文链接： <a id="versionA" href="#" target="_blank" rel="external"></a><br>版权声明： 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" target="_blank" rel="external">CC BY-NC-SA 3.0 CN</a> 许可协议。转载请注明出处！   </p>
</blockquote>
<script>
  window.onload = function () {
   var locationUrl= decodeURI(window.location.href);
   document.getElementById("versionA").href = locationUrl;
   document.getElementById("versionA").innerHTML = locationUrl;
  }
</script>
{% endif %}

静态页面压缩

　　通过Hexo g自动生成的静态js、css、html是没有经过压缩的,而且存在大量无用的空白。想通过优化的方式，自动将生成的页面进行亚索

　　参考文章：
　　　　使用gulp精简hexo博客代码
　　　　gulp构建入门
　　　　gulp-load-plugins－模块化管理插件

　　gulp是nodejs下的自动构建工具，通过一列的task执行步骤进行自动流程化处理。
　　
　　安装gulp以及所需插件：
　　npm install -d --save gulp gulp-clean gulp-load-plugins gulp-minify-css gulp-minify-html gulp-rename gulp-uglify gulp-shell typescript
　　
　　在站点的根目录创建gulpfile.js文件（默认的处理文件），我的站点目录是/opt/blog/。
　gulpfile.js内容如下：

var gulp = require('gulp');
var clean = require('gulp-clean');
var minifyCss = require('gulp-minify-css');
var minifyHtml = require('gulp-minify-html');
var uglify = require('gulp-uglify');
var shell = require('gulp-shell');
var ts = require('gulp-typescript');

gulp.task("clean",function() {
    return gulp.src("./dst/*")
    .pipe(clean());           //plugins为加载的gulp-load-plugins插件,它可以自动加载项目依赖(package.json定义)
});

gulp.task("css",function() {
    return gulp.src(["public/**/*.css","!public/**/*.min.css"])
    .pipe(minifyCss({compatibility: "ie8"}))
    .pipe(gulp.dest("./dst/"));
});

gulp.task("js",function() {
    return gulp.src(["public/**/*.js","!public/**/*.min.js"])
   .pipe(ts({
      target: "es5",
      allowJs: true,
      module: "commonjs",
      moduleResolution: "node"
    }))
    .pipe(uglify())
    .pipe(gulp.dest("./dst/"));
});

gulp.task("html",function() {
    return gulp.src("public/**/*.html")
    .pipe(minifyHtml())
    .pipe(gulp.dest("./dst/"));
});

gulp.task("default",["css","js","html","mv"],function() {
    console.log("gulp task finished!");
});

gulp.task("watch",function() {
    gulp.watch("public/*",["default"]);
});

gulp.task("mv",function() {
    return gulp.src("./dst/*")
    .pipe(shell([
        "cp -r ./dst/* ./public/"
    ]));
});

通过执行gulp命令即可开启压缩处理。

执行结果：

[~~~~@~~~~~ blog]# gulp 
[15:35:41] Using gulpfile /opt/blog/gulpfile.js
[15:35:41] Starting 'css'...
[15:35:41] Starting 'js'...
[15:35:41] Starting 'html'...
[15:35:42] Finished 'css' after 1.31 s
public/lib/Han/dist/han.js(2301,7): error TS7028: Unused label.
public/lib/velocity/velocity.js(348,22): error TS2300: Duplicate identifier 'offsetParent'.
public/lib/velocity/velocity.js(360,17): error TS2300: Duplicate identifier 'offsetParent'.
[15:36:01] TypeScript: 3 semantic errors
[15:36:01] TypeScript: emit succeeded (with errors)
[15:36:01] Finished 'js' after 20 s
[15:36:02] Finished 'html' after 20 s
[15:36:02] Starting 'default'...
gulp task finished!
[15:36:02] Finished 'default' after 90 μs

遇到的坑

　　Q：GulpUglifyError: unable to minify JavaScript???
　　A：在进行压缩的时候执行typescript检查javascript的类型(es6,es8)。

//改写后的处理
var ts = require('gulp-typescript');
var uglify = require('gulp-uglifyjs');
....
.pipe(ts({
    target: "es5",
    allowJs: true,
    module: "commonjs",
    moduleResolution: "node"
}))
.pipe(uglify())

　　Q： gulp command not found ????
　　A： npm install -g gulp

菜单项未选中

　　
　　点击左边菜单栏的选项，发现页面刷新之后，选中项样式没有被添加。
　　搜寻JS发现（themes/next/source/js/src/utils.js）如下这段代码：
　　path = path === '/' ? path : path.substring(0, path.length - 1);
　　假如Path为/archives/，通过上述代码最终Path会被改成/archives。下面获取元素的时候就会找不到对象，解决办法是将后面 -1去除。