二叉树树

準備するもの#

1. 優れた頭脳、並列処理をサポートする少なくとも 2 つ以上のイベント。問題に直面したらまず考え、理解できなければ検索し、検索できなければ AI とおしゃべりし、いきなり質問しないこと。

2. Git - Downloads (git-scm.com)：最も優れたバージョン管理ツールで、ここでは Github を操作するために使用します。もちろん、GitHub Desktop | Simple collaboration from your desktopを試してもいいですが、私にとってはこれが使いにくいです。

3. Node.js — Run JavaScript Everywhere (nodejs.org)：Fuwari は Node.js に基づいており、ブログを構築するためにこれをインストールする必要があります。

4. Githubアカウント：Fuwari ファイルを保存するためのコードリポジトリを作成するために使用します。

5. Cloudflareアカウント：Pages を作成し、ドメインをバインドしてアクセスをサポートするために使用します。

6. MarkText：これは視覚的な Markdown エディタです。Fuwari のすべての記事 / ページは Markdown であるため、使いやすいエディタが必要です。

7. あなたは Markdown 構文を使用して記事を書くことができる必要があります。できない場合は、Markdown 基本語法 | Markdown 公式チュートリアルを参照してください。

フローチャート#

ローカルに Fuwari をデプロイし、記事を書く -> 変更をリモート Github リポジトリにプッシュ -> Cloudflare Pages がリポジトリの更新を検出し、新しいウェブサイトの静的ファイルを自動的に構築 -> ウェブサイトが正常に変更される。

さあ、始めましょう！#

まず、ローカルに Fuwari をデプロイします。#

1. リポジトリをフォークします：

2. 次に、リポジトリをローカルにクローンします：git clone <あなたのリポジトリURL>（SSH を使用することをお勧めします。魔法を使わずに変更をプッシュできます）。

3. まず、pnpm をグローバルにインストールします：npm install -g pnpm（npm の国内取得が遅い場合は、cnpm を試してください：npmmirror ミラーサイト）。

4. 次に、プロジェクトのルートディレクトリで依存関係をインストールします：pnpm install と pnpm add sharp。

5. これで、ローカルに Fuwari を成功裏にデプロイしました。

Fuwari の基本情報を書き換え、余分なファイルを整理します。#

新しく作成された Fuwari には、いくつかのサンプルのブロガー名、ICON、URL、紹介、サンプル記事が含まれている可能性があります。ユーザーにこれがあなたのブログであることを知らせるために、これらを一つ一つ書き換える必要があります。

