HUGO on kenji.blog

Список команд Hugo

Fri, 31 May 2024 01:36:00 +0900

Что такое Hugo

Hugo — это генератор статических сайтов. Он позволяет создавать веб-сайты, преобразуя файлы Markdown в HTML. Hugo написан на языке Go и работает очень быстро.

Этот блог также создан с помощью Hugo.

Установка CLI Hugo

Чтобы установить CLI Hugo, выполните следующую команду.

※ Это пример для macOS. Для других ОС, пожалуйста, обратитесь к официальной документации.

1

brew install hugo

Вы можете установить его с помощью Homebrew.

Список команд Hugo

Hugo предлагает различные команды. Ниже приведены наиболее часто используемые команды.

Создать новый сайт

1

hugo new site <Имя сайта>

Команда для создания нового сайта. Вместо <Имя сайта> укажите название вашего сайта.

Создать новую статью

1

hugo new <Имя статьи>.md

Команда для создания новой статьи. Вместо <Имя статьи> укажите название вашей статьи.

Запустить сервер

1

hugo server

Команда для запуска локального сервера. Вы можете получить к нему доступ по адресу http://localhost:1313.

Сборка сайта

1

hugo

Команда для сборки сайта. HTML-файлы будут сгенерированы в директории public.

Развертывание

1

hugo deploy

Команда для развертывания сайта. Настройки развертывания выполняются в файле config.toml.

Показать список статей

1

hugo list all

Команда для отображения списка статей.

Проверка конфигурации

1

hugo config

Команда для проверки конфигурации.

Показать справку

1

hugo help

Команда для отображения справки.

Показать версию

1

hugo version

Команда для отображения версии.

На этом список команд Hugo завершен. Существует множество других команд, поэтому, пожалуйста, обратитесь к официальной документации.

Ссылки

Официальная документация Hugo

Как получить и разместить рейтинг популярных страниц из Google Analytics

Mon, 10 Apr 2023 20:26:57 +0900

Введение

Используя сервис под названием Ranklet , вы можете легко получить и разместить рейтинг популярных страниц из Google Analytics.

В этой статье я расскажу, как разместить его в блоге HUGO.

Пример работы

Подготовка

Google Analytics должен быть настроен на сайте

Шаги

Перейдите в Ranklet
Нажмите Sign in with Google , чтобы войти с помощью учетной записи Google (должна быть привязана к учетной записи Google Analytics)

Нажмите Разрешить

Настройте основную информацию

Я настроил, как показано выше.

В Google Analytics View выберите представление, для которого вы хотите получить рейтинг.

Настройте замену текста

Я настроил, как показано выше. Это настроено для удаления | kenji.blog из заголовка страницы.

Настройте шаблон

