ブログ大更新！#
もしあなたがこの記事をクリックしたのなら、ブログの変化をすでに見たことでしょう（QWQ）
動機#
ブログを更新する動機は比較的シンプルです。hexo の miracle テーマが更新を停止したため、さらに自分のフロントエンドの知識を練習したいと思い、ブログを改造することに決めました。
vue、valaxy、astro の間で迷っていましたが、vue は spa の SEO 最適化があまり良くないため、諦めました；valaxy のドキュメントはあまり整備されておらず、理解しにくかったので、最終的には astro を選びました。
过程#
明らかに、現在の私のフロントエンドの知識でゼロから書くのは不可能なので、hexo の journal テーマをテンプレートとして選び、それを astro に移行しました。
移行の過程では、astro-paper と Frosti の 2 つのテーマを参考にしてコードを書きましたが、最後にはクソ山を書いてしまったと感じています
概要#
ソースコードはすべて/srcディレクトリに置いてあります。
/publicディレクトリには 1 つの js ファイルしかなく、ウェブサイトの動的な動作を担当しています。これには以下が含まれます。
- 幅広モードでのトップに戻る機能
- 狭い画面モードでのドロワー機能の実装
- 狭い画面モードでのトップタイトルの表示
/page#
page ディレクトリは astro のルーティングディレクトリです。
post ディレクトリが含まれており、記事のルーティングを担当しています；archives はアーカイブを担当し、category は分類インターフェースを担当し、page はホームページの記事表示を担当し、index は/page/1と同じ機能を実現しています。
/style#
css ファイルを保存します。
layout#
各画面の具体的な実装を担当します。
その中で BaseLayout は全体の layout 実装です。
component#
再利用可能なコンポーネントで、将来のコメントもここに書く必要があります。
utils#
いくつかのツールコンポーネントです。
成果#
最終的な成果は、あなたの目の前にあるブログです。ただし、今のところまだ一部しか完成しておらず、まだ多くの詳細を更新する必要があります。
興味があれば、github.com/histcat/blogのソースコードを見てみてください。