PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

The New Year is coming, let you and your articles have a new look in the New Year! In nuggets, there are many theme styles that are used to beautify articles, as shown below:

For example, the theme I am using now is Chinese Red. What should I do if I want to customize a theme of my own? Since the New Year is coming, I will implement a Chinese Spring Festival theme theme style, so that the article can also have the flavor of the New Year ~

Effect of theme

Let’s see what I’ve achieved before we start

How, is not full of flavor ~ below talk about how to customize the theme of the nuggets.

Theme customization

Create a warehouse

To create your own theme, you can simply create a repository in the Github repository for Gold Digger themes, follow the official guidelines, and pull the code to local editing.

The syntax in Markdown is ultimately translated into HTML tags, so all you need to know to customize a theme is CSS.

When editing the theme, we use SCSS for editing, if you want to preview the effect you need to convert to CSS. There is also a tool for previewing the test page. To preview the SCSS file styles, run the following command.

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

If you find this command too hard to remember, you can write it to package.json and add a new command

"scripts": {
    "dev":"npx juejin-theme-devtool juejin.scss"
  }
Copy the code

After that, just use NPM run dev to launch the preview

The core subject

The default style was edited for us in the juejin. SCSS file. What we need to do is to make a change based on this file.

First, there should be strong Chinese elements and New Year elements, and the theme color is gold and red

Two. In the style of obvious at the same time can not affect the message of the article, the overall can not be too abrupt, to be clear and concise

Around the above two points, I started the New Year theme customization

Subject to realize

The overall framework

Because I want the theme color is gold and red, but the color range is too large, how to choose a beautiful color? Here I use the Chinese color scheme provided by this website, this website is all Chinese style scheme, just suitable for my theme.

Red color scheme:

Light red color scheme:

Golden color scheme:

In SCSS we can create variables to help unify our styles.

I’ve created two variables here, red and light red, so where’s the gold? I’m using gold in my native CSS, so I don’t need to create a separate variable.

$red: #c02c38;
$red-light: #e3b4b880;
$gold:#ffa60f;
Copy the code

Background texture

With the variables created, I wanted to change the texture of the overall background first, since it is a Chinese theme, so I used a texture similar to Xiangyun. I converted the image to Base64 format and defined a $texture-cloud variable in the style, then used it as the background image in the outermost container

The implementation code is as follows:

$texture-cloud: "data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAGcAAAAXCAMAAAAhvaEKAAAAM1BMVEUAAAAjIyMjIyMAAAAPDw8PDw8kJCQAAAAAAAAkJCQAAAAAAAA7OztAQEBHR 0cxMTExMTFSK924AAAAEXRSTlMAFgAGEQAVAgsADwceICQaAKU/Wn8AAAIzSURBVHgBjZXhbuM4DIRJc0LNUkm77/+exaLApreIRdusLjH6/bAAmdSQozCWA 10eGC4PdFnJBd7kOQ24rGgrh9Dkgf/aEZKAs22bYxnhEfIAuAwMoRxooIvU1xzLyMeu2hEepHDs2LWXesbT16p6FhAestKZCtx2nCXXS7ntxtI6GY5bPzqt1 mFEQkGnkz216OGkjtBeXSjPdnVqkKQcdPhIg82d6Ztn3xPUt4xYXw9VDGk45RUdaNZ3GcOaEU1OCO+PJ3c/jJImn9HfucmgH7+nU+Amhs3sfg35EcBaF8zU5 GeY9r4K+YsZIEml06QCXRbopEIAzgE8MNnvV1wuc/sEQoNU2eCXXD6K0r3/uctGuy/4vMtEs79f/5Xd64eo7KiK3z/lCfX6nIcn7iavMCBfjllLuqLJGeGWC cnYOMP8MGuU5/8XIWlTmpp3SdLvg84VqdSwpuaUiYxvxBiC5P13UlVawHkEdSrqXFGX5P3YtYBzVu3ZrW2HH6lLdzxzr6GUh5ABuF12e+l0CLbMXSX9f0GoS aJNJCuldjnlllkRuyEm5+SFlKR2e9JJIxWRh6F9L43lW0UH9v9roF63czIh10YNJznPTszhbR8TN5mxcj3apnW+1ELPdi2b2KsEzr7bA2bSdvY15vnpkmSIZ erWlLOaPCi6Xe1bK0wB1JnLZAdFrFcZZpzzcCnK/MThpGVFEfUA4zorwfm7k6/HAvs2FKZPrGv7dKdplstICj2s+wdYtietbSOnTgAAAABJRU5ErkJggg==";

