Hexo 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去除。 
　　

转载于:https://www.cnblogs.com/LuisYang/p/9356566.html