Hexo Next 调优

Posted 2020-12-24 luisyang

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命令即可开启压缩处理。

执行结果：

[[email protected]~~~~~ 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去除。