.main-area{
  background-image: url($texture-cloud);
  background-position: center center;
  font-family: -apple-system,system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
  word-break: break-word;
  line-height: 1.75;
  font-weight: 400;
  overflow-x: hidden;
  font-size: 17px;
}
Copy the code

Effect achieved:

The title design

My idea is that h1, H2 and H3, the three most frequently used tags, each have its own style. For the title, I used regular script with good compatibility and Chinese flavor.

The unified style of the label is as follows:

h1.h2.h3.h4.h5.h6 {
    position: relative;
    margin-top: 25px;
    margin-bottom: 10px;
    margin: 25px 5px 10px 5px;
    font-family: KaiTi;
  }
Copy the code

First of all, let’s talk about the style of H1. The label is big, usually at the beginning of a big chapter, so I design it in the style of Spring Festival couplets, with a feeling of sticking it at the gate and welcoming you in.

This Spring Festival couplet has several features. Secondly, the matching color is red and gold set in the front. I changed a texture for the background to highlight the difference between it and the background. Add a touch of refinement with gold border elements. Textures use base64 images, and borders are implemented through pseudo-elements.

The code is as follows:

h1 {
    font-size: 30px;
    padding: 5px 10px;
    background-color: $red;
    background-image: url($texture-cricle);
    box-shadow: $shadow;
    color: $gold;
    text-shadow: 0px 0px 2px # 000;
    text-align: center;
    &::after, &::before{
      content: ' ';
      position: absolute;
      width: 20px;
      height: calc(100% - 12px);
      z-index: 10;
      border-top: 3px solid $gold;
      border-bottom: 3px solid $gold;
    }
    &::before {
      top: 3px;
      left: 3px;
      border-left: 3px solid $gold;
    }
    &::after {
      right: 3px;
      bottom: 3px; 
      border-right: 3px solid $gold; }}Copy the code

The style of h2 is to add a blessing in front of the font. The H3 is styled with a lion cub.

These two are relatively simple, both through the pseudo element plus the image, the image is defined as a base64 string variable to use the code as follows:

h2 {
    display: flex;
    align-items: center;
    font-size: 27px;
    &::before {
      content: "";
      display: block;
      margin-right: 8px;
      width: 40px;
      height: 40px;
      background-image: url($img-fu);
      background-size: 40px 40px; }}h3 {
    display: flex;
    align-items: center;
    font-size: 23px;
    &::before {
      content: "";
      display: block;
      margin-right: 8px;
      width: 25px;
      height: 25px;
      background-image: url($img-chun);
      background-size: 25px 25px; }}Copy the code

Refer to the content

Here’s the style of the reference. I used a light red background for the reference, red for the font, and a gold edge to the left to highlight the feel of a single module.

A list of the style

The unordered list is relatively simple, I just changed the color of the dots to make the list clear, and kept the original style.

The diagram below:

Li ::marker this pseudo-class corresponds to the style of the previous small dot, and the code is as follows:

ul {
    li::marker {
      color: $red; }}Copy the code

Unordered list and I’m going to change the number toRegular script in Chinese, and also set to red, as shown below:

List-style-type: cjk-ideographic can be used to modify the numeric type in front of an ordered list, as follows:

ol{
    li{
      list-style-type: cjk-ideographic;
      &::marker{
        font-family: KaiTi;
        font-weight: bold;
        color: $red; }}}Copy the code

link

Links are styled in a red font, with a # character added to the front of links by default via pseudo-elements for easy differentiation. In addition, I added a hover effect that changed links to a red background and gold font as the mouse rolled over.

The effect is as follows:

The implementation code is as follows:

a {
    text-decoration: none;
    color: $red;
    transition: all 0.3 s;
    padding: 0 2px;
    &:hover,
    &:active {
      color: $gold;
      background-color: $red;
    }
    &::before {
      content: "#"; }}Copy the code

The code block

Code is an important way to convey information in an article, so I just made some simple styles, changing the background to light red and adding a red border to the left to highlight the moduality. inWhen the mouse hover a little upThe effect of

Other style

The above are some notable changes, in addition to the overall margin, line height, font size have been modified, and I also set the default left and right margins for bold and in-line code, which can greatly reduce the frequent adding of parentheses to improve the aesthetics of writing articles. The above modifications are for the overall content of the intuitive refreshing optimization, after all, the main purpose of the article is still used to convey information ~

conclusion

At present, this theme has been submitted to the PR of the nuggets theme warehouse for review, looking forward to meeting you as soon as possible!

In the design of the theme, watching the preview style step by step become more colorful and more delicate, more and more strong flavor of the New Year, or very sense of achievement!

I wish you all🧨 Happy New Year, 🐯 The New Year!Click on it if you think it’s goodPraise oh