掘金是一个对前端开发者非常友好的技术社区，这从活跃的技术文章和沸点讨论、掘金官方不断推出的各种激励活动、以及掘金官方对开发者的重视就可以看出。
我从2020年开始在掘金创作、学习，经历了掘金重要的网站重构，特别是对MD编辑器的支持，目前掘金MD编辑器已经开源，并且：
支持 Markdown 主题自定义！
这体现了掘金的开放包容和对开发者的信任。
很早就在掘金技术圈儿中看到林小帅同学在群里讨论掘金主题的开发指南，他是掘金主题cyanosis的贡献者，也是掘金主题开发工具的作者。
在早期掘金主题贡献者们的推动下，目前社区贡献的掘金主题已经超过20个：
作为掘金的资深用户，我也萌发了贡献掘金主题的想法，终于在今年2022年2月3日实践了这个想法：
贡献了一个叫DEVUI蓝（
devui-blue）的掘金 Markdown 主题
目前devui-blue主题已经正式发布到掘金MD编辑器的主题中，欢迎大家使用！
如何贡献掘金主题
接下来给大家分享如何贡献一个掘金主题。
通过掘金 Markdown 文章编辑器找到了贡献掘金主题的文档地址：
该仓库的README文档中写清楚了贡献 Markdown 主题的步骤，按照步骤一步一步来即可。
第1步：使用默认模板创建一个公开的仓库
使用官方模板生成主题仓库，注意仓库的命名，一般是juejin-markdown-theme-xxx，这里的xxx是你自己的主题名，比如我贡献的是devui-blue主题，生成的仓库名就用juejin-markdown-theme-devui-blue
生成的仓库包含4个文件：
LICENSE：开源仓库的LICENSE，只需要把其中的Copyright改成你自己就行README.md：可以简单介绍下你的主题，并贴一些效果图上去juejin.scss：这是最关键的主题文件，你的主题样式都写在这个文件里package.json：依赖包管理的配置文件，只需要把其中的name改成你自己的仓库名即可
第2步：编写自己的主题
juejin.scss这个文件名是掘金默认的主题名字，需要改成你自己的主题名，比如devui-blue.scss。
这是一个scss文件，主题样式都包裹在.markdown-body中，主要包含以下标签样式：
h1-h6：标题p：段落img：图片hr：分隔线code：行内代码pre：代码块a：超链接table/thead/tr/td：表格blockquote：引用ol/ul/li：列表
自定义主题就是修改这些标签的样式，为了方便后续的维护，我先定义好了devui-blue主题涉及到的scss变量。
// DEVUI蓝
$devui-primary: #5E7CE0; // 主色，用于大部分场景
$devui-primary-light: #F2F5FC; // 比主色浅一点，主用于表格隔行换色和引用格式的背景色
// 珊瑚红，用于行内代码
$devui-danger: #C73636; // 行内代码文本颜色
$devui-danger-bg: #FFEEED; // 行内代码背景色
$devui-text: #252b3a; // 正文文本颜色
$devui-dividing-line: #dfe1e6; // 分隔线颜色，用于分隔线、表格边框等
$devui-area: #f8f8f8; // 区块的背景色
$devui-base-bg: #fff; // 正文文本背景色
$devui-border-radius: 2px; // 圆角大小
然后在相应的标签使用scss变量即可完成主题。
第3步：使用主题开发工具验证主题是否符合预期
这个主题开发工具是社区的linxsbox开发的，使用起来也非常方便，直接一行命令即可：
cd <yourThemeProject>
npx juejin-theme-devtool <yourStyleFile>
在本地验证没问题之后，就可以给掘金主题仓库提交PR啦。
第4步：fork掘金主题仓库
点击掘金主题仓库右上角的 Fork 按钮，将该仓库 Fork 到你的个人空间
然后将这个 Fork 的个人仓库 clone 到你的本地机器：
git clone git@github.com:yourname/juejin-markdown-themes.git
然后设置下上游仓库：
git remote add upstream git@github.com:xitu/juejin-markdown-themes.git
使用以下命令确保设置没问题：
git remote -v
设置成功应该显示：
origin git@github.com:yourname/juejin-markdown-themes.git (fetch)
origin git@github.com:yourname/juejin-markdown-themes.git (push)
upstream git@github.com:xitu/juejin-markdown-themes.git (fetch)
upstream git@github.com:xitu/juejin-markdown-themes.git (push)
第5步：添加主题并提交PR
clone下来的掘金主题仓库包含以下目录和文件：
.github/workflowsgallery.gitignore.prettierrcLICENSEbuild.js：主题构建脚本，会在你提交PR时自动从你的主题仓库拉取主题样式文件，并进行渲染和检验，确保没有大问题themes.js：需要在这里增加你的主题README.md：在这里补充文档- 其他
其中我们只需要修改themes.js和README.md文件即可。
const themes = {
...,
'devui-blue': {
owner: 'kagol',
repo: 'juejin-markdown-theme-devui-blue',
path: 'devui-blue.scss',
ref: '127cfeb',
},
}
第6步：合入之后在预览链接进行二次验证
PR合入之后可以通过以下链接进行二次预览和验证： juejin-markdown-themes.netlify.app/
不过很遗憾，这个链接在我写这篇文章的时候访问不了，我已经给掘金提了 issue，希望他们能看到并及时修复：
第7步：掘金发布你的主题之后在现网再次验证
代码合入之后，你只需要静静等待掘金更新 Markdown 编辑器即可，一更新，你需要第一时间去验证下你的主题在真实的掘金编辑器和网站上是否正常。
务必把以下格式的样式全部验证一遍（特别注意下不同分辨率的设备下的效果，比如PC、Pad端、手机端等）：
h1-h6：标题p：段落img：图片hr：分隔线code：行内代码pre：代码块a：超链接table/thead/tr/td：表格blockquote：引用ol/ul/li：列表
验证有问题需要及时修复。
小插曲
当时提交完PR，发现检查未通过，原因是我在themes.js中写的owner是错的，这个owner必须是你的主题仓库中的名字，比如devui-blue的主题仓库是：
那么owner是kagol，repo是juejin-markdown-theme-devui-blue：
'devui-blue': {
owner: 'kagol',
repo: 'juejin-markdown-theme-devui-blue'
}
当时从报错日志看不出是什么问题，我一行一行看build.js构建脚本的代码才发现，原来构建的时候会从你的主题仓库中拉取相应的主题scss文件，如果拉取不到就报错啦。
所以我当时就又提了一个PR，针对这个问题在报错日志中提供更多信息，PR如下：
提交PR的小建议
给开源项目提交PR，有几个点需要注意：
- 提交信息需要遵循规范，一般是
feat: xxx或者fix: xxx，如果有零散的无异意义的提交，可以使用git commit --amend进行修补或者使用git rebase -i进行合并，请保持Commit列表的干净 - PR标题务必清晰，标题可以用动宾结构，比如
新增DEVUI蓝掘金主题、修复DEVUI蓝主题文件尺寸过大问题等 - PR描述可以补充一些关注此PR的更详细的信息，比如贴一些图片，展示你的主题的效果
遵循以上小建议，可以保持你和开源项目作者的信息同步，让你的PR更容易被别人理解和合入。
以下是我给掘金主题仓库提交的PR：
- feat: 新增DEVUI蓝掘金主题
- feat: 增加themes.js格式错误的提示信息
- fix(devui-blue): 解决DEVUI蓝主题文件尺寸过大问题
- fix(devui-blue): 解决DEVUI蓝主题的任务列表和超链接图标位置偏移问题
以下是devui-blue主题的源码仓库：
juejin-markdown-theme-devui-blue
