как получить доступ к переменным шаблона Хьюго в файле javascript?

Я пытаюсь использовать react.js в Hugo. Я знаю, что переменные шаблона Go доступны в файле HTML.

Мой вопрос в том, как получить к ним доступ в javascript. или есть обходной путь?

заранее спасибо.

ОБНОВИТЬ:

в настоящее время мой обходной путь заключается в использовании тегов meta в HTML и загрузке переменных шаблона Go следующим образом:

<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();

но этот способ неудобен, когда количество метатегов растет, есть ли более лаконичный способ сделать это?


hugo
person Gnimuc    schedule 08.09.2015    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Я сомневаюсь, что Hugo и React — хорошая пара, но это не по теме, и я могу ошибаться. Вы спрашиваете, как добавить переменные Hugo в JavaScript веб-сайта. Мой ответ:

Hugo — это статический движок веб-сайта, поэтому он только конвертирует шаблоны и документы разметки (с вашим контентом) в файлы HTML. Теперь, когда вы загружаете свои файлы на свой сервер, ваш JS ничего не видит Hugo — только ваши файлы.

Возникает вопрос, как перенести переменные Hugo в некоторые файлы вашего сайта.

Как вы предложили, лучше всего записывать переменные в свой HTML (или JSON) с помощью Hugo, а затем читать их с помощью JS. Если это небольшое количество, используйте атрибуты или теги. Если их много и они не отличаются для каждой страницы, используйте отдельный файл JSON.

Например, лично у меня есть многоязычный сайт, который а) требует динамического отображения названий на разных языках через JS; б) использует JS, который запрашивает различные поисковые индексы Lunr.js в формате JSON.

Для обоих я использую атрибуты 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, а затем минимизирую/переименовываю его в JSON при создании индексов для поиска Hugo Lunr в соответствии с этот рецепт. Вместо того, чтобы «запекать» содержимое с помощью range, как в упомянутом рецепте, вы можете просто перечислить все переменные.

Кстати, я использую npm scripts в качестве средства запуска сборки (вместо Grunt/Gulp), поэтому я использую json-минимизировать:

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

Вы можете «запечь» файлы JSON с любым содержимым (включая переменные шаблона Hugo) через Hugo таким образом. Надеюсь, поможет.

person revelt    schedule 03.06.2016

arrow_upward
0
arrow_downward

Вы можете, конечно, встроить свой JS в свои файлы макета, но это, вероятно, не то, что вам нужно.

Были некоторые обсуждения улучшений в этой области на дискуссионном сайте Hugo, но пока ничего конкретного.

person bep    schedule 20.10.2015

arrow_upward
0
arrow_downward

Вы можете указать собственный формат вывода для Javascript в вашем config.toml, чтобы Hugo затем обрабатывал эти конкретные форматы и расширения файлов как файлы содержимого, где он заменял переменные шаблона соответствующими значениями.

Таким образом, такая запись в вашем config.toml, как показано ниже, будет рассматривать файлы javascript как один из типов мультимедиа, которые необходимо учитывать для своих настраиваемых выходных форматов:

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

Подробнее об этом можно прочитать здесь

person Punit S    schedule 16.10.2017