Javascript 基于URL交换网站内容的最佳方法

我想创建一个javascript站点的多个版本，并试图找出最好的方法。我将有大约3个版本，具有相同的结构，但不同的文本和资产取决于URL

因此，如果人们访问www.mywebsite.com，会显示一个通用站点，但www.mywebsite.com/business会显示不同的内容和资产。我听说过模板站点，类似于Thymeleaf的东西是最好的方法吗

您可以使用templated.co等网站的预构建模板，为网站的每个子目录保存和使用这些文件，并在顶部添加代码

您可以使用内容管理系统，如wordpress

您可以构建自己的模板，基本上只是html/css/javascript文件，这些文件具有网站的基本布局，您可以在上面添加不同的内容

例如，在html文件中，可以包含此页面的模板样式和特定样式

<link rel="stylesheet" type="text/css" href="CSS/template.css"/>
<link rel="stylesheet" type="text/css" href="CSS/page1.css"/>

如果您谈论的是非常不同的Javascript模板框架，那么您可能会看到诸如mustache.js、angular.js和handlebar.js之类的工具

---

如果您只需要不同的css，您可以在加载站点时检查url，然后根据url下载必要的css

您可以使用

window.location

properites检查url。例如

pathname

property

然后使用一些代码下载合适的css。例如：

switch (window.location.pathname) {
   case: '/business'
     setCSS('business.css')
     break
   case: '/something'
     setCSS('something.css')
     break
   default:
     setCSS('default.css')
}

function setCSS(file){
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/' + file;
    head.appendChild(link);
}

还请注意，加载文档时应调用此代码。

---

如果您还需要依赖于url的图像或一些自定义文本，您可以使用相同的方法（检查window.location.pathname），但要为不同的变体运行一些特殊的脚本。

这更多是路由问题。但我猜你已经明白了。如果是这样，那么您可以在检查url后使用jquery追加css或任何资源