寒武

一、前言#

博主は ==MixSpace== と ==Shiro== をいじっているが、このオープンソースのブログシステムは非常に強力で、モダンなインターフェースと快適な配色が気に入っている。ただし、欠点もある。例えば、HTMLコードを直接レンダリングすることができないという点は、Typechoでは実現できる。

::: grid {cols=2}

:::

以前、Typecho サイトをいじる際に、==@林木木 ==-->Hi，Memosや==Leonus==-->基于Memos实现说说和清单功能。のチュートリアルを参考にして、Memos を使用してしゃべるページを構築し、API インターフェースを使用して単一ページのしゃべる機能を実現しました。しかし、Mixspace システムでは HTML を直接レンダリングすることができないため、このサイトでは私のメモを使用することができませんでした😭😭😭システムのネイティブな思考ページに比べて、私は機能が強力な Memos の方が好きです。

現在、私は 2 つのサイトを並行して更新する予定です。内容は同じです。Typecho サイトはルートドメインで、Shiro サイトは www ドメインです。おそらく近い将来、Typecho サイトを停止するかもしれません。ただ、2 ヶ月前に完成させたばかりの Typecho サイト がちょっと残念です。|| 私は怠け者です🤣||

二、Shiro のカスタマイズ#

さて、本題に入りましょう。今回、博主がカスタマイズした内容は以下の通りです。

1. ++ 全体のフォントを鴻蒙フォントに変更 ++
2. ++ ブログのキーワードを置換 ++
3. ++ 左上の博主がカスタマイズ中 ++

1. 全体のフォントを鴻蒙フォントに変更#

フォントの変更は少し困難でした。以前は Shiro のプロジェクト構造を全く理解していなかったため、プロジェクトをクローンして VScode でキーワードを検索して、プロジェクトに元々付属していた CDN フォントファイルを見つけました。その後、インターネットで適当な鴻蒙フォントの CDN を見つけて、元の参照ファイルを変更するだけでした。

フォントファイルのパス：Shiro-main\src\styles\webfont.css
本文のフォントの変更パス：Shiro-main\tailwind.config.ts

::: grid {cols=2}

:::

2. ブログのキーワードを置換#

ここでは詳細は省略しますが、プロジェクトフォルダ内でキーワードを検索し、自分の好きな文章に置き換えます。

3. 左上の博主がカスタマイズ中#

この機能は非常に面白いです。これはこのブログシステムで私が最も魅力を感じる点であり、WebSocketを使用してサイト上の博主の活動をリアルタイムに同期することができます。公式ウェブサイトでは次のように説明されています。

面白いですね。さらに、Mixspace エコシステムのいくつかのソフトウェアを使用すると、権限を持つ人々のコンピュータのリアルタイムの活動をサイト上で公開することができます。ここで ==@天翔== さんの貢献に感謝します。

この機能により、ネット上の見知らぬ人の博主のイメージが一気に鮮明になります。例えば、博主がグループチャットで話している最中、博主が VSCODE を使っている最中などです。

::: grid {cols=3}

:::
この機能は、プロジェクトリポジトリのreporter-assetsフォルダに依存しています。このフォルダは **@Innei** さんの別のリポジトリにマッピングされています。

博主がカスタマイズ中の中の記事内容やソフトウェアを変更する場合は、まずリポジトリを Fork し、自分の Fork した Shiro プロジェクトに以下のパスの参照リンクを置き換える必要があります。その後、プロジェクトフォルダに移動して関連するテキストやソフトウェアアイコンを変更するだけです。詳細はここでは詳しく説明しません。

::: grid {cols=2}

:::

三、結語#

今日は Shiro のカスタマイズについて説明しましたが、まだまだ知らないことがたくさんあります。助けてくれた皆さんに感謝します。

この記事は Mix Space から xLog に同期されました。
元のリンクは https://www.xiaozhengyang.com/posts/life/Shiro です。