如何在JavaScript文件中訪問Hugo的模板變量？

我正在嘗試在Hugo中使用react.js。我知道Go模板變量可以在HTML文件中訪問。如何在JavaScript文件中訪問Hugo的模板變量？

我的問題是如何在JavaScript中訪問它們。或者是否有解決方法？

在此先感謝。

UPDATE：

目前我的解決方法是使用meta標籤HTML並加載轉到模板變量是這樣的：

<meta name="title" content={{.Title}} />

，然後在JavaScript中，

function getMetaTitle() { 
    var metas = document.getElementsByTagName('meta'); 

    for (i=0; i<metas.length; i++) { 
     if (metas[i].getAttribute("name") == "title") { 
     return metas[i].getAttribute("content"); 
     } 
    } 

    return "failed to access..."; 
} 
var metaTitle = getMetaTitle();

但這種方式當元標籤數量不斷增加時是不方便的，有沒有更簡潔的方法來做到這一點？

來源

2015-09-08 Gnimuc

我懷疑Hugo和React是不錯的一對，但這不是主題，我可能是錯的。你問，如何讓Hugo變量進入網站的JavaScript。我的回答：

Hugo是靜態網站引擎，所以它只會將模板和標記文檔（包含您的內容）轉換爲HTML文件。現在，當您將文件上傳到服務器上時，您的JS無法看到任何東西Hugo - 只有您的文件。

現在的問題是，如何將Hugo變量轉換爲您網站的文件。

如您所建議的，最好使用Hugo將變量寫入HTML（或JSON），然後通過JS讀取它們。如果數量不大，請使用屬性或標籤。如果有很多，並且每頁不會有所不同，請使用單獨的JSON文件。

例如，我個人擁有一個多語言網站，它需要不同的語言標題通過JS動態顯示; b）使用JS以JSON格式查詢不同的Lunr.js搜索索引。

對於這兩個我用data-<name>屬性：

<section class="section-search" data-index="{{ .Site.BaseURL }}searchIndex.json" id="section-search"> 
     <input type="search" id="search-input" placeholder="{{ (index $.Site.Data.translations $.Site.Params.locale).dataloading }}" data-loaded="{{ (index $.Site.Data.translations $.Site.Params.locale).dataloaded }}"> 
     <!-- search button goes here --> 
    </section>

例如，在英語模板（呈現爲/public/），data-loaded屬性是英文的，但立陶宛模板（呈現爲/public/lt/），data-loaded屬性會在立陶宛。

我不擔心「越來越多元標籤」，但你也許可以將變量寫入JSON文件，然後在JS中讀取它，如果你擔心HTML膨脹？

我正在構建自定義JSON作爲HTML，然後根據this配方爲Hugo Lunr搜索建立索引時將其縮小/重命名爲JSON。如上述配方中所描述的那樣，用range來代替「烘焙」內容，您可以簡單地列出所有變量。

順便說一句，我使用npm scripts作爲構建亞軍（而不是咕嚕聲/咕嘟咕嘟），所以我用json-minify：

"index:prepare": "json-minify public/json/index.html > public/site-index.json",

你可以「烤」 JSON文件的任何內容（包括Hugo模板變量）通過雨果這樣。希望能幫助到你。

來源

2016-06-03 15:23:46 revelt

非常有用，非常感謝！ – Gnimuc

當然，你可以在你的佈局文件中嵌入你的JS，但這可能不是你想要的。

在雨果討論網站上已經有一些關於這方面的改進的討論，但沒有具體的。

來源

2015-10-20 07:59:42 bep

您可以config.toml內指定的Javascript自定義輸出格式，使雨果然後把這些特定格式和文件擴展名，喜歡它的地方有足夠的值替換模板變量的內容文件。

因此，如下面的config.toml將把JavaScript文件，因爲它需要考慮它的自定義輸出格式的媒體類型的一個條目：

[mediaTypes] 
    [mediaTypes."application/javascript"] 
    suffix = "js"

你可以閱讀更多關於它here

來源

2017-10-16 09:10:45

如何在JavaScript文件中訪問Hugo的模板變量？

回答

相關問題