HTMLファイルを適切に構造化する方法は？

Question

いくつかのページとサブページがある基本的な静的Webサイトの場合、HTMLページのディレクトリ構造のベストプラクティスについて少し混乱しています。

私がこのような簡単なウェブサイトを持っているとしましょう：
インデックス（ホームページ）ページ、概要、連絡先、ニュースページ。ニュースページには、ニュースページの2つのサブページfizz.htmlとbuzz.htmlへの2つのリンクがあります。

以下のように、すべてのHTMLページを同じルートディレクトリフォルダに置くのが最善ですか？

例1

/foobar.com /css /js index.html about.html contact.html news.html fizz.html buzz.html

または、このようにすべてのサブページを別のディレクトリフォルダに置くのが最善ですか？

例2

/foobar.com /css /js index.html about.html contact.html news.html /news fizz.html buzz.html

または、このように独自のフォルダにすべてサブページを含むページを作成するのが最善ですか？

例3

/foobar.com /css /js index.html about.html contact.html /news news.html (maybe named index.html?) fizz.html buzz.html

例のメソッドの場合。 3は整理するのに最適な方法ですが、news.htmlをそのままにするか、名前をindex.htmlに変更しますか？後者の場合、indexという名前の複数のhtmlファイルがあるのは悪いことですか？これによって引き起こされるSEOの問題もありますか？

私は現在、例に従って構造化されたテストWebサイトを持っています。 2、これは問題を引き起こします。たとえば、ユーザーがwww.foobar.com/news/fizz.htmlにいて、ニュースページに戻りたい場合、たまたま「fizz.html」を消去した場合URL、動作しません。

だから私は例を推測しています。 3はウェブサイトを構築する正しい方法ですか？私はここで少し混乱しています。

marblewraith · Answer

構造化に関しては、ベストプラクティスはありません。これは、あなたにとって意味のあることであり、管理が最も簡単です。現時点では、すべてを「root化」するのがおそらく最も簡単な方法です。

あなたが達成しようとしていることは、一般的に「ルーティング」として知られています。つまり、リソースを「きれいな」URLに解決します。ほとんどのサーバーサイドフレームワークはデフォルトでこれを実現できますが、静的なものを作成しているため、同様のことを実現する唯一の方法は次のとおりです。

.htaccessファイルを微調整します
javascriptフレームワークに依存する

Angularにはアドオンとしてルーティングがありますが、もっと軽量なものが必要な場合は、reactJSを検討できます（デモとして）：

https://enome.github.io/javascript/2014/05/09/lets-create-our-own-router-component-with-react-js.html

または次のいずれか（ミスリルは別の良い選択です）：

http://microjs.com/#routing

g1ji · Answer

コンテンツを追跡できるように、階層ディレクトリでコンテンツを管理する必要があります。開発者のほとんどは、このようなコンテンツを管理しています。

/foobar.com /css /js /images /html /news /news_content fizz.html buzz.html news.html about.html contact.html index.html

Skape · Answer

あなたのウェブサイトの単純さのために、私は例と言うでしょう。 1はあなたのために働くでしょう。より複雑でより多くのページを追加し始める場合、例のような配置。 3が良いでしょう。

あなたの質問の後半に答えるために、私は例のニュースディレクトリの下でnews.htmlをindex.htmlに変えます。 3、物事をより整理するためだけに。インデックスファイルなしでニュースディレクトリに移動すると、禁止されたメッセージが表示されるか、そのフォルダへのアクセスが許可される可能性があります。