【旧】手摸手教你开发掘金文章主题

4,757 阅读4分钟

首先 github.com/xitu/juejin… 这是掘金开源主题定制的仓库。

再来看规则

如何贡献 Markdown 主题

  1. 使用默认模板创建一个公开的仓库(点击绿色的 Use this template 按钮)
  2. 将其中的 juejin.scss 替换为自己创作的样式,目前支持 Sass,Less 和 CSS
  3. Fork 此仓库并克隆到本地,在 themes.js 文件中指明样式文件的路径,ref 为 commit hash
  4. 在 README.md 中「社区主题」章节中添加你的主题和作者信息
  5. 提交 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

  1. 首先要 Fork juejin-markdown-themes 主仓库
  2. Fork 完成后将此仓库 clone 到本地
  3. 新建一个与主题同名的分支
  4. 找到 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 文章主题,也欢迎提出修改建议!