首先 github.com/xitu/juejin… 这是掘金开源主题定制的仓库。
再来看规则
如何贡献 Markdown 主题
- 使用默认模板创建一个公开的仓库(点击绿色的 Use this template 按钮)
- 将其中的 juejin.scss 替换为自己创作的样式,目前支持 Sass,Less 和 CSS
- Fork 此仓库并克隆到本地,在 themes.js 文件中指明样式文件的路径,ref 为 commit hash
- 在 README.md 中「社区主题」章节中添加你的主题和作者信息
- 提交 pull request
第一步 Use this template
点击 Use this template 然后会跳转到创建仓库的页面,且会告诉你 新的存储库将以与 xitu/juejin-markdown-heme-default
拥有相同的文件和文件夹。
仓库名就使用 -> juejin-markdown-theme-{你的主题名称}
这里我已经有了,自然是提示存在了。
重要说明
重要说明,以下内容为不适用于新版本开发工具,请勿继续使用!
旧版本工具已经合并至 掘金主题开发工具
新版本开发工具已经大量简化逻辑,更易上手操作
重要说明,以下内容为不适用于新版本开发工具,请勿继续使用!
第二步 clone 仓库 & 开发
1. 将自己的仓库克隆到本地
git clone 主题项目URL
2. 开发文章主题样式
先将项目中的 juejin.scss
文件重命名为自己的主题名称,目前支持 Sass,Less 和 CSS
目前掘金的官方样式编辑器还没有上线,和荣剑大佬聊了,后续会有。
所以我自己先实现了一个可以同步文章内容且同时渲染样式结果的 掘金 markdown 主题开发工具。
更新: 主题开发工具已经合并至
clone 此仓库到本地,将 样式文件名 和 文章 ID 修改为自己的即可。
2.1. 首先安装依赖
npm i
新建与你的主题同名的文件,例如:我的主题叫 cyanosis.scss 那么在此项目下建立同名文件 (cyanosis.scss) 即可
。
然后,找到 index.js 文件,
// index.js
// 本主题样式文件:cyanosis.scss
// 同步预览文章:https://juejin.cn/post/6865308620876808199
// 参数为样式文件 & 文章 ID
run('cyanosis.scss', '6865308620876808199');
2.2. 启动预览
npm run dev
3. 同步主题到仓库
找到 cp.js 文件,修改如下信息
// 本主题样式文件:cyanosis.scss
// 样式主题项目目录:可用相对路径和绝对路径,请保留尾部 斜杠/
copyFile('cyanosis.scss', '../juejin-markdown-theme-cyanosis/');
同步命令,可将编写好的样式文件同步到你的主题仓库
npm run cp
4. 提交代码
以上样式开发完成并同步到自己仓库之后就可以 push 提交代码到自己的主题仓库了。
第三步 提交 PR
- 首先要 Fork juejin-markdown-themes 主仓库
- Fork 完成后将此仓库 clone 到本地
- 新建一个与主题同名的分支
- 找到 themes.js 文件,继续添加如下信息
(注意:不要删除别人信息)
cyanosis: { // 主题名称
owner: 'linxsbox', // github 用户名
repo: 'juejin-markdown-theme-cyanosis', // 主题仓库名
path: 'cyanosis.scss', // 主题文件
ref: 'a17ed6e', // 提交的 commit hash key
},
获取 commit hash key
还要记得在 README.md 中 「社区主题」 章节中添加你的主题和作者信息。
最后 push 提交代码!提交成功后就可以使用该分支提交 PR 了。
重要说明
掘金 markdown 主题开发工具仅仅是为了目前开发主题方便!
请勿短时间内多次启动,掘金 API 接口有访问限制!
恶意多次调用掘金 API 接口导致被封 IP 概不负责!
为减少频繁渲染,在 2 秒内多次变更文件将不会生效!
最后
很高兴受到掘金邀请作为第一版主题样式开发者。
希望大家也能够多贡献自己的主题。也希望大家在贡献主题的同时遵守开源规则,尽量避免未授权/抄袭等内容出现。
欢迎大家使用 cyanosis 文章主题,也欢迎提出修改建议!