ReactIndex - フォルダindexページをより実用的にする
目次
Reactの学習と家庭のニーズ
仕事でReactに触れる必要があり、関連製品に正式に触れる前に基礎を理解するためです。標準的なチュートリアルの例以外に、少し物足りない感じがしていました。 ちょうど、妻が最近私に任務を与えました：
- 息子の学習資料を整理する必要があり、同時に彼が復習しやすいようにすること。
- 復習するときは迅速に閲覧でき、答えはすぐそばにある方が良く、反復記憶に便利であること。
要求分析と洗練
リーダーの要求に対応して、私はすぐに考えました
大まかな計画
- Web方式の学習資料閲覧は、可用性を最大限に高めます。自前のサーバーさえあれば、子供はいつでもどこでも空き時間を利用して閲覧できます。
- 答えの切り替え - 簡単、Javascriptで簡単な画像切り替えを行うだけです。
- ほとんどの画像リンクはpythonを使用してhtmlページを自動生成します。
さっそく着手しましたが、予備的な計画の試行でいくつかの問題が明らかになりました
- 画像切り替えのJavaScriptは簡単ですが、python自動化を使用しても静的ページの生成には依然として手動実行が必要です。ファイルのメンテナンスは画像ファイル自体だけではありません。
- ページを開くには依然としてDirectory indexから入る必要があり、多数のフォルダの場合、ある程度の分類機能が必要です。
実装方針の変更
- Directory indexの形式は固定されているため。ajaxで取得した後、さらに処理できます。動的ページを生成し、フォルダ内のコンテンツファイルのみをメンテナンスすればよいです。
- reactを使用して構築し、コンテンツ分類機能を追加します。
React indexの原型
Ant designを使用して簡素なDirectory indexを置き換え
フォルダ名に基づく二次分類機能の追加
フォルダコンテンツタイプ設定を追加してMarkdownテキストページを追加（予備的試行）
学習資料復習ページの追加 - Ant designコンポーネントを使用するとスタイリッシュに見える
あまり必要ではないが - オンラインiconfontに基づくカテゴリアイコンカスタマイズ機能を追加
今後の計画
React Indexの設計自体は、家族メンバーが簡単に閲覧するための家庭内ウェブサイトです。 フォルダとファイルの組織管理を理解する限り、母親も子供も簡単にコンテンツを追加できます。 したがって、現在の家庭使用におけるいくつかのニーズに基づいて、いくつかの将来の意図があります：
- （PDFをダウンロードせずに）PDFプレビューを追加（これにはまだ技術的な調査が必要です。実現可能なjsライブラリがあるようです）。
- マルチドメインサポートと切り替え、複数の設定を可能にする（おそらくあまり必要ないかもしれません）。
- 機能ページを動的に読み込み可能にできるかどうか確認し、拡張を容易にします。
- リーダーのニーズ次第…