Реализация «Rich CSS Tooltip» в Hugo
Мигрировал блог с Pelican на Hugo, в надежде, что теперь писать посты буду чаще. В надежде!
В процессе миграции не удержался, и прикрутил всплывающие CSS подсказки
ПримерТекст может содержать теги со стилями. И даже изображения:
с HTML содержимым. Опять же, в надежде, что они мне пригодятся. Но удовольствие от процесса я уже получил, поэтому опишу как я это сделал.
html-hint
Всё просто, я импортировал библиотеку html-hint в свой scss
сборник. Примерно вот таким вот способом (строка 1):
|
|
Затем немного подправил отображение подсказки (3-50).
В репозитории не было собранных минифицированных файлов, поэтому пришлось подключить к сборке сайта nodejs. Перед сборкой нужно запустить:
> npm install --save html-hint
Hugo shortcode
Создаём новый файл layouts/shortcodes/tooltip.html
, который будет содержать разметку для наших подсказок:
<span class="hint--html hint--bottom">
<span class="hint__element">{{- .Get "element" | safeHTML }}</span>
<span class="hint__content">
{{ with .Get "title" }}<span class="hint__title">{{- . -}}</span>{{ end }}
{{- .Inner | safeHTML -}}
</span>
</span>{{- "" -}}
Вставка подсказки в текст публикаций
Вставляем нашу подсказку в публикацию с помощью следующей конструкции:
{{< tooltip element="элемент с подсказкой" title="Заголовок в подсказке" >}}
Текст <b>в подсказке</b> с использованием <i style="color:red">HTML тегов</i>.
{{< /tooltip >}}
Результат:
элемент с подсказкой Заголовок в подсказке Текст в подсказке с использованием HTML тегов.При наведении отобразится подсказка с HTML содержимым.