如何将深层链接添加到 HTML5 Up 模板中？

Question

我正在使用以下 HTML5 Up 模板： https : //html5up.net/lens

...我希望能够从外部站点链接到幻灯片放映中的特定幻灯片。

如何向模板添加深层链接？

Answer 1

您需要通过javascript切换幻灯片，这就是模板的构建方式。

首先，您拥有的链接有一个指向https://html5up.net/uploads/demos/lens/的 iframe - 查看那里的代码，您将找到声明main对象的库main.js。

使用此main您可以按如下方式切换幻灯片：

main.switchTo(number);

其中 number 是幻灯片的编号。

现在，您需要在 javascript 中处理 url 参数并使用它们来调用它。 为此，请从如何在 JavaScript 中获取查询字符串值中获取代码？ 并在页面加载后立即运行它。

它看起来像这样：

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

$(document).ready(function(){
   var slideNumber = getParameterByName('slideNumber');
   if(slideNumber !== null)
   {
       main.switchTo(parseInt(slideNumber, 10));
   }
});

然后您应该能够通过将?slideNumber=1形式的查询字符串添加到 url 来触发该代码。