如何正确构建我的HTML文件？

Question

对于一个基本的静态网站，有几个页面和子页面，我对HTML页面的目录结构最佳实践感到困惑。

假设我有一个像这样的简单网站：
一个主页(index)，关于我们(about)，联系我们(contact)和新闻(news)页面。在新闻页面上，有两个链接指向新闻页面的两个子页面，fizz.html和buzz.html

是否最好将所有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

如果Ex.3中的方法是最佳组织方式，你想将news.html保留原样，还是更改为index.html？如果选择后者，拥有多个命名为index的HTML文件是否会造成问题？这样做是否会引起任何SEO问题？

目前我的测试网站按照Ex.2的结构进行组织，这会带来一个问题，例如：如果用户在www.foobar.com/news/fizz.html页面，并且想返回新闻页面，如果他们不小心从URL中删除"fizz.html"，则无法返回。

所以我猜Ex.3是正确的网站结构方式？这让我有点困惑。

- MetalEscape

Answer 1

你应该将内容管理在分层目录中，以便跟踪内容。大多数开发者都是这样管理他们的内容的。

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

- g1ji

Answer 2

在结构方面，没有最佳实践，只要符合您的逻辑/易于管理即可。目前最简单的方法可能是将所有内容都“rooting”。

话虽如此，您想要实现的通用目标称为“路由”，即将资源解析为“漂亮”的URL。大多数服务器端框架默认情况下都可以完成此操作，但由于您正在编写静态内容，因此实现类似功能的唯一方法是：

1. 调整您的.htaccess文件
2. 依赖于JavaScript框架

Angular具有路由附加组件，但如果您想要更轻量级的东西，可以考虑ReactJS（如演示所示）：

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

或任何以下内容（mithril也是另一个不错的选择）：

http://microjs.com/#routing

- marblewraith

---

谢谢！我一直想尝试一下 .htaccess 的玩法。最终，我会尝试使用 Angular 或 ReactJS。 - MetalEscape

Answer 3

为了使您的网站更简单，我建议您选择示例1。但如果您在添加更多复杂性和页面时，像示例3这样的排列方式会更好。

回答您问题的后半部分，在示例3中，我会将news.html转换为位于news目录下的index.html，以使事物更加有组织。如果您没有索引文件地导航至news目录，您很可能会收到禁止访问的消息或允许访问该文件夹。

- Skape