ブログ大更新！#
もしあなたがこの記事をクリックしたなら、ブログの変化をすでに見たことでしょう（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のソースコードを見てみてください。