如何正确构建我的 HTML 文件

Question

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

假设我有一个简单的网站，如下所示：
索引（主页）页、关于、联系人和新闻页。在新闻页面上，有两个指向新闻页面的两个子页面的链接，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 中的方法最好是组织方式，您是想按原样保留新闻.html还是将其名称更改为 index.html？ 在后者的情况下，有多个名为 index 的 html 文件不好吗？这是否也会导致任何SEO问题？

我目前根据 Ex. 2 构建了我的测试网站，这会导致一个问题，例如：如果用户在 www.foobar.com/news/fizz.html，并且他们想返回新闻页面，如果他们碰巧从 URL 中删除"fizz.html"，它不起作用。

所以我猜Ex.3是构建网站的正确方法吗？ 我在这里有点困惑。

Answer 1

当我谈到结构时，没有最佳实践，它对你有意义/最容易管理。"生根"一切可能是目前最简单的方法。

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

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

Angular将路由作为插件，但是如果您想要更轻量级的东西，则可以考虑reactJS（作为demo'd）：

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

或以下任何一种（秘银将是另一个不错的选择）：

http://microjs.com/#routing

Answer 2

您应该

在分层目录中管理您的内容，以便您可以跟踪您的内容。大多数开发人员都像这样管理那里的内容。

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

Answer 3

为了您网站的简单性，我会说Ex.1会适合您。如果您开始添加更多复杂性和更多页面，像 Ex. 3 这样的安排会更好。

为了回答你问题的后半部分，我会把新闻.html变成索引.html在例3的新闻目录下，只是为了让事情更有条理。如果您导航到没有索引文件的新闻目录，您很可能会收到禁止的消息或授予对该文件夹的访问权限。