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

B站控制台输出

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

话不多说,let's get started!

教程

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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());
    }

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

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

    1
    2
    3
    4
    5
    6
    inject:
    head:
    # - <link rel="stylesheet" href="/xxx.css">
    bottom:
    # - <script src="xxxx"></script>
    + - <script defer type="text/javascript" src="<FilePath_Custom.js>"></script>
  3. Hexo 三连后,再按下F12Ctrl + Shift + C即可看到效果。先康康我站的效果。

我站控制台输出效果

拓展

提供一些思路

  1. 字符画下面可以继续添加一些自定义文字(在刚才新建的 JS 文件里继续加)

    1
    2
    3
        */ }
    console.log(string.makeMulti());
    + console.log("<Custom>");
  2. 自定义控制台的字体样式

    1
    console.log("<Custom> %c <Custom>", "<样式代码>");

    注意:样式代码只涉及 %c 符号后的文字

    比如我控制台中欢迎访问Harris's Blog的字体样式代码如下:

    1
    console.log("欢迎访问%cHarris's Blog", "color:#1fc7b6;font-weight:bold");

可能出现的八阿哥

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

修改<BlogRoot>\gulpfile.js即可

1
2
3
4
5
6
7
8
9
10
11
12
//压缩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'))
)

资源

最后推荐上几个与字符画相关的网站 👇

生成字符画

根据文字生成字符画:

根据图片生成字符画:

根据流程图生成字符画:

字符画素材

参考文章


结束语:

若是有疑问或教程相关补充欢迎留言。期待看到友友们独一无二的字符画设计。