如何將深層鏈接添加到HTML5 Up模板中？

Question

我使用下面的HTML5模板最多： https://html5up.net/lens

...我希望能夠從外部站點在幻燈片放映鏈接到特定的幻燈片。

如何將深度鏈接添加到模板？

Answer 1

您需要通過javascript切換幻燈片，這就是模板的構建方式。

首先，你有一個iframe的鏈接到https://html5up.net/uploads/demos/lens/ - 在那裏看代碼，你會發現圖書館main.js，宣佈main對象。

使用此main你可以切換幻燈片如下：

main.switchTo(number); 

其中number是幻燈片的數量。

現在，你需要的是在javascript中處理url參數並使用它們來調用它。爲此，請從How can I get query string values in 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的查詢字符串來觸發代碼。