1. ルートディレクトリの src フォルダ内にある config.ts を見つけて、書き換えを始めます。

   • title：あなたのブログの主タイトル。

   • subtitle：あなたのブログの副タイトル。オプションで、ホームページに「主タイトル - 副タイトル」として表示されます。

   • lang：ブログの表示言語。コメントにはいくつかの一般的な値がリストされています。例：en, zh_CN, zh_TW, ja, ko。

   • themeColor：色相値はあなたのブログのテーマカラーで、ブログの右上隅のパレットアイコンで好きな色を確認してから記入します。
     

   • banner：src：バナー画像、http/https URL をサポート。

   • favicon：src：ウェブサイトアイコン、http/https URL をサポート。

   • links：友好的なリンク、これらのリンクはナビゲーションバーに表示されます。

   • avatar：あなたのアバター。

   • name：あなたの名前。

   • bio：個性のあるサイン、アバターと名前の下に表示されます。

   • NavBarConfig はナビゲーションバーに設定されたハイパーリンクです。ProfileConfig はあなたのユーザーのハイパーリンクで、図のようになります。
     

   • icon：あなたが欲しいアイコンをFont Awesomeで検索する必要があります。例えば QQ の場合、fa6-brands:qqと記入します。Fuwari は次の種類をサポートしています：fa6-brands, fa6-regular, fa6-solid, material-symbols。
     

   • ここに私の config.ts を添付します。

   • Copy

     import type {
       LicenseConfig,
       NavBarConfig,
       ProfileConfig,
       SiteConfig,
     } from './types/config'
     import { LinkPreset } from './types/config'
     
     export const siteConfig: SiteConfig = {
       title: '二叉树树のブログ',
       subtitle: '愛するものを愛して！',
       lang: 'zh_CN',         // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko'
       themeColor: {
         hue: 355,         // テーマカラーのデフォルト色相、0から360まで。例：赤：0、ティール：200、シアン：250、ピンク：345
         fixed: false,     // 訪問者のためにテーマカラーのピッカーを隠す
       },
       banner: {
         enable: true,
         src: 'assets/images/222.webp',   // /srcディレクトリに対して相対的。'/'で始まる場合は/publicディレクトリに対して相対的。
         position: 'center',      // object-positionに相当し、'top', 'center', 'bottom'のみをサポート。デフォルトは'center'
         credit: {
           enable: false,         // バナー画像のクレジットテキストを表示
           text: '',              // 表示されるクレジットテキスト
           url: ''                // (オプション) 元のアートワークまたはアーティストのページへのURLリンク
         }
       },
       favicon: [    // デフォルトのfaviconを使用するには、この配列を空のままにします。
          {
            src: 'https://q2.qlogo.cn/headimg_dl?dst_uin=2973517380&spec=5',    // faviconのパス、/publicディレクトリに対して相対的。
            //theme: 'light',              // (オプション) 'light'または'dark'、異なるモードのために異なるfaviconがある場合のみ設定。
            sizes: '128x128',              // (オプション) faviconのサイズ、異なるサイズのfaviconがある場合のみ設定。
          }
       ]
     }
     
     export const navBarConfig: NavBarConfig = {
       links: [
         LinkPreset.Home,
         LinkPreset.Archive,
         LinkPreset.About,
         {
           name: 'ランダム画像',
           url: 'https://pic.onani.cn',     // 内部リンクはベースパスを含めるべきではありません。自動的に追加されます。
           external: true,                               // 外部リンクアイコンを表示し、新しいタブで開きます。
         },
         {
           name: 'GitHub',
           url: 'https://github.com/saicaca/fuwari',     // 内部リンクはベースパスを含めるべきではありません。自動的に追加されます。
           external: true,                               // 外部リンクアイコンを表示し、新しいタブで開きます。
         },
       ],
     }
     
     export const profileConfig: ProfileConfig = {
       avatar: 'assets/images/111.webp',  // /srcディレクトリに対して相対的。'/'で始まる場合は/publicディレクトリに対して相対的。
       name: '二叉树树',
       bio: 'Protect What You Love./愛するものを愛して！',
       links: [
         // {
           // name: 'Twitter',
           // icon: 'fa6-brands:twitter',       // アイコンコードについては https://icones.js.org/ を訪問してください。
                                             // まだ含まれていない場合は、対応するアイコンセットをインストールする必要があります。
                                             // `pnpm add @iconify-json/<icon-set-name>`
           // url: 'https://twitter.com',
         // },
         // {
           // name: 'Steam',
           // icon: 'fa6-brands:steam',
           // url: 'https://store.steampowered.com',
         // },
         {
           name: 'GitHub',
           icon: 'fa6-brands:github',
           url: 'https://github.com/afoim',
         },
         {
           name: 'QQ',
           icon: 'fa6-brands:qq',
           url: 'https://qm.qq.com/q/Uy9kmDXHYO',
         },
         {
           name: 'メール',
           icon: 'fa6-solid:envelope',
           url: 'mailto:acofork@foxmail.com',
         },
       ],
     }
     
     export const licenseConfig: LicenseConfig = {
       enable: true,
       name: 'CC BY-NC-SA 4.0',
       url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
     }
     

2. 余分なファイルを整理します。ルートディレクトリの src/content/posts フォルダにはいくつかのサンプル記事があり、これらの記事は Markdown 構文やテクニックを紹介しており、Fuwari と fuwari をより早く習得するのに役立ちます。これらは別の場所に保存できます。

