Beautify Post by Tag Plugins
Why I Create This Post
Using Markdown can help us get a clear website without the knowledge of HTML. There’s still several shortages that Markdown’s functions are limited compared to HTML. I am also a beginner, so I just try to collect some useful codes for decorating my website pages.
But firstly, we can see that quoting by Markdown syntax can beautify the page.
🔗Quoting
1 | > It's a quoting demonstration. |
It’s a quoting demonstration.
In the hexo-butterfly theme, the quotation has a blue background. It makes some contents from others distinct from your own ideas.
Tag Plugins
The next part is for introducing some colorful text boxes to beautify the website.
What you need to pay attention to is that the following content may NOT work for themes other than hexo-butterfly, and it is only available in Hexo.
The general grammar to create the tag plugins is
1 | <div class = "note [color] [class] [icon-choices] [style]"> |
| Name | value |
|---|---|
| color | red, blue, green, purple, pink, orange or just no value for grey |
| class | default, primary, success, info, warning, danger |
| icon-choices | icon (only available for part of fontawesome icons), no-icon |
| style | simple, modern, flat, disabled |
🔗Style
🔗Style: flat
🔗Without Content
The original version is class = "note flat".
1 | <div class="note flat"></div> |
You can see grey (I think it’s grey) color ribbon appear after you execute your code.
🔗Add Text
Then let’s increase some texts.
1 | <div class="note flat"><p>Hello World!</p></div> |
Hello World!
Actually, the result is quite similar to the Markdown quotation on its original renderer.
🔗Change Color
Let’s change the color of the text box.
1 | <div class="note blue flat"><p>Hello World! But in blue background.</p></div> |
Hello World! But in blue background.
It looks better compared to the original version!
🔗Add Emoji 🥰
We can still make more changes to it like add some emojis.
1 | <div class="note blue flat"><p>:sunglasses:Hello World in blue background with emoji.:cowboy_hat_face:</p></div> |
😎Hello World in blue background with emoji.🤠
🔗Add Icon
Alright, it seems to be the end of that part. However, did you notice the empty space between your beginning of text and the beginning of the text box. We can add a icon here.
1 | <div class="note green icon flat"><i class="note-icon fas fa-rocket"></i><p>:point_left:Green rocket is on the left.</p></div> |
👈Green rocket is on the left.
The color of the icon is the same as the text box.
If you don’t like the icon, and don’t want there’s a waste of space in the text box, that’s also fine.
1 | <div class="note green no-icon flat"></i><p>:disappointed:No icon here.</p></div> |
😞No icon here.
🔗Some Other Colors
1 | <div class="note orange icon flat"><i class="note-icon fas fa-magic"></i><p>Do something <strong>WISELY</strong></p></div> |
The results are shown below 👇.
Do something WISELY
First
git add ., then
git commit -m"xxx", finally
git push.
Alright, do you like purple?
Pink color looks so cute.
🔗Style: simple
I will use the same content in the Style: flat section for the comparison.
1 | <div class="note simple"><p>Hello World!</p></div> |
Hello World!
😎Hello World in blue background with emoji. (Actually, there's no more blue background anymore.😢)
👈Green rocket is on the left.
Do something WISELY
First
git add ., then
git commit -m"xxx", finally
git push.
Alright, do you like purple?
Pink color looks so cute.
It looks much simpler and cleaner.
🔗Style: modern
The modern style is close to the flat style. The color of your text will change to the same color as the background.
1 | <div class="note modern"><p>Hello World!</p></div> |
Hello World!
😎Hello World in blue background with emoji. (Actually, there's no more blue background anymore.😢)
👈Green rocket is on the left.
Do something WISELY
First
git add ., then
git commit -m"xxx", finally
git push.
Alright, do you like purple?
Pink color looks so cute.
🔗style: disabled
No background, the simplest version.
1 | <div class="note disabled"><p>Hello World!</p></div> |
Hello World!
😎Hello World in blue background with emoji. (Actually, there's no more blue background anymore.😢)
👈Green rocket is on the left.
Do something WISELY
First
git add ., then
git commit -m"xxx", finally
git push.
Alright, do you like purple?
Pink color looks so cute.
🔗Class
You can change the color for the different classes, but the icon in the classes will not change as the color changes. So I don’t encourage you to change the color of the classes, if you still want to do so, try to use the class = "note [color] [icon] [style]" instead.
🔗Class: default
1 | <div class="note default flat"><p>It is the default class.</p></div> |
It is the default class.
🔗Class: primary
1 | <div class="note primary flat"><p>It is the primary class.</p></div> |
It is the primary class.
🔗Class: success
1 | <div class="note success flat"><p>It is the success class.</p></div> |
It is the success class.
🔗Class: info
1 | <div class="note info flat"><p>It is the info class.</p></div> |
It is the info class.
🔗Class: warning
1 | <div class="note warning flat"><p>It is the warning class.</p></div> |
It is the warning class.
Personally, it seems to be more persuasive to use the red color to show the warning.
Maybe you can try
1 | <div class="note red icon flat"><i class="note-icon fa-solid fa-circle-exclamation"></i><p>Strong warning is always in red.</p></div> |
Strong warning is always in red.
🔗Class: danger
1 | <div class="note danger flat"><p>It is the danger class.</p></div> |
It is the danger class.
In The End
That’s’ all for this post, if you are using the hexo-butterfly theme, hope the blog will help you. And in the future I will try to make the tag plugins available in my way. Thanks for your reading.
