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是组织的最佳方式，您希望将news.html保留为原样，还是将其名称更改为index.html？在后者的情况下，有多个名为index的html文件是不是很糟糕？这也引起了SEO问题吗？

我目前的测试网站是根据Ex编制的。 2，这会导致问题，例如：如果用户在www.foobar.com/news/fizz.html，并且他们想要返回新闻页面，如果他们碰巧删除＆＃34; fizz.html＆＃34;从URL，它不起作用。

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

Answer 1

当我构建它时，没有最佳实践，这对您来说是最有意义的/最容易管理的。 “生根”一切都可能是目前最简单的方式。

说到你想要完成的事情通常被称为“路由”，即将资源解析为“漂亮”的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

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会更好。

要回答问题的后半部分，我会将news.html转换为ex中新闻目录下的index.html。 3，只是为了让事情更有条理。如果导航到没有索引文件的新闻目录，您很可能会获得禁止的消息或授予对该文件夹的访问权。

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

3 个答案: