Question

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

因此，如果有人访问www.mywebsite.com，则会显示一个通用网站，但www.mywebsite.com/business会显示不同的内容和资产。我听说过模板网站，像Thymeleaf这样的最好的方法吗？

Answer 1

您可以使用来自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和handlebars.js这样的工具

Answer 2

如果你只需要不同的css，你可以在网站加载时检查网址，然后根据网址下载必要的CSS。

您可以使用window.location个问题检查网址。例如pathname属性。

然后使用一些代码下载合适的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交换网站内容的最佳方式

2 个答案: