归档｜ 当青训营遇上码上掘金 | 会动的名片

TL;DR

• 👀 https://self-introduction.icodeq.com/

本文首发于稀土掘金：https://juejin.cn/post/7188749864279212087

当青训营遇上码上掘金 ｜ 会动的名片

作为一个前端工程师🦁️，这次选择的是 主题 1：我的名片，用代码来介绍自己，这太酷了。

话不多说，先看 👀 成品：

小屏不大好看，可以在 code.juejin.cn 或者 self-introduction.icodeq.com 查看全屏幕版本

代码仓库：https://github.com/zkeq/Doraemon/tree/Self-introduction

项目思路

看到题目之后，原本是想要仿写一个闪光 📸️ 卡片的：poke-holo.simey.me

但是因为技术栈不同，其实是不知道怎么抄。

只能退而求其次，用我之前写过一个 会动的代码：哆啦A梦 作为模版

详情看这里，也是上次的掘金入围作者啦（只是过了初审而已hh）：

• 归档 | 原生JS实现会动代码之哆啦A梦 | ZkeqのCoding日志 (icodeq.com)
• Zkeq的哆啦A梦（会动的代码） - 码上掘金 (juejin.cn)

🤔，大概就是这样

其实 js 部分很简单

	const cssString = `...这部分省略...`;
	let codeString = '';
	const textDom = document.querySelector('.text');
	const styleDom = document.querySelector('.doraemon-style');
	const playButton = document.querySelector('.play');
	const stopButton = document.querySelector('.stop');
	const progressBar = document.querySelector('.progress-bar');
	let textStartIndex = 0;
	let range = 3;
	let timer = null;
	const { width: finalWidth } = document.querySelector('body').getBoundingClientRect();
	const updateProgress = (progress) => {
	progressBar.style.width = `${finalWidth * progress}px`;
	};
	let init = 0;
	const len = cssString.length;
	const play = () => {
	if (textStartIndex >= len) {
	textStartIndex = 0;
	}
	if (timer) return;
	timer = setInterval(() => {
	textStartIndex += range;
	if (textStartIndex > len) {
	playButton.innerHTML = '重放'
	textDom.innerHTML = cssString.substring(0, len);
	styleDom.innerHTML = cssString.substring(0, len);
	updateProgress(1);
	// textDom.scrollTop = textDom.scrollHeight;
	hljs.highlightAll();
	window.clearInterval(timer);
	timer = null;
	} else {
	playButton.innerHTML = '播放'
	textDom.innerHTML = cssString.substring(0, textStartIndex);
	styleDom.innerHTML = cssString.substring(0, textStartIndex);
	updateProgress(textStartIndex / len);
	textDom.scrollTop = textDom.scrollHeight;
	hljs.highlightAll();
	}
	}, 0);
	};
	const stop = () => {
	window.clearInterval(timer);
	auio.pause();
	timer = null;
	};
	playButton.onclick = play;
	stopButton.onclick = stop;

hosted with ❤ by GitHub

一些技术细节？

Q1. 首先就是第一个点：如何实现左边代码右边实时效果一起显示呢？

A1: style 属性其实也可以有自己的 class，当我们选中它，并且使用 js 动态的向内添加内容时，页面的样式也会随之变化，那么我们只需要同时向两个元素中添加 css 字符即可，一个用于可视化，一个用于页面的真实渲染。

Q2. 代码块的高亮怎么实现的？

A2: 用 <pre> 标签包起来，然后： highlightjs.org

开始写吧！

那么有了大概的思路，我们就可以开始创作啦。

首先理了一下要放点什么东西来展示，大概就是以下这些：

	1. 自己的博客，更新了230+篇博客，总PV 12W+；
	2. Github，90+ followers，250+ stars；
	3. 运维了一个由多服务杂糅到一起的资源站，累计UV50W+，累计PV 300W+；
	4. 会Python，用Python写过很多没什么技术但是很好玩的东西，包括每日早报、每日Bing壁纸、上传接口、交作业网站、文件分享站、十几个小小API，用到了云函数；
	5. 前端，今年6月才开始在饥人谷好好学，用Vue2.7+Element做出过好几个单页，没用框架的时候写过LearnOnly导航站、每日早报、追梦计划、自建不蒜子等。

hosted with ❤ by GitHub

然后就是找了一堆图，再把简单的框架搭起来。

	<div class="card_wrap">
	<section class="section-0">
	<h3>Hello, I am Zkeq。 👋</h3>
	</section>
	<section class="section-1">
	<h3>#000 一个大一学生，学过 Python，目前在学前端。</h3>
	<h4>作为程序员，GitHub 的数据应该可以代表一些事情：</h4>
	<a href="https://github.com/zkeq" target="_blank">
	<img src="https://stats.readme.icodeq.com/api?username=zkeq&show_icons=true&theme=radical&hide_border=true">
	</a>
	<button class="btn-next" onclick="play()">继续播放</button>
	</section>
	<section class="section-2">
	<h3>#00F 那么，我都做过什么呢？</h3>
	<h5>我想，最令我满意的，应该是：<a target="_blank" href="https://cdn.onmicrosoft.cn"> 渺软 CDN</a></h5>
	<a href="https://cdn.onmicrosoft.cn" target="_blank">
	<img src="https://bu.dusays.com/2023/01/15/63c2d4143b8d7.png">
	</a>
	<ul>
	<li>同时 这也是最近的项目 ( 12.31 上线 1.7 完成重构) </li>
	<li>主要是为了解决前端在开发简单 demo 时遇到的静态资源引入的问题。</li>
	<li>详情请移步评论区最后一条查看 更新日志</li>
	<li>页面重构其实是 @xcsoft 大佬帮忙做的，我也在努力学习做出漂亮页面啦。</li>
	</ul>
	<button class="btn-next" onclick="play()">继续播放</button>
	</section>
	<section class="section-3">
	<h3>#0FF 再者重要的，应该就是我的博客啦。</h3>
	<a href="https://icodeq.com" target="_blank">
	<img src="https://img.onmicrosoft.cn/2022-09-08/image-20220909153929835.png">
	</a>
	<h5>到目前的话，应该是在很用心的运营这个博客的！</h5>
	<ul>
	<li>博文更新 240+ 篇，累计字数 146k+ 。</li>
	<li>虽然大部分都是学习的笔记吧，但是在这个过程中养成了整理知识点的好习惯！</li>
	<li>因为访问数据被清过一次，所以访问人数应该在 10w uv +</li>
	<li>因为这个博客折腾出了很多周边产品（x） </li>
	<li>感觉有这样一个可以自己掌控的小天地很舒服</li>
	</ul>
	<h5>这里是最近的博文哦：</h5>
	<a href="https://icodeq.com" target="_blank">
	<img src="https://zkeq.xyz/Profile/article.svg">
	</a>
	<ul>
	<li>因为是学习委员，再加上我们班的专业就是前端</li>
	<li>所以暑假带着他们一起学习啦。</li>
	</ul>
	<button class="btn-next" onclick="play()">继续播放</button>
	</section>
	<section class="section-4">
	<h3>#0F0 优雅至极！追梦计划！</h3>
	<a href="https://dream-plan.cn" target="_blank">
	<img src="https://user-images.onmicrosoft.cn/155082301-d777c58f-d495-42d7-8dba-59ca844379e7.jpg">
	</a>
	<ul>
	<li>这个其实是从高中带过来的执念 hhh</li>
	<li>因为那时候很执着于励志视频，总感觉自己的生活没有斗志（</li>
	<li>于是趁着闲下来并且用自己的爬虫知识，搞来了 1000 多个 video </li>
	<li>就做出来了这个（</li>
	</ul>
	<button class="btn-next" onclick="play()">继续播放</button>
	</section>
	<section class="section-5">
	<h3>#FF0 流量之最！图欧学习资源库</h3>
	<a href="https://tuostudy.com" target="_blank">
	<img src="https://githubusercontent.onmicrosoft.cn/zkeq/Python-WebSite-Screenshot/master/save/tuostudy.com/2023-01-14_06-08-37.png">
	</a>
	<ul>
	<li>这个站的日 uv 在 1w 左右() 应该算是我运维的最大的流量体了。</li>
	<li>虽然是公益运维，但是它带动了我的一系列周边（）</li>
	</ul>
	<h5>这里是统计日志：</h5>
	<a href="https://site.icodeq.com/tuostudy.com" target="_blank">
	<img src="https://bu.dusays.com/2023/01/15/63c2de4536cac.png">
	</a>
	<button class="btn-next" onclick="play()">继续播放</button>
	</section>
	<section class="section-6">
	<h3>#F0F 其他的我感觉倒是没什么好炫耀的啦</h3>
	<blockquote><h5>都是一些自己练手或者自己玩的小项目</h5></blockquote>
	<button class="btn-next" onclick="play()">继续播放</button>
	<section class="section-6_1">
	<h4>#00000F 每日早报</h4>
	<a href="https://news.icodeq.com" target="_blank">
	<img src="https://bu.dusays.com/2023/01/15/63c2d48578f96.png">
	</a>
	<ul>
	<li>初学 js 的时候写的，到现在好像每天 1k 访问量的样子</li>
	<li>后端采用 Python 云函数 bs4 + fastapi 开发</li>
	<li>这个 js 写的惨不忍睹，但是勉强能用只能算是</li>
	</ul>
	<button class="btn-next" onclick="play()">继续播放</button>
	</section>
	<section class="section-6_2">
	<h4>#0000F0 LearnOnly 导航重构</h4>
	<a href="https://learnonly.xyz" target="_blank">
	<img src="https://bu.dusays.com/2023/01/15/63c2d43e74542.png">
	</a>
	<ul>
	<li>这个主要是模仿 万花筒 导航站，做的自己的一个起始页。</li>
	<li>里面用到了 js 瀑布流，算是练习了一下基本功。</li>
	<li>支持导入自己的书签（如果你也有很好的文件夹分类习惯的话）</li>
	</ul>
	<button class="btn-next" onclick="play()">继续播放</button>
	</section>
	<section class="section-6_3">
	<h4>#000F00 Vue2 + element 做的几个单页</h4>
	<a href="https://share.onmicrosoft.cn/5fa9z3zqt" target="_blank">
	<img src="https://img.onmicrosoft.cn/2022/12/17/84ffc1d1-1562-4a59-b901-4206427272b2.png">
	<img src="https://img.onmicrosoft.cn/2022/12/17/7e32a7e6-040a-49a5-af7b-6eb4f99fc477.png">
	<img src="https://img.onmicrosoft.cn/2022/12/17/0b05a7b1-ea5f-45dc-b349-2d7c536fddb5.png">
	<img src="https://bu.dusays.com/2023/01/15/63c2d4b523a60.png">
	</a>
	<ul>
	<li>这些主要是写给自己用的，所以就随便写啦。</li>
	<li>其实自己没有学过框架，只是模糊知道一点概念。但是双向绑定真的很爽。</li>
	<li>安利官网的互动教程：https://cn.vuejs.org/tutorial/#step-1</li>
	</ul>
	<button class="btn-next" onclick="play()">继续播放</button>
	</section>
	<section class="section-6_4">
	<h4>#00F000 自建不蒜子</h4>
	<a href="https://busuanzi.icodeq.com" target="_blank">
	<img src="https://bu.dusays.com/2023/01/15/63c2d60e41f6a.png">
	</a>
	<ul>
	<li>因为我的博客是纯静态博客，没有后台</li>
	<li>所以想要实现访问量统计的话，就要借助其他工具。</li>
	<li>不蒜子 就是一个轻量的，开箱即用的统计工具。</li>
	<li>但是因为其经常 502 所以我自己仿写了一个。/</li>
	</ul>
	<button class="btn-next" onclick="play()">继续播放</button>
	</section>
	<section class="section-6_5">
	<h4>#0F0000 Bing-WallPage-Actions Bing 壁纸爬虫</h4>
	<a href="https://bing-wallpaper.apifox.cn" target="_blank">
	<img src="https://img.onmicrosoft.cn/2022-09-08/image-20220909010202981.png">
	</a>
	<ul>
	<li>目前已经上架 Apifox APIhub 啦（就在B站旁边）</li>
	<li>里面会吐出 单个 国家/地区 所有的每日图片</li>
	<li>目前大概 270*9 大约 2000 张图片了</li>
	<li>详情点击图片体验。</li>
	</ul>
	<button class="btn-next" onclick="play()">继续播放</button>
	</section>
	<section class="section-6_6">
	<h4>#F00000 一些平台的部署记录留念</h4>
	<a href="https://github.com/zkeq" target="_blank">
	<img src="https://img.onmicrosoft.cn/2022-09-08/github.com_zkeq%E7%9A%84%E5%89%AF%E6%9C%AC.png">
	<img src="https://img.onmicrosoft.cn/2022-09-08/vercel.com_dashboard.png">
	<img src="https://bu.dusays.com/2023/01/14/63c2ab62a9a04.png">
	<img src="https://bu.dusays.com/2023/01/15/63c301f60bcaf.png">
	</a>
	</section>
	<button class="btn-next" onclick="play()">重新播放</button>
	</section>
	</div>

hosted with ❤ by GitHub

然后就面临了一个难题，我这是动态添加的 CSS，如何与右边的 HTML 效果 联动呢？

想了很久，最后想到的方法是首先把元素都隐藏起来，然后 CSS 挨个显示

过程中使用 js 滚动视窗：

document.querySelector(".section-*").scrollIntoView(true);

hosted with ❤ by GitHub

来实现联动。

听起来很简单，但是我实现起来却是这样的（）（）：

	if (textStartIndex > 673 && !section_6_5){
	document.querySelector(".section-6_5").scrollIntoView(true);
	section_6_5 = true;
	stop();
	}else if (textStartIndex > 633 && !section_6_4){
	document.querySelector(".section-6_4").scrollIntoView(true);
	section_6_4 = true;
	stop();
	}else if (textStartIndex > 593 && !section_6_3){
	document.querySelector(".section-6_3").scrollIntoView(true);
	section_6_3 = true;
	stop();
	}else if (textStartIndex > 553 && !section_6_2){
	document.querySelector(".section-6_2").scrollIntoView(true);
	section_6_2 = true;
	stop();
	}else if (textStartIndex > 513 && !section_6_1){
	document.querySelector(".section-6_1").scrollIntoView(true);
	section_6_1 = true;
	stop();
	}else if (textStartIndex > 473 && !section_6){
	document.querySelector(".section-6").scrollIntoView(true);
	section_6 = true;
	stop();
	}else if (textStartIndex > 435 && !section_5){
	document.querySelector(".section-5").scrollIntoView(true);
	section_5 = true;
	stop();
	}else if (textStartIndex > 396 && !section_4){
	document.querySelector(".section-4").scrollIntoView(true);
	section_4 = true;
	stop();
	}else if (textStartIndex > 359 && !section_3){
	document.querySelector(".section-3").scrollIntoView(true);
	section_3 = true;
	stop();
	}else if (textStartIndex > 321 && !section_2){
	document.querySelector(".section-2").scrollIntoView(true);
	section_2 = true;
	stop();
	}else if (textStartIndex > 283 && !section_1){
	document.querySelector(".section-1").scrollIntoView(true);
	section_1 = true;
	stop();
	}else if (textStartIndex > 245 && !section_1){
	document.querySelector(".section-0").scrollIntoView(true);
	section_0 = true;
	}

