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

食用教程前，建议先看一下《教程&笔记常量申明》，且所有修改对缩进格式等有严格要求。

话不多说，let's get started!

教程 - Butterfly Blog

该章节针对 Butterfly 主题博客

新建 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即可看到效果。先康康我站的效果。

教程 - React

该章节针对 React 网站项目

新建 src/utils/ASCIIArt.jsx 文件（路径和文件名仅作参考）

import { useEffect } from "react";

const ASCIIArt = () => {
  useEffect(() => {
    // 控制台打印自定义内容
    if (window.console) {
      console.log(`
     我是字符画
      `);
    }
  });
};

export default ASCIIArt;

在 App.js 文件里引入 ASCIIArt.jsx

import React from "react";
import "./App.css";
import ASCIIArt from "./utils/ASCIIArt";

function App() {
  return (
    <div>
      <ASCIIArt/>
    </div>
  );
}

export default App;

如果你的项目开启了严格模式，建议在 index.js 关掉，否则控制台会输出两次

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
- <React.StrictMode>
    <SideBarContextProvider>
      <App />
    </SideBarContextProvider>
- </React.StrictMode>
);

拓展

提供一些思路

字符画下面可以继续添加一些自定义文字（在刚才新建的 JS 文件里继续加）
1
2
3
*/ }
console.log(string.makeMulti());
+ console.log("<Custom>");
自定义控制台的字体样式
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即可

//压缩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'))
)