网页版的淘宝首页不好看，那就自己给官方写一个并投稿上去

我们正在参加一个淘宝的比赛，如果对你有帮助，可以点击该链接进行换肤，为我们投上你的宝贵一票：

换肤地址

直接点击使用皮肤就可以啦，谢谢大家的支持！！！

淘宝我们肯定是每个人都使用的一个产品，但是他的网页版的 ui 有点不好看，也不太符合我们工作时间观看，那么今天的内容我们就来学习一下如何自定义一个 vscode 版本的淘宝，如下图是原本的主题：

本地开发样式

本地开发的话我们可以使用熟悉的 vscode 这种编辑器来编写，然后 css 的话因为有 css module 后面的 hash 值会变，建议使用选择器 [class*="xxx"]:

html

代码解读

复制代码

<div class="Tab--baseStyle--izOIUCL Tab--actStyle--bq3TL6m"></div> <style> [class*="Tab--baseStyle--"] { background: red; } [class*="Tab--actStyle--"] { color: red; } </style>

如果已经使用了类选择器 也可以通过编辑器的查找替换 使用正则替换:

正则：(.)([a-zA-Z0-9]+--[a-zA-Z0-9]+--)([a-zA-Z0-9]+) 替换内容：[class*="$2"]

相关资源问题

小图片可以使用 base64 格式，可以用过该链接进行转换 base64

大图片可以在 BBS 网站发帖位置上传拿到 cdn 链接：链接地址

选择图片上传

上传成功后打开控制台找到链接即可

预览样式效果

要预览样式效果，我们需要安装一个谷歌插件，可以直接从我们的 github 地址中获取到：

github 地址

下载完成之后我们要解压这个 zip 文件并在地址栏输入 chrome://extensions/ 链接，打开开发者模式

选择刚刚已解压的文件夹

安装完毕之后就可以使用了

使用插件覆盖样式

在对应修改样式的页面点击插件按钮

将本地样式上传预览

可选择粘贴 css 样式、上传文件或者输入 css 链接方式来加载主题样式查看

如果是在本地开发，我们可以在本地启动一个 http 服务 复制 css 本地链接到输入框内点击导入样式查看，导入之后会在页面右下角有更新按钮，点击更新按钮可以更新最新的样式查看

最终我们编写到的淘宝首页的效果是这样的：

完整的代码在 github 上面，感兴趣的可以直接下来直接获取：

github 地址

最后

我们正在参加一个淘宝的比赛，如果对你有帮助，可以点击该链接进行换肤，为我们投上你的宝贵一票：

换肤地址

谢谢大家的支持！！！

原文链接：https://juejin.cn/post/7417847557047599123