如何將深層鏈接添加到 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 來觸發該代碼。