hexo(5)maupassantテーマの拡張機能

フッターバッジの追加#

まず、プロジェクトにより多くのカラースタイルクラスを追加し、後でページスタイルをカスタマイズできるようにします。

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の末尾にバッジスタイルを追加します。コードは以下の通りです：

.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 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/') |  あなたの备案号 
        |  
    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") 総訪問数  
            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でタイトルを少し変更し、2 行のコードを追加するだけです：

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)

ウェブページのフォントの変更#

各プログラマーは、さまざまなコードテーマを試すかもしれませんが、フォントもそれぞれ好みがあります。ある人は Apple の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: ## サイドバーに提供される7つのウィジェット: search, info, category, tag, ad, recent_posts, recent_comments, 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に置くだけです。