hexo(5)maupassant主題擴展功能

添加底部 badge#

首先為項目中添加更多顏色樣式類，會後面定制化頁面樣式準備。

在themes/maupassant/source/css/style.scss中的頭部添加顏色樣式如下：

$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;  
    }  
}

這裡的顏色主題我是在flatuicolors找的，你也可以隨意更換為你喜歡的顏色主題。

在themes/maupassant/source/css/style.scss的尾部添加 badge 樣式，代碼如下:

.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;  
    }  
}

在themes/maupassant/layout/_partial/footer.pug的代碼，全部替換為下面代碼：

div#footer  
    div  
        span 版權所有  
        |  
        |
        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/') |  你自己的備案號 
        |  
    div(class="footer-remark")  
        div(class="github-badge")  
            a(href="https:hexo.io", rel='nofollow')  
                span(class="badge-subject") 由...提供  
                span(class="badge-value color-clear-chill") Hexo  
        div(class="github-badge")  
            a(href="https:hexo.io", rel='nofollow')  
                span(class="badge-subject") 主題  
                span(class="badge-value color-ufo-green") Maupassant  
        div(class="github-badge")  
            span(class="badge-subject") 總訪問量  
            span(class="badge-value color-watermelon" id="busuanzi_value_site_pv") 
        div(class="github-badge")  
            span(class="badge-subject") 總訪問人數  
            span(class="badge-value color-coral" id="busuanzi_value_site_uv") 
        div(class="github-badge")

首頁不展示不蒜子計數問題#

在我們配置完上面內容之後並部署到伺服器上之後，我們會發現，每一篇博文的計數都已經正常顯示，但是首頁的計數卻獲取不到，這是因為首頁沒有加載不蒜子插件的原因。

在themes/maupassant/layout/_partial/head.pug文件中，添加如下代碼：

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

修改默認顯示寬度#

同樣還是在themes/maupassant/source/css/style.scss中修改如下代碼：

現在顯示器已經越來越大，而且大多是電腦用戶，可以適當調大頁面顯示區域。

.body_container {  
    padding: 0 60px;  
    max-width: 1440px;   /* 由1150px 調整為 1440px */
    margin: 0 auto;  
}

添加置頂樣式#

hexo 中自帶了文章置頂功能，只要在文元信息中設置sticky: 1000即可，其中數值越大級別越高。

當時設置完成了之後查看樣式，管理員和訪客都無法區分普通文章與置頂文章，因為他們的樣式上一模一樣。

所以接下來，我們在themes/maupassant/source/css/style.scss文件中的.post .post-title下給置頂文章添加一些樣式。

.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;  
}

具體位置如下圖所示：

在themes/maupassant/layout/index.pug中修改一下標題，添加兩行代碼即可：

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

修改網頁字體#

每個程序員可能都折騰多碼字主題，其中字體也是大家各有偏愛，有的喜歡蘋果的source code pro，有的喜歡monospace，或者是微軟雅黑，而我比較鐘愛jetbrains-mono，接下來就把頁面的字體改一下吧。

去官網下載字體Jetbrains Mono。
解壓將字體文件JetBrainsMono-Regular.ttf放入到themes/maupassant/source/css文件夾中。
在themes/maupassant/source/css/style.scss中的添加如下代碼：

@font-face {  
    font-family: "jetbrains-mono";  //自定義字體名稱  
    src: url('./JetBrainsMono-Regular.ttf'); //你的字體包路徑  
}

在style.scss中全局搜索font-family屬性，在所有屬性之前加入自定義字體，代碼如下：

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

這裡注意，類似下面的樣式不要修改，font-family和content同時出現的不要修改font-family屬性，這個是字體文件。

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

發現問題：我們看看頁面，發現所有的頁面都已經是我們想要的字體了，但是代碼塊中的字體卻沒有生效。

解決方案：

在_config.maupassant.yml中找到屬性external_css設置為true。
創建source/css文件夾，並在此文件夾下，創建external.css文件。
在external.css文件中，新增如下代碼：

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

清除緩存hexo cl，重新生成文件hexo g，重跑服務hexo s，即可看到樣式正常啦。

添加廣告區域#

雖然廣告有點煩人，但是我覺得好的廣告是可以讓人覺得有用的。

在_config.maupassant.yml中的widgets屬性中，找一個合適的位置插入ad，代碼如下：

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

創建頁面themes/maupassant/layout/_widget/ad.pug，加入代碼如下：

.widget  
  .widget-title  
    i.fa.fa-bell-o= ' 廣告'  
  div(style="margin:3px 0;")  
    a(href="https://www.aliyun.com/minisite/goods?userCode=ktv3zgyc")  # 替換為你自己的跳轉連接
      img.nofancybox(src="https://cirry.cn/img/aliyun-cloud.jpg" style="width:100%;") #  src修改為你自己想要展示的圖片路徑

將你的圖片放在themes/maupassant/source/img下即可。