HTML (числа рейтинга скрыты)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<div class="ranklet ranklet-reset">
 <table class="ranklet-table">
 <tbody class="ranklet-pages">
 {{#context.pages}}
 <tr class="ranklet-page">
 <td class="ranklet-image">
 {{#image}}
 <a href="{{url}}" class="ranklet-link">
 <img class="ranklet-img" src="{{image}}" />
 </a>
 {{/image}}
 </td>
 <td class="ranklet-meta">
 <div class="ranklet-title">
 <a href="{{url}}" class="ranklet-link">
 {{title}}
 </a>
 </div>
 {{#description}}
 <div class="ranklet-description">
 <a href="{{url}}" class="ranklet-link">
 {{description}}
 </a>
 </div>
 {{/description}}
 </td>
 </tr>
 {{/context.pages}}
 </tbody>
 </table>
</div>

CSS (изменен размер шрифта, описание будет отображаться в 3 строки)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


#ranklet-{{context.id}} {
 .ranklet-reset { // リセット
 table, tr, td, div, span {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 line-height: 1;
 box-sizing: border-box;
 }
 }

 .ranklet-table {
 border-collapse: separate;
 border-spacing: 8px 24px;
 width: 100%;
 word-break: break-all;

 td {
 vertical-align: middle;
 }

 .ranklet-rank {
 text-align: center;
 font-size: 120%;
 }

 .ranklet-image {
 text-align: center;
 img {
 max-width: 128px;
 max-height: 128px;
 }
 }

 .ranklet-meta {
 .ranklet-title {
 font-size: 20px;
 line-height: 125%;
 }

 .ranklet-description {
 font-size: 16px;
 margin-top: 8px;
 line-height: 125%;
 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3; /* 行数 */
 }
 }
 }
}

JavaScript без изменений

Скопируйте HTML из публикации на сайте

Скопируйте отображаемый HTML

Вставьте в шаблон HUGO

Создайте layouts/partials/ranklet.html и вставьте скопированный HTML

1

<div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>

Вставьте приведенный ниже код в строку перед </footer> в layouts/_default/single.html

1

{{- partial "ranklet.html" . }}

На этом все. Рейтинг будет отображаться в нижней части этой страницы, как показано ниже.

Как включить KaTeX (отображение формул в стиле LaTeX) в hugo

Fri, 31 Mar 2023 23:11:26 +0900

Что такое KaTeX?

KaTeX — это JavaScript-библиотека для отображения математических формул в стиле LaTeX в HTML.

В частности, вы можете отображать формулы, подобные этой:

$$f(x) = x^2 + x + 41$$

Существуют и другие библиотеки для отображения формул в стиле LaTeX, но KaTeX славится своей простотой и скоростью.

Как внедрить в hugo

Создайте новый файл layouts/partials/math.html в структуре папок hugo.

Содержимое должно быть следующим:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
 renderMathInElement(
 document.body,
 {
 delimiters: [
 {left: "$$", right: "$$", display: true},
 {left: "\\[", right: "\\]", display: true},
 {left: "$", right: "$", display: false},
 {left: "\\(", right: "\\)", display: false}
 ]
 });
 });
</script>

Затем добавьте следующий код в существующий файл layouts/partials/extend_head.html.

1
2
3


{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

Теперь вы готовы использовать KaTeX.

Добавив math: true в front matter вашей страницы, вы сможете активировать KaTeX.

Все, что вам нужно сделать, это написать формулы в стиле LaTeX в теле вашей статьи.

1

$$ e^{i \pi} = -1 $$

При написании, как показано выше, это будет отображаться следующим образом:

$$ e^{i \pi} = -1 $$

Ссылки

Использование HTML-тегов в HUGO

Tue, 17 Jan 2023 19:20:32 +0900

По умолчанию в HUGO запрещено использование HTML-тегов в статьях, но если добавить следующий код в config.toml, это станет возможным.

1
2


[markup.goldmark.renderer]
 unsafe = true

Ссылка: Configure Markup

Шорткоды, которые можно использовать в HUGO

Sun, 11 Sep 2022 22:59:52 +0900

Шорткоды, которые можно использовать в HUGO

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

Прочее

Shortcodes

Примечание

Если вы хотите отобразить {{< foo >}} на сайте, вам нужно написать это как {{</* foo */>}}.

Изменение расположения изображений в PaperMod

Sun, 11 Sep 2022 18:50:40 +0900

В макете по умолчанию изображение располагается по центру с шириной 100%, но иногда мне казалось, что оно слишком большое, поэтому я решил обтекать изображение под заголовком и изменить ширину примерно до 150px.

Места изменения файлов следующие.

blank.css

Чтобы изменить поля, размер изображения и строки отображения текста, добавьте следующее описание в blank.css.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

Поскольку определение не удалось удалить на стороне blank.css, удалите следующую строку в post-entry.css.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← удалить эту строку
 height: auto;
}

list.html

Чтобы изменить расположение изображения, я изменил следующие части list.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- переместить вниз -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- переместить вниз -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- добавить -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- добавить -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- переместить сверху -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- переместить сверху -->
 </div><!-- добавить -->
 <div style="width:100%;"><!-- добавить -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- добавить -->
 </div><!-- добавить -->
</article>

Похожих запросов, кажется, немало.

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

Было бы здорово, если бы оригинальные разработчики тоже это поддержали.

Как настроить Twitter Card в PaperMod

Sat, 10 Sep 2022 18:41:22 +0900

Введение

Тема PaperMod поддерживает Twitter Card. Однако настройки Twitter Card должны быть прописаны в config.toml или в заголовке *.md каждой статьи. Если они заданы как в каждой статье, так и в config.toml, приоритет будет иметь заголовок каждой статьи.

Способ настройки

config.toml

В config.toml добавьте элемент с именем images в разделе [params]. В images укажите путь к изображению, которое будет отображаться в Twitter Card. Если вы размещаете изображение в папке static, достаточно указать только имя файла.

1
2


[params]
 images = ["twitter_card.jpg"]

Структура папок

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (писать здесь)
├─content
│ └─posts
│ └─папка статьи
│ │ index.md (писать здесь)
│ └─images
│ cover.png (поместить здесь)
└─static
 twitter_card.jpg (поместить здесь)

Информация в заголовке каждой статьи

В информацию в заголовке каждой статьи добавьте элемент с именем image в разделе cover. Если установить relative в true, можно указать относительный путь от *.md статьи.

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

Если вы не хотите отображать её в верхней части статьи

Если вы не хотите отображать обложку в верхней части статьи, добавьте элемент с именем hidden в разделе cover и установите его в true.

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

О размере изображения

Согласно текущей спецификации PaperMod, размер Twitter Card, по-видимому, поддерживает только summary_large_image. Подходящий размер (разрешение) для summary_large_image варьируется, но кажется, что около 800 x 418 (соотношение сторон 1.91:1) является оптимальным.

Справочный сайт 1 Справочный сайт 2

Если возможно, мы рекомендуем изменить размер изображения перед публикацией.

Как проверить настройки

Чтобы проверить настройки Twitter Card, используйте Twitter Card Validator. Однако в моей среде предварительный просмотр отображался некорректно, поэтому, если предварительный просмотр не отображается, мы рекомендуем проверить его один раз перед публикацией, используя закрытый аккаунт и т. д.

Изменение цветовой схемы PaperMod

Wed, 07 Sep 2022 15:30:21 +0900

Я изменил цветовую схему темы PaperMod. Способ изменения описан ниже.

https://github.com/adityatelange/hugo-PaperMod/discussions/645

Путь к CSS следующий:

themes/PaperMod/assets/css/extended/blank.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


:root {
 --entry: #fbf7ef;
 --primary: rgba(113, 103, 91, 1.00);
 --secondary: rgba(113, 103, 91, 0.95);
 --tertiary: rgba(113, 103, 91, 0.50);
 --content: rgba(113, 103, 91, 0.85);
 --hljs-bg: #34231B;
 --code-bg: #ebe4d7;
 --border: #fdfaf5;
 --theme: #fbf7ef;
}
.dark {
}

Темная тема пока без изменений.

【HUGO】Предварительный просмотр в локальной среде

Mon, 05 Sep 2022 12:28:01 +0900

Установка HUGO

Скачивание

Скачать HUGO

С указанного выше сайта скачайте и распакуйте модуль для Windows, соответствующий вашей среде. В моем случае я скачал “hugo_0.102.3_Windows-64bit.zip”.

Распаковка

Распакуйте скачанный zip-архив и скопируйте находящийся в нем hugo.exe в созданную вами папку, например C:\bin.

Регистрация в переменных среды

Зарегистрируйте в переменных среды, чтобы запускать hugo.exe из любого места. Это действия для Windows 11, но я думаю, что вы можете зарегистрировать его, выполнив следующие шаги.

Нажмите кнопку Win+Pause, чтобы открыть сведения о системе.
Нажмите Дополнительные параметры системы.
Нажмите Переменные среды.
Выберите Path и нажмите Изменить.
Нажмите Создать, введите “C:\bin” в новой строке и нажмите ОК, чтобы закрыть диалоговое окно.

Предварительный просмотр блога

Перейдите в папку блога HUGO в командной строке и выполните следующую команду.

hugo server -D

Результат выполнения ниже. (-D — это параметр для отображения черновых статей.)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


C:\Users\win11\IdeaProjects\kenji.blog>hugo server -D
Start building sites …
hugo v0.102.3-b76146b129d7caa52417f8e914fc5b9271bf56fc windows/amd64 BuildDate=2022-09-01T10:16:19Z VendorInfo=gohugoio

 | JA
-------------------+-----
 Pages | 39
 Paginator pages | 0
 Non-page files | 7
 Static files | 0
 Processed images | 0
 Aliases | 13
 Sitemaps | 1
 Cleaned | 0

Built in 161 ms
Watching for changes in C:\Users\win11\IdeaProjects\kenji.blog\{archetypes,content,themes}
Watching for config changes in C:\Users\win11\IdeaProjects\kenji.blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Адрес выводится во время выполнения (в примере выше http://localhost:1313/), поэтому скопируйте адрес в свой браузер. Предварительный просмотр автоматически обновляется при каждом сохранении файла. Чтобы завершить предварительный просмотр, введите Ctrl+C в командной строке.