Butterfly ガイド 1

はじめに

しばらくして、このHexoブログの開発のほとんどの部分が完了したと考え、このウェブサイトについての簡単なガイドを書くことにしました。

このウェブサイトはHexoをベースにしています。Hexoは高速で、シンプルかつパワフルなブログフレームワークです。また、オープンソースのプログラムでもあります。詳細は公式ウェブサイトで確認できます。同時に、このブログはButterflyというテーマをベースにしており、詳細はウェブサイトのフッターで確認できます。このテーマを選んだ理由は、ブログをより柔軟にし、ウェブサイトを制御するための多くの選択肢を提供し、要件に合わせてソースコードを変更できるからです。

最後に、このブログの多くの機能や改善点は他の人々（インターネットから）からのものです。共有してくれた彼らに感謝します。いくつかのおすすめサイトを追加します。この記事があなたの助けになることを願っています。（私も素人です。ただ楽しんでいるだけです。）

シンプルな美化はパート5から始まります。

パート1

おすすめサイト（これらのウェブサイトからブログについての多くの有用な記事を見つけることができます。彼らは私よりもずっと優れています。）

パート2

開発環境：

hexo: 6.0.0

hexo-cli: 4.3.0

Butterfly: 4.01

Mac OS: Monterey (arm64)

Ubuntu: 20.04.3 LTS (arm64)

パート3

主な手順（この記事はシンプルな美化により注目します）

コンピュータを購入（例：RPI😁）
オペレーティングシステムをインストール
npmをインストール
node.jsをインストール
Hexoをインストール
テーマを選択（この記事ではbutterflyを使用）
テーマについての多くの記事を読む
hexoを初期化
Markdownを使用して何かを書く
投稿する
サーバーまたは他の場所に転送
レビューする

パート4

ブログで作業を始める前に、破損を防ぐためにバックアップを作成してください。

パート5

テーマの作者Jerryが言うように、Hexoのルートディレクトリに_config.butterfly.ymlファイルを作成し、テーマディレクトリの_config.ymlの内容を_config.butterfly.ymlにコピーするのがベストです。今後は_config.butterfly.ymlでのみ設定を行えばよいです。

Hexoは自動的にテーマの_config.ymlと_config.butterfly.ymlの設定をマージします。同じ名前の設定がある場合、優先度の高い_config.butterfly.ymlの設定が使用されます。

そのため、まずカスタムCSSのインジェクションをお勧めします。これにより、テーマを更新しても機能が停止するのを防ぐことができます。

_config.butterfly.ymlに移動

Command+F（Mac）を押して検索ボックスに「inject」と入力し、これを見つけます。

inject:
   head:
  - <link rel="stylesheet" href="/css/mycss.css">
bottom:
    # - <script src="xxxx"></script>

その後、myblogフォルダの/hexo-theme-butterfly/soueces/css/に移動し、mycssと呼ぶことができるcssファイルを作成します。

パート6

インターネット上で多くのリソースを見つけることができます。ここにいくつかのCSSを置きましたが、その大部分は他のウェブサイトからのものです。これらのCSSを試して変更することができます。コンピュータを壊すことはありません。共有してくれた彼らに再度感謝します。

矢印の色を変更

/* 矢印の色を変更 */

#content-inner.layout h1::before {
    color: #ff4500 ;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem;
}
#content-inner.layout h2::before {
    color: #ff4500 ;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem;
}
#content-inner.layout h3::before {
    color: #ffbf00 ;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem;
}
#content-inner.layout h4::before {
    color: #a9e000 ;
    margin-left: -1.05rem;
    font-size: 0.8rem;
    margin-top: -0.09rem;
}
#content-inner.layout h5::before {
    color: #57c850 ;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0.0rem;
}
#content-inner.layout h6::before {
    color: #5ec1e0 ;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0.0rem;
}

フッターを透明に

/* フッターを透明に */
#footer{
  background: transparent!important;
}

ナイトモードの疑似マスクレイヤーを透明に

/*
 * ナイトモードの疑似マスクレイヤーを透明に
 */
 
[data-theme="dark"] #footer::before{
  background: transparent!important;
}
[data-theme="dark"] #page-header::before{
  background: transparent!important;
}