1

有什么方法可以在链接中使用动态相对路径，而不是在 Wintersmith 模板中使用根相对路径？

我不能使用根真实链接，例如src="/scripts/main.js"因为预览构建服务器将网站嵌套在任意深度的子文件夹中，例如

/stage/workspace/build/scripts/main.js
/stage/workspace/build/index.html
/stage/workspace/build/about/index.html

在生产服务器上，所有内容都将位于根 url 下，因此根相对链接在那里可以正常工作，但我也希望在我们的暂存预览服务器上可以查看构建。如何在我的玉模板上设置链接，以便它始终使用相对链接，例如脚本链接是： ../scripts/main.js来自关于我们的页面，而它scripts/main.js来自主页。我想让两个页面都使用相同的翡翠模板，并且该模板确定了每个页面的相对链接应该是什么。

是否有某种获取相对路径函数可以在 Jade 模板中使用，基于 Wintersmith 中树中内容的位置？

4

2 回答 2

1

我使用特殊的后处理构建步骤遍历所有生成的 HTML文件并将其中包含的链接转换为其相关变体。

此方法适用于任何模板语言（例如nunjucks），因为它不会修改模板，而是修改最终的可交付成果。

它不适用于 Wintersmith 的实时预览服务器。

我使用Cheerio HTML 解析器。

核心功能是这样的： 

var cheerio = require("cheerio");
var fs = require("fs");
$ = cheerio.load(fs.readFileSync(expandFileName("build/test.html"), 'utf-8'));

// change all links in the cheerio document from absolute to relative.
// document's absolute location is supposed to be /test/test.html
rebaseDocument("/test/test.html", $);

fs.writeFileSync(expandFileName("build/test.new.html"), $.html());
return;

function rebaseDocument(documentLocation, $) {
  debugLog(documentLocation);
  rebaseElements(documentLocation, $, "a", "href");
  rebaseElements(documentLocation, $, "link", "href");
  rebaseElements(documentLocation, $, "script", "src");
  rebaseElements(documentLocation, $, "img", "src");
}

function rebaseElements(documentLocation, $, tagName, attributeName) {
  $(tagName).each(function() { $(this).attr(attributeName, rebaseLink(documentLocation, $(this).attr(attributeName))); });
}

function rebaseLink(documentLocation, link) {
  if (link == null)
    return link;

  // check if link denotes absolute hyperlink. If so, nothing to do here
  // absolute hyperlink is either scheme:// or protocol relative url //
  if ((new RegExp('^([a-z]+://|//)')).test(link))
    return link;

  // check another special forms of absolute hyperlinks
  if (link.substring(0, 7) == "mailto:")
    return link;

  // if link is already relative, nothing to do
  if (link.charAt(0) != '/')
    return link;

  if (documentLocation.charAt(0) != '/')
    documentLocation = '/' + documentLocation;

  var path = require("path");
  var documentName = path.basename(documentLocation);
  var from = path.dirname(documentLocation);
  var newLink = path.relative(from, link).replaceAll("\\", "/");

  // reduce 'document.htm#anchor' to '#anchor'
  if (newLink.slice(0, documentName.length + 1) == documentName + '#')
    newLink = newLink.slice(documentName.length);

  return newLink;
}
于 2014-01-18T09:21:00.647 回答
0

我一直在使用的一种解决方案是使用不同的配置进行构建：

所以不要使用默认的“config.json”，它会弄乱你的构建设置一个专门用于构建的配置，例如：“config.build.json”设置你的url，你希望它们如何设置，当你'完成，只需运行：

wintersmith build -c config.build.json

（同样，这可能是众多解决方案之一，我也在不断寻找更好的部署解决方案）

于 2013-09-22T19:13:43.487 回答