不知道友友们逛 B 站时有没有注意到它控制台输出的字符画（
正经人逛 B 站谁会按 F12），看完我瞬间嘴角上扬数秒。字符画如彩蛋般的出现在眼前，还能丰富网站的维度，一个优秀的网站也许在某个不起眼的角落也能带给你惊喜。
食用教程前，建议先看一下《教程&笔记常量申明》，且所有修改对缩进格式等有严格要求。
话不多说，let's get started!
H1教程 - Butterfly Blog
该章节针对 Butterfly 主题博客
-
新建 JS 文件
<Custom>.js，代码模板如下，懂 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.ymldiff
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即可看到效果。先康康我站的效果。
H1教程 - React
该章节针对 React 网站项目
-
新建
src/utils/ASCIIArt.jsx文件（路径和文件名仅作参考）jsx
import { useEffect } from "react"; const ASCIIArt = () => { useEffect(() => { // 控制台打印自定义内容 if (window.console) { console.log(` 我是字符画 `); } }); }; export default ASCIIArt; -
在
App.js文件里引入ASCIIArt.jsxjsx
import React from "react"; import "./App.css"; import ASCIIArt from "./utils/ASCIIArt"; function App() { return ( <div> <ASCIIArt /> </div> ); } export default App; -
如果你的项目开启了严格模式，建议在
index.js关掉，否则控制台会输出两次diff
const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - <React.StrictMode> <SideBarContextProvider> <App /> </SideBarContextProvider> - </React.StrictMode> );
H1拓展
提供一些思路
-
字符画下面可以继续添加一些自定义文字（在刚才新建的 JS 文件里继续加）
diff
*/ } console.log(string.makeMulti()); + console.log("<Custom>"); -
自定义控制台的字体样式
js
console.log("<Custom> %c <Custom>", "<样式代码>");注意：样式代码只涉及
%c符号后的文字比如我控制台中
欢迎访问Harris's Blog的字体样式代码如下：js
console.log("欢迎访问%cHarris's Blog", "color:#1fc7b6;font-weight:bold");
H1可能出现的八阿哥
如果你使用了 Gulp 压缩，记得把<Custom.js>文件排除掉，否则你的字符画会被当做注释清除。
修改<BlogRoot>\gulpfile.js即可
diff
//压缩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'))
)H1资源
最后推荐上几个与字符画相关的网站 👇
H2生成字符画
根据文字生成字符画：
根据图片生成字符画：
根据流程图生成字符画：
H2字符画素材
-
搜狗输入法自带颜文字，其中
大颜板块都是字符画（没想到吧，被大家忽视这么多年）
H1参考文章
结束语：
若是有疑问或教程相关补充欢迎留言。期待看到友友们独一无二的字符画设计。
