This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Comments can be entered into the lucky draw, details can be seen at the end of the article.

preface

I wrote a new editor theme for the National Day and it was successfully launched, which is the theme of this article. Many friends in the comment section said that they need a tutorial, so today I will bring a whole process graphic tutorial.

A quick word on what is needed:

1. Node.js
2. Git
3. Arbitrary editor
4. A little CSS basics + a little aesthetics + a little imitation ability to create something new

Create a project

1. Open the official nuggets template and click the green Use the Template button:

   

2. Click on this button to create a new repository, use juejin-markdown-theme- your theme name, and click on create in green:

   

3. Once created, you can use Git Clone or the editor’s graphical interface to clone the project locally:

   

4. Git clone, Google CDN, Stack Overflow, and dev-Sidecar.

5. With git Clone and vscode, open the command line and type:

   

6. The first step is complete:

   

Start Coding

1. Modify the LICENSE file first, which is easy to forget (JSON files can be modified or deleted, but I deleted them directly) :

   

2. Nuggets provides theme development tools that can be typed at the command line:

   cd <yourThemeProject>
   npx juejin-theme-devtool <yourStyleFile>
   Copy the code

3. Something like this:

   

4. Open http://localhost:3000 to modify and preview:

   

5. Then you can start to write code, either using CSS or SCSS, SCSS is recommended (save a lot of work and there is no learning cost), you can modify the template a little bit, you can also download someone else’s reference, such as Mancuoj/Chinese-Red.

6. Find color, change style, view preview three-step cycle 🔥

7. Once you’re done, you can push it to the Github repository (no more details) if you think the preview looks good.

   

Submit a PR

1. Fork the official nuggets repository and clone it locally, or modify it directly from the web.

   

2. Modify theme.js by adding the following items, with highlight omitted and the comma:

   

3. Ref is the commit hash value generated by your theme repository upload:

   

4. To add your name to readme. md, just write the following: warehouse address + Nuggets home page +MIT:

   

5. To submit pr, open the repository you forked in and click Pull Requests:

   

6. Add xx theme to main and fill in the description:

   

7. Open the official warehouse to see your PR:

   

8. There are some automatic checks to check your results:

   

9. If the test is not successful, there will be ×, at this time you need to compare with other PR passed to modify:

   

10. You can also click Details to see the results of the deployment:

    

11. Change front-matter to see:

    

12. Next is waiting for the big guy to merge.

    

List of reference topics

Some of the pit

1. Development tool Preview 跟 Preview in PR 跟 Actually behind the lineEach of the three styles has a slight difference. Try to use PX as a unit rather than REM or EM.
2. Need to pay attention toWhile the code 及 Code boxThe difference between.
3. The task list- [x]Grammar requires extra attention, as I have learned.
4. Table style and display in dark mode.
5. Font style and size.
6. Changes made after PR submission need to be synchronizedcommit hash.
7. Try to be clean, not too fancy, consider the overall compatibility, background images and what can be spared.
8. Others want to add 😊

In general, it is quite simple. I hope you can contribute more and let me have more choices.

I am Mancuoj, if there is any doubt or stepped on what pit can comment message, I will reply, for a praise 👍

Please feel free to discuss in the comments section. The nuggets will draw 100 nuggets in the comments section after the diggnation project. See the event article for details.