hexo(5)maupassant theme extension features

Add Bottom Badge#

First, add more color style classes to the project for customizing page styles later.

Add the color styles at the top of themes/maupassant/source/css/style.scss as follows:

$theme-colors: (  
        "golden-sand": #eccc68,  
        "coral": #ff7f50,  
        "wild-watermelon":#ff6b81,  
        "peace":#a4b0be,  
        "grisaille":#57606f,  
        "Orange":#ffa502,  
        "bruschetta-tomato":#ff6348,  
        "watermelon":#ff4757,  
        "bay-wharf":#747d8c,  
        "prestige-blue":#2f3542,  
        "lime-soap":#7bed9f,  
        "french-sky-blue":#70a1ff,  
        "saturated-sky":#5352ed,  
        "white":#ffffff,  
        "city-lights":#dfe4ea,  
        "ufo-green":#2ed573,  
        "clear-chill":#1e90ff,  
        "bright-greek":#3742fa,  
        "anti-flash-white":#f1f2f6,  
        "twinkle-blue":#ced6e0,  
);  
 
@each $name, $color in $theme-colors {  
    .color-#{$name} {  
        background-color: $color;  
    }  
}

The color themes here were found on flatuicolors, and you can freely change them to your preferred color themes.

At the end of themes/maupassant/source/css/style.scss, add the badge styles with the following code:

.footer-remark {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    flex-wrap: wrap;  
}  
  
.github-badge {  
    border-radius: 4px;  
    text-shadow: none;  
    font-size: 12px;  
    color: #fff;  
    line-height: 1.25;  
    margin: 6px;  
    display: flex;  
  
    a {  
        color: #fff;  
    }  
  
    .badge-subject {  
        display: inline-block;  
        background-color: #555;  
        padding: 4px 4px 4px 6px;  
        border-top-left-radius: 4px;  
        border-bottom-left-radius: 4px;  
    }  
  
    .badge-value {  
        display: inline-block;  
        padding: 4px 6px 4px 4px;  
        border-top-right-radius: 4px;  
        border-bottom-right-radius: 4px;  
    }  
}

Replace all the code in themes/maupassant/layout/_partial/footer.pug with the following code:

div#footer  
    div  
        span Copyright  
        |  
        |
        span(class="fa fa-copyright") 2022  
        |  
        |
        a(href=url_for('.'), rel='nofollow')= config.title  
        |  
        a(rel='nofollow', target='_blank', href='https://beian.miit.gov.cn/') |  Your own record number 
        |  
    div(class="footer-remark")  
        div(class="github-badge")  
            a(href="https:hexo.io", rel='nofollow')  
                span(class="badge-subject") Powered by  
                span(class="badge-value color-clear-chill") Hexo  
        div(class="github-badge")  
            a(href="https:hexo.io", rel='nofollow')  
                span(class="badge-subject") Theme  
                span(class="badge-value color-ufo-green") Maupassant  
        div(class="github-badge")  
            span(class="badge-subject") Total Visits  
            span(class="badge-value color-watermelon" id="busuanzi_value_site_pv") 
        div(class="github-badge")  
            span(class="badge-subject") Total Visitors  
            span(class="badge-value color-coral" id="busuanzi_value_site_uv") 
        div(class="github-badge")

Home Page Not Displaying Busuanzi Count Issue#

After configuring the above content and deploying it to the server, we will find that the count for each blog post is displayed correctly, but the count on the home page cannot be retrieved. This is because the home page does not load the Busuanzi plugin.

In the themes/maupassant/layout/_partial/head.pug file, add the following code:

script(src='https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')

Modify Default Display Width#

Also, modify the following code in themes/maupassant/source/css/style.scss:

Now that monitors are getting larger and most users are on computers, we can appropriately increase the display area of the page.

.body_container {  
    padding: 0 60px;  
    max-width: 1440px;   /* Adjusted from 1150px to 1440px */
    margin: 0 auto;  
}

Add Sticky Style#

Hexo has a built-in feature for sticky posts; just set sticky: 1000 in the post metadata, where a higher value indicates a higher level.

After setting this up, both administrators and visitors could not distinguish between regular posts and sticky posts because their styles were identical.

Next, we will add some styles for sticky posts under .post .post-title in the themes/maupassant/source/css/style.scss file.

.top-post {  
    font-weight: 400;  
    height: 32px;  
    padding: 0 6px;  
    margin-right: 5px;  
    line-height: 32px;  
    font-size: 16px;  
    white-space: nowrap;  
    vertical-align: 2px;  
    color: #fff;  
    background-image: -webkit-linear-gradient(0deg, #3742fa 0, #a86af9  100%);  
    border-radius: 2px 6px;  
}

The specific location is shown in the image below:

In themes/maupassant/layout/index.pug, modify the title by adding two lines of code:

block content  
  for post in page.posts.toArray()  
    .post  
      h1.post-title  
        if post.sticky
            span(class="top-post")  Sticky  
        include _partial/helpers.pug  
        a(href=url_for(post.path))  
          +title(post)

Modify Web Page Font#

Every programmer may have their own favorite code theme, and fonts are also a matter of personal preference. Some like Apple's source code pro, some prefer monospace, or Microsoft YaHei, while I particularly like jetbrains-mono. Next, let's change the font of the page.

Download the font Jetbrains Mono from the official website.
Unzip and place the font file JetBrainsMono-Regular.ttf into the themes/maupassant/source/css folder.
Add the following code to themes/maupassant/source/css/style.scss:

@font-face {  
    font-family: "jetbrains-mono";  // Custom font name  
    src: url('./JetBrainsMono-Regular.ttf'); // Path to your font package  
}

Globally search for the font-family property in style.scss and add the custom font before all properties, as follows:

body {  
    background-color: #FFF;  
    color: #444;  
    font-family: "jetbrains-mono", SimSun, sans-serif; /* Modify here */
    -webkit-font-smoothing: antialiased;  
    -moz-osx-font-smoothing: grayscale;  
    font-size: 14px;  
}

Note that styles like the one below should not be modified; do not change the font-family property when it appears with content, as this is for the font file.

&:before {  
    font-family: "FontAwesome";  
    content: "\f073";  
    padding-right: 0.3em;  
}

Problem Found: We see that all pages have the desired font, but the font in code blocks has not taken effect.

Solution:

In _config.maupassant.yml, find the external_css property and set it to true.
Create a source/css folder, and within this folder, create an external.css file.
In the external.css file, add the following code:

code[class*="language-"],  
pre[class*="language-"] {  
    font-family: "jetbrains-mono", sans-serif;  
}

Clear the cache with hexo cl, regenerate the files with hexo g, and restart the service with hexo s to see the styles applied correctly.

Add Advertising Area#

Although ads can be a bit annoying, I believe good ads can be useful.

In the _config.maupassant.yml file, find a suitable position in the widgets property to insert ad, as follows:

widgets: ## Seven widgets in sidebar provided: search, info, category, tag, ad, recent_posts, recent_comments and links.  
  - search  
  - info  
  - category  
  - tag  
  - ad  
  - recent_posts  
  - recent_comments  
  - links

Create a page themes/maupassant/layout/_widget/ad.pug and add the following code:

.widget  
  .widget-title  
    i.fa.fa-bell-o= ' Ad'  
  div(style="margin:3px 0;")  
    a(href="https://www.aliyun.com/minisite/goods?userCode=ktv3zgyc")  # Replace with your own redirect link
      img.nofancybox(src="https://cirry.cn/img/aliyun-cloud.jpg" style="width:100%;") # Change src to the image path you want to display

Place your image in the themes/maupassant/source/img folder.