hosted with ❤ by GitHub

只能是算出来每个代码块的 CSS 是第几个，然后判断一下，很笨，但是勉强能用吧。

后来发现这个方案有个 bug，在掘金的嵌入代码时，最外层的滚动条也会被滚动，影响用户体验

解决方案：

	document.querySelector(".section-*").scrollIntoView({block: "nearest", inline: "nearest"});
	// https://stackoverflow.com/questions/56688002/javascript-scrollintoview-only-in-immediate-parent

hosted with ❤ by GitHub

接着就是没什么意思的了，写了一堆适配代码，然后加上了一个好看的按钮样式：

	.btn-next {
	--clr-font-main: hsla(0 0% 20% / 100);
	--btn-bg-1: hsla(194 100% 69% / 1);
	--btn-bg-2: hsla(217 100% 56% / 1);
	--btn-bg-color: hsla(360 100% 100% / 1);
	--radii: 0.5em;
	cursor: pointer;
	padding: 0.3em 1.3em;
	margin-bottom: 10px;
	zoom: 0.8;
	min-width: 60px;
	min-height: 44px;
	font-size: var(--size, 1rem);
	font-family: "Segoe UI", system-ui, sans-serif;
	font-weight: 500;
	transition: 0.8s;
	background-size: 280% auto;
	background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
	border: none;
	border-radius: var(--radii);
	color: var(--btn-bg-color);
	box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px rgba(58, 125, 233, 0.25), inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -4px -4px 8px rgba(19, 95, 216, 0.35);
	}
	.btn-next:hover {
	background-position: right top;
	}
	.btn-next:is(:focus, :focus-within,:active) {
	outline: none;
	box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2);
	}

