Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”
This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
Upgrade Win11 these days, from zero to have more than N appearance opportunities. The first two weeks of The game are over, so we will create a game theme from scratch. We will try to restore more details in the limited time. The theme is really from scratch.
The first step is to prepare the preconditions
To complete a gold digger theme, here are the prerequisites we need:
A normal Github account
If you don’t have one, you can open Github and register one by yourself. The process is relatively simple. Let’s go to the next step
* Version control toolsGit
You can go to Git’s official website and download your own platform architecture directly to install it
* Code tools
Popular Code tools include WebStorm/IntelliJ IDEA or Visual Studio Code. Here, we use IntelliJ IDEA for development. We can open the official website of IntelliJ IDEA, choose download and install directly
Here I recommend another way, using Toolbox App for download and installation. This Toolbox App is very useful, and you can directly download and manage all JetBrains related development tools
Here we have downloaded Android Studio and IntelliJ IDEA, if you want to install other applications, you can directly click install, management is particularly convenient, it also supports rollback version, other functions to experience
-
- Nodejs
Here we go to the Nodejs website, see your preferences, and choose the LTS version or the latest version
Here I also recommend using the Node management tool NVM-Windows to manage the Node version. Let’s go to the Release page and download the latest version and install it, which I have installed here
Here I need to install the latest LTS long term support version, run Windows Terminal as an administrator, and then run NVM install LTS, which will automatically install the latest LTS Node version, as well as the latest NPM
nvm install lts
Copy the code
To install the latest version, you can run NVM install latest. For more information, see the nVM-Windows documentation
After Node is installed, I prefer to use YARN for package management. Run NPM install -g yarn to install YARN. You can also download yarn from the official website. Click to download the latest version and install directly.
Step two: Coding
Cloning project
Let’s open up the nuggets theme template, hit Use This Template,
Here we need to fill in the name of our repository, along with other relevant information, and then click Create Repository from Template to Create.
I have pre-created the juejin-markdown-theme-Maidragon repository, copy the link
Open our IntelliJ IDEA and click Get from VCS
Fill in the address we just pasted and select the project location and name
Click Clone to complete the download. The project is opened and completed. The structure is as follows
To get started
We will rename juejin. SCSS to maidragon. SCSS, then edit the package.json file, replace the contents with our own, and add a Preview script to make debugging easier. NPX juejin-theme-devtool maidragon.scss is a tool for exploring the theme of gold nuggets
{
"name": "juejin-markdown-theme-maidragon"."author": "iota9star"."homepage": "https://github.com/iota9star/juejin-markdown-theme-maidragon"."private": true."license": "MIT"."scripts": {
"preview": "npx juejin-theme-devtool maidragon.scss"
},
"dependencies": {
"bytemd": "^ 1.2.0"}}Copy the codeNow we execute YARN Install and wait for the package to complete.
Click the “Run” button and execute first to see the effect
Open the link and let’s take a look at the original first
Clean and clean, without a trace of fancy, now we open sister Dragon official website, look for theme color and so on
So that’s about it. Now let’s style it from the top down. Let’s start with the background
.markdown-body {
word-break: break-word;
line-height: 1.75;
font-weight: 400;
font-size: 15px;
overflow-x: hidden;
color: $-font-color;
background-image: url($-bg);
background-size: 100% auto;
background-repeat: repeat;
}
Copy the code
This is going to look a little silly. Let’s add two more sentences
margin: 0 -2rem;
padding: 0 2rem;
Copy the code
That looks good. Now I’m going to add some magic to H1
h1 {
color: $-green;
font-size: 30px;
margin-bottom: 5px;
align-self: center;
position: relative;
z-index: 0;
&:before, &:after {
content: "";
position: absolute;
background-repeat: no-repeat;
background-size: contain;
}
&:before {
top: -24px;
left: -36px;
width: 96px;
height: 96px;
background-image: url($-hat);
transform: rotate(-36deg);
}
&:after {
top: -36px;
right: -78px;
width: 78px;
height: 78px;
background-image: url($-dragon);
z-index: -1; }}Copy the code
Now add magic to the rest of the h2, H3, H4, H5, h6, it’s a little ugly if it’s too complicated, so let’s keep it simple
h2.h3.h4.h5.h6 {
&:before {
display: inline-block;
background-color: rgba($-orange.87);
z-index: -1;
transition: border-radius .3s;
}
&:hover {
&:before {
border-radius: 50%;
}
&:after {
animation: shakeit 0.3 s; }}}h2 {
font-size: 24px;
border-bottom: 4px solid rgba($-green.36);
padding-bottom: 12px;
&:before {
width: 16px;
height: 16px;
left: -4px;
}
&:after {
bottom: 0;
right: 0;
width: 36px;
height: 56px;
background-image: url($-dragon);
z-index: -1; }}h3 {
font-size: 18px;
padding-bottom: 0;
&:before {
width: 14px;
height: 14px;
left: -4px; }}h4 {
font-size: 16px;
&:before {
width: 12px;
height: 12px;
left: -4px; }}h5 {
font-size: 15px;
&:before {
width: 10px;
height: 10px;
left: -4px; }}h6 {
margin-top: 5px;
&:before {
width: 8px;
height: 8px;
left: -4px; }}Copy the code
Next to add magic are paragraphs, which have nothing to say for words
text-align: justify;
color: $-font-color;
Copy the code
The next one is the table, so let’s see what it looks like
table {
font-size: 13px;
width: 100%;
max-width: 100%;
overflow: auto;
border: solid 4px rgba($-green.0.38);
border-collapse: collapse;
position: relative;
z-index: 1;
margin-top: 48px;
&:after {
width: 100%;
height: calc(100% + 48px);
background-image: url($-dragon);
background-position: right;
z-index: -1;
content: "";
bottom: 0;
right: -12px;
position: absolute;
background-repeat: no-repeat;
background-size: contain;
opacity: 0.24;
}
thead {
background: rgba($-green.0.2);
color: $-font-color;
text-align: left;
}
tr:nth-child(2n) {
background-color: rgba($-green.0.1);
}
th.td {
padding: 12px 16px;
line-height: 24px;
}
td {
min-width: 100px; }}Copy the codeThe following effects are applied to the various character line codes
del {
text-decoration: none;
position: relative;
z-index: 1;
&:before {
content: "";
left: -4px;
right: -4px;
height: 6px;
background-color: rgba($-orange.48);
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: -1;
border-radius: 2px;
}
&:hover{
&:before{
background-color: rgba($-orange.96); }}}code {
font-family: $monospace-font;
word-break: break-word;
border-radius: 2px;
overflow-x: auto;
background-color: rgba($-green.2);
color: $-dark-green;
font-size: 0.72 em;
padding: 0.2 em 0.48 em;
margin: 0 0.48 em;
line-height: 1.75;
}
Copy the code
Arrange your pictures so that they are simple and centered
img {
max-width: 100%;
position: relative;
left: 50%;
transform: translateX(-50%);
}
Copy the code
Next up is the list, restyled, and simply dealt with
ol.ul {
padding-left: 2rem;
li {
margin-bottom: 0;
list-style: inherit;
position: relative;
z-index: 1;
&::marker {
color: $-green;
}
input[type="checkbox"] {
background-color: transparent ! important;
color: transparent ! important;
border: none ! important;
appearance: none;
margin: 0;
padding: 0;
box-sizing: border-box;
&:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
left: 0;
top: 5px;
border: 2px solid rgba($-orange.87);
}
&:checked:after {
content: "";
border-left: 2px solid white;
border-bottom: 2px solid white;
z-index: 1;
width: 6px;
height: 3px;
left: 3px;
top: 11px;
position: absolute;
transform: translateY(-50%) rotate(-45deg);
}
&:checked:before {
background-color: $-green;
border-color: $-green; }} &.task-list-item {
list-style: none;
padding-left: 20px;
ul.ol {
margin-top: 0; }}}ul.ol {
margin-top: 3px; }}ol > li{&::marker {
color: $-green;
font-weight: bold;
font-style: italic; }}ol li {
padding-left: 6px;
}
Copy the code
The next one is links
a {
text-decoration: none;
color: $-green;
background-color: rgba(255.255.255.9);
position: relative;
font-weight: bold;
padding: 4px 8px;
border-radius: 4px;
transition: all .3s;
font-size: 13px;
margin: 0 6px;
z-index: 0;
&:before, &:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-radius: 50%;
}
&:before {
right: 0;
top: 0;
transition: all .4s;
z-index: 1;
}
&:after {
left: 0;
bottom: 0;
transition: all .3s;
z-index: -2;
}
&:hover,
&:active {
color: white;
background-color: $-green;
border-bottom-left-radius: 12px;
border-top-right-radius: 12px;
&:before {
top: -4px;
right: -4px;
width: 8px;
height: 8px;
background-color: rgba($-red.87);
}
&:after {
bottom: -4px;
left: -6px;
width: 12px;
height: 12px;
background-color: rgba($-orange.87); }}}Copy the code
There is a final quote
blockquote { color: #444; margin: 22px 0; Padding: 1.6 rem; background-color: rgba($-green, .1); position: relative; border-radius: 36px 16px 16px 16px; Transition:.2s Cubic bezier(.18,.89,.52, 1.94); &:hover {transform: scale(1.05) rotate(3deg); } &:before { position: absolute; content: ""; width: 36px; height: 36px; background-image: url($-hover); z-index: 1; left: -8px; top: -8px; } &::after { display: block; Content: '"'; font-weight: bold; font-size: 56px; height: 56px; color: $-green; position: absolute; right: -16px; bottom: 0; } & > p { margin: 10px 0; }}Copy the code
Now it’s basically OK, take a look at all the effects, some dynamic effect screenshots can not be cut, time problem, first, let’s submit a wave of code
toThe nuggets theme PR
We start with a juejin-markdown-themes fork
After the fork succeeds, we clone to local as before
Git checkout -b maidragon creates a branch of Maidragon and modifs it as documented
In themes.js, fill in the information related to the theme.js, where the ref can be viewed by running git branch -vv
maidragon: {
owner: 'iota9star'.repo: 'juejin-markdown-theme-maidragon'.path: 'maidragon.scss'.ref: '10d038a'
}
Copy the codeFinally, add your own information to readme. md and submit the code
Now let’s open our storehouse juejin-Markdown-Themes and click Compare & Pull Request to create a PR
There’s nothing we need to change here, just click Create pull Request submit, okay
We just need to wait for the approval now
conclusion
-
Contributing themes is fairly simple and requires few steps. Hopefully more and more people will contribute to the theme
-
I hope I can review this theme, theme feeling or good, more refreshing.
-
We can preview the effect here, just change the theme to Maidragon and preview it online
If the article is helpful to you, welcome to like, comment, pay attention to, collect, share, your support is my code word power, thank you!! 🌈
Finally, you can click here to join the QQ group FlutterCandies🍭 and communicate with various gurus