不知道友友们逛 B 站时有没有注意到它控制台输出的字符画（~~正经人逛 B 站谁会按 F12~~），看完我瞬间嘴角上扬数秒。字符画如彩蛋般的出现在眼前，还能丰富网站的维度，一个优秀的网站也许在某个不起眼的角落也能带给你惊喜。

食用教程前，建议先看一下《教程&笔记常量申明》，且所有修改对缩进格式等有严格要求。本教程主要针对 Butterfly 主题博客网站，若是其它主题或非博客类网站，可以借鉴下思路，很简单。

话不多说，let's get started!

教程

新建 JS 文件<Custom>.js，代码模板如下，懂 JS 的友友可以自定义改。

if (window.console) {
  Function.prototype.makeMulti = function () {
    let l = new String(this);
    l = l.substring(l.indexOf("/*") + 3, l.lastIndexOf("*/"));
    return l;
  };
  let string = function () {
    /*
我是字符画
    */
  };
  console.log(string.makeMulti());
}

代码中我是字符画处用来放自定义字符画

修改<BlogRoot>\themes\butterfly\_config.yml

inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>
+	- <script defer type="text/javascript" src="<FilePath_Custom.js>"></script>

Hexo 三连后，再按下F12或Ctrl + Shift + C即可看到效果。先康康我站的效果。

拓展

提供一些思路

字符画下面可以继续添加一些自定义文字（在刚才新建的 JS 文件里继续加）
1
2
3
*/ }
console.log(string.makeMulti());
+ console.log("<Custom>");
自定义控制台的字体样式
1
console.log("<Custom> %c <Custom>", "<样式代码>");
注意：样式代码只涉及 %c 符号后的文字
比如我控制台中欢迎访问Hassan's Blog的字体样式代码如下：
1
console.log("欢迎访问%cHassan's Blog", "color:#1fc7b6;font-weight:bold");

可能出现的八阿哥

如果你使用了 Gulp 压缩，记得把<Custom.js>文件排除掉，否则你的字符画会被当做注释清除。

修改<BlogRoot>\gulpfile.js即可

//压缩js
gulp.task('compress', () =>
  gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
+ gulp.src(['./public/**/*.js', '!./public/**/*.min.js', '!./public/<FilePath_Custom.js>'])
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(uglify().on('error', function (e) {
      console.log(e)
    }))
    .pipe(gulp.dest('./public'))
)