3. これで、記事の執筆を開始できます。

さあ、執筆を始めましょう！#

1. まず、プロジェクトのルートディレクトリで：pnpm new-post <ここに記事のタイトルを記入>を実行します。

2. 次に、ルートディレクトリの src/content/posts フォルダに xxx.md ファイルが追加されます。

3. MarkText を使用してこのファイルを開くと、いくつかの基本情報が表示されます。私たちはいくつかの重要な情報に注目する必要があります。

4. Copy

   title: xxx
   published: 2024-10-14
   description: ''
   image: ''
   tags: []
   category: ''
   draft: false 
   lang: ''
   

   • title：記事のタイトル。

   • published：記事の作成日時。

   • description：記事の説明、通常は記事タイトルの下に表示されます。

   • image：記事のカバー画像（同じディレクトリに対して ./ を記入する必要があります。例：./assets/images/2024-10-14-11-33-28-image.webp）。

   • tag：記事のタグ。

   • category：記事のカテゴリ。

5. ルートディレクトリの astro.config.mjs も変更する必要があります。34 行目で site: をあなたのサイトの URL に変更します。例： site: "https://onani.cn",。

6. え？誰かがこう尋ねるかもしれません。Markdown は確かに良いですが、画像の挿入はどうすればいいの？

7. これも非常に簡単です。MarkText のおかげで、Typecho を編集するのと同じように Ctrl+CV を使用して Markdown 構文に画像を挿入できますが、いくつかの小さな設定が必要です：

   • MarkText ソフトウェアの左上隅の三本線をクリックし、次に File -> Preferences -> 左側の Image カテゴリを順にクリックし、図のように設定します。最初のオプションを「Copy」から始まるオプションに変更し、Prefer スイッチをオンにし、上下の 2 つのテキストボックスにそれぞれ絶対パスと相対パスを記入します。

• これで、画像を挿入すると、assets/images フォルダにコピーされ、![1](assets/images/1.webp)のように Markdown ファイルに書き込まれます。これにより、ウェブサイトは画像を正常に読み取ることができます。あなたは Ctrl+CV を押すだけで、他の操作は MarkText が自動的に処理します。

8. これで、MarkText を使用して Markdown 構文のブログ記事を書くことができるようになりました。

ローカルプレビュー、そして Github に公開します。#

1. あなたが記事を書き終えたと思ったら、効果を見たいですか？プロジェクトのルートディレクトリで：pnpm devを実行してください。少し待つと、ローカルでブログをプレビューできます。
   

2. よし！次に、Git を使用して行った変更を Github に公開する必要があります。

   • まず、Git にあなたが誰であるかを知らせる必要があります：git config --global user.name "あなたのGithubユーザー名" と git config --global user.email "あなたのGithubメール@example.com"。

   • 次に、リモートリポジトリを設定します：git remote add origin <リモートリポジトリのURL>。

   • その後、すべてのファイルをコミットします：git add .。

   • 次に、ローカルコミットを公開します：git commit -m "プロジェクトの初期化"。

   • 最後に、ローカルの変更をリモートリポジトリにプッシュします：git push。

3. この時点で、あなたの Github リポジトリには新しいコミットがあるはずです（😂また戻ってきました）。
   

Cloudflare を Github に接続し、Pages サービスを使用してブログを表示します（無料！）#

1. Cloudflare の Workers と Pages ページに移動し、新しい Pages を作成します。
   

2. 次に、Git リポジトリに接続し、Github を接続し、ビルドコマンドを設定します：pnpm build、次にビルド出力ディレクトリを設定します：dist、図のように。
   

3. カスタムドメインをバインドし、カスタムドメインにアクセスすることであなたのブログにアクセスできます！

4. その後、あなたはローカルで記事を書き、Git を使用して変更をリモートリポジトリにプッシュするだけで、Cloudflare が自動的にデプロイし、あなたのブログを更新します！