阅读 593
它来了!掘金编辑器主题开发贡献图文教程

它来了!掘金编辑器主题开发贡献图文教程

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

评论可参与抽奖,具体可查看文末。

前言

国庆节写了一个新的编辑器主题也成功上线了也就是这篇文章的主题,评论区里很多小伙伴都说需要教程,今天就带来一个全流程图文教程。

简单说一下需要什么:

  1. Node.js
  2. Git
  3. 任意编辑器
  4. 一点点CSS基础+一点点审美+一点点模仿再创新的能力

E02CD75B3771FCCF915DE87E72EC447C.jpg

创建项目

  1. 打开掘金官方的模板,点击绿色的 Use the template 按钮:

    image-20211011113039213

  2. 点击之后会让你新建一个仓库,命名尽量使用 juejin-markdown-theme-你的主题名,然后点击绿色的创建即可:

    image-20211011113401044

  3. 创建好之后,我们就可以用 git clone 或者编辑器的图形化界面来把项目克隆到本地:

    image-20211011113456681

  4. 因为git在国内时常抽风,这里给大家推荐一个软件dev-sidecar: github 加速, git clone加速,google CDN加速,Stack Overflow加速

  5. 我这里使用 git clone 和vscode编辑器,打开命令行输入:

    image.png

  6. 第一步就完成了:

    image-20211011120303015

开始Coding

  1. 先修改 LICENSE,容易忘掉(json文件可以自己修改或者删掉,我是直接删掉了):

    image-20211011120940276

  2. 掘金给出了主题开发工具,可以在命令行输入:

    cd <yourThemeProject>
    npx juejin-theme-devtool <yourStyleFile>
    复制代码
  3. 就像这样:

    image-20211011121658614

  4. 打开 http://localhost:3000 就可以修改同时预览了:

    image-20211011122018064

  5. 然后就可以开始写代码了,可以使用CSS或SCSS,推荐使用SCSS(省事儿,还没有什么学习成本),可以在模板基础上一点点修改,也可以把别人的下载下来参考,比如mancuoj/Chinese-red

  6. 找颜色,改样式,看预览三步循环🔥

  7. 写完之后,觉得预览效果可以了,就可以推送到Github仓库了(不赘述了)。

    image.png

提交PR

  1. fork一下掘金官方仓库,然后克隆到本地修改,或者直接网页中修改也行。

    image-20211011123136290

  2. 修改 theme.js,添加下列几项,其中 highlight 可省略,别忘了逗号

    image-20211011123325092

  3. ref 是你的主题仓库上传生成的 commit hash 值:

    image-20211011123502452

  4. README.md 中添加你的大名,照着上面写就行了,仓库地址+掘金主页+MIT

    image-20211011123720585

  5. 然后就可以提交pr了,打开你fork来的仓库点击 Pull requests

    image-20211011124004482

  6. 直接合并到 main ,填写一下描述,就是新增了xx主题:

    image-20211011124124193

  7. 打开官方仓库就可以看到你的pr了:

    image-20211011124342415

  8. 需要通过一些自动的check来检验你的成果:

    image-20211011124526421

  9. 检测不成功会出现×,这时候你就需要对比其他通过的PR来修改了:

    image-20211011124639255

  10. 同时也可以点击 Details 来查看部署的结果:

    image-20211011124808163

  11. 修改 front-matter 就可以看到了:

    image-20211011125052655

  12. 接下来就是等待大佬来 merge 了。

    image.png

参考主题列表

参考主题作者
juejin
smartblueTusi
cyanosis林小帅
少数派 (sspai.com)
typora-theme-mistyetigerstudio
typora-theme-piekevinzhao2233
typora-theme-ursinenoatpad
My-Typora-ThemesTheigrams
DrakeTyporaThemeliangjingkanji
typora-vue-themeblinkfox
hydrogenDawnLck
fancyxrr2016
Chinese-redMancuoj

一些坑

  1. 开发工具预览PR中的预览实际上线后 的三个样式都会有一些细微差别,尽量使用px来作为单位,而不是rem或者em。
  2. 需要注意 行间代码代码框 的区别。
  3. 任务列表- [x] 语法需要格外注意,我就是前车之鉴。
  4. 表格样式以及在黑暗模式下的显示。
  5. 字体样式及大小。
  6. 提交PR后进行的修改,需要同步修改 commit hash
  7. 尽量要做到清爽,不要太花哨,考虑一下整体的兼容性,背景图片什么的能省则省。
  8. PR通过后,掘金线上编辑器是有这个主题了,但是文章没有效果,需要等官方发版,具体发版时间未知(我是中午可以在线上编辑器看到,晚上就能使用了)。
  9. 不能有外链,也不能使用特殊字体,背景图片必须是base64格式的。
  10. 提交PR的时候合并成单条commit记录,不建议连历史一起提交,我是第一次不懂,一直在修改,可以在同一个commit下提交。
  11. 还有一些想到再补充😊

总体还是挺简单的,希望大家多多贡献,也能让我有更多选择。

我是Mancuoj,如果还有什么疑问或者踩了什么坑可以评论留言,我都会回复的,求个赞👍

欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送100份掘金周边,抽奖详情见活动文章。

文章分类
前端
文章标签