hosted with ❤ by GitHub

补充：增加了全屏检测以及切换功能：

	function launchFullScreen(element) {
	if(isFullScreen()){
	exitScreen();
	return;
	}
	if (element.requestFullscreen) {
	element.requestFullscreen();
	} else if (element.mozRequestFullScreen) {
	element.mozRequestFullScreen();
	} else if (element.webkitRequestFullscreen) {
	element.webkitRequestFullscreen();
	} else if (element.msRequestFullscreen) {
	element.msRequestFullscreen();
	}
	}
	function exitScreen() {
	if (document.exitFullscreen) {
	document.exitFullscreen();
	}
	else if (document.mozCancelFullScreen) {
	document.mozCancelFullScreen();
	}
	else if (document.webkitCancelFullScreen) {
	document.webkitCancelFullScreen();
	}
	else if (document.msExitFullscreen) {
	document.msExitFullscreen();
	}
	if (typeof cfs != "undefined" && cfs) {
	cfs.call(el);
	}
	}
	function isFullScreen() {
	return !! (
	document.fullscreen ||
	document.mozFullScreen ||
	document.webkitIsFullScreen ||
	document.webkitFullScreen ||
	document.msFullScreen
	);
	}
	// 来源：https://www.jianshu.com/p/6170f1ba7467

hosted with ❤ by GitHub

记录一个 scrollIntoView 的bug

• 起初我用的是 document.querySelector(".section-0").scrollIntoView(true);
• 但是我发现这在掘金的嵌入代码预览时，父级页面：也就是浏览器窗口
• 居然也会跟着滚动，这不是期望发生的行为。
• 经过查阅很多资料后，使用了一个还算可以的解。

	// 也就是上文提到的
	document.querySelector(".section-*").scrollIntoView({block: "nearest", inline: "nearest"});

hosted with ❤ by GitHub

参考资料

• javascript - scrollIntoView block vs inline - Stack Overflow
• html - Javascript scrollIntoView only in immediate parent - Stack Overflow

让我感到很有意思的是，一个5年前就说应该被修复的 bug 居然留存到了现在( 2023 年)