HUGO on kenji.blog

Hugo Befehlsliste

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

Was ist Hugo

Hugo ist ein Generator für statische Websites. Sie können eine Website erstellen, indem Sie Markdown-Dateien in HTML konvertieren. Hugo ist in der Sprache Go geschrieben und arbeitet sehr schnell.

Dieser Blog wurde ebenfalls mit Hugo erstellt.

Installation der Hugo CLI

Um die Hugo CLI zu installieren, führen Sie den folgenden Befehl aus.

※ Dies ist ein Beispiel für macOS. Für andere Betriebssysteme konsultieren Sie bitte die offizielle Dokumentation.

1

brew install hugo

Sie können es mit Homebrew installieren.

Hugo Befehlsliste

Hugo bietet verschiedene Befehle. Im Folgenden sind die am häufigsten verwendeten Befehle zusammengefasst.

Eine neue Website erstellen

1

hugo new site <site-name>

Befehl zum Erstellen einer neuen Website. Geben Sie unter <site-name> den Namen der Website an.

Einen neuen Artikel erstellen

1

hugo new <artikelname>.md

Befehl zum Erstellen eines neuen Artikels. Geben Sie unter <artikelname> den Namen des Artikels an.

Den Server starten

1

hugo server

Befehl zum Starten des lokalen Servers. Erreichbar unter http://localhost:1313.

Erstellen (Build)

1

hugo

Befehl zum Erstellen (Builden) der Website. HTML-Dateien werden im Verzeichnis public generiert.

Bereitstellen (Deploy)

1

hugo deploy

Befehl zur Bereitstellung der Website. Die Einstellungen für das Bereitstellungsziel werden in der Datei config.toml vorgenommen.

Artikelliste anzeigen

1

hugo list all

Befehl zum Anzeigen der Artikelliste.

Konfiguration überprüfen

1

hugo config

Befehl zur Überprüfung der Konfiguration.

Hilfe anzeigen

1

hugo help

Befehl zur Anzeige der Hilfe.

Version anzeigen

1

hugo version

Befehl zur Anzeige der Version.

Dies ist die Liste der Hugo-Befehle. Da es viele weitere Befehle gibt, konsultieren Sie bitte die offizielle Dokumentation.

Referenz

Offizielle Hugo Dokumentation

Wie man das Ranking beliebter Seiten aus Google Analytics abruft und einbindet

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

Einleitung

Mit dem Dienst Ranklet können Sie ganz einfach ein Ranking beliebter Seiten aus Google Analytics abrufen und auf Ihrer Website einbinden.

In diesem Artikel zeige ich Ihnen, wie Sie dieses Ranking in einem HUGO-Blog einbinden.

Vorschau

Vorbereitung

Auf Ihrer Website muss Google Analytics eingerichtet sein.

Schritte

Rufen Sie Ranklet auf.
Klicken Sie auf Sign in with Google und melden Sie sich mit Ihrem Google-Konto an (dieses muss mit Ihrem Google Analytics-Konto verknüpft sein).

Klicken Sie auf Zulassen (許可).

Richten Sie die grundlegenden Informationen ein.

Die Einstellungen wurden wie oben abgebildet vorgenommen.

Wählen Sie unter Google Analytics-Ansicht (Google Analytics ビュー) die Datenansicht aus, aus der Sie das Ranking abrufen möchten.

Richten Sie die Textersetzung ein.

Die Einstellungen wurden wie oben abgebildet vorgenommen. Dies ist so eingestellt, dass | kenji.blog aus dem Seitentitel entfernt wird.

Richten Sie die Vorlage ein.

HTML (Die Platzierungsnummern des Rankings wurden ausgeblendet)

 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 (Schriftgröße geändert und die Beschreibung auf maximal 3 Zeilen begrenzt)

 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 { // 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; /* Zeilenanzahl */
 }
 }
 }
}

JavaScript bleibt unverändert

Kopieren Sie den HTML-Code aus „Auf Website einbinden“ (サイトへの掲載)

Kopieren Sie den angezeigten HTML-Code.

In das HUGO-Template einfügen

Erstellen Sie layouts/partials/ranklet.html und fügen Sie den kopierten HTML-Code ein.

1

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

Fügen Sie den folgenden Code in der Zeile vor </footer> in layouts/_default/single.html ein.

1

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

Das ist alles. Damit wird das Ranking wie unten auf dieser Seite angezeigt.

Wie man KaTeX (LaTeX-ähnliche mathematische Formelanzeige) in hugo aktiviert

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

Was ist KaTeX

KaTeX ist eine JavaScript-Bibliothek zur Anzeige von mathematischen Formeln im LaTeX-Stil in HTML.

Konkret können Sie Formeln wie die folgende anzeigen.

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

Es scheint auch andere LaTeX-ähnliche Formelanzeige-Bibliotheken zu geben, aber KaTeX ist dafür bekannt, einfach und schnell zu sein.

Wie man es in hugo integriert

Erstellen Sie ein neues layouts/partials/math.html in der Ordnerhierarchie von hugo.

Der Inhalt sollte wie folgt sein.

 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>

Als Nächstes fügen Sie den folgenden Code zur vorhandenen Datei layouts/partials/extend_head.html hinzu.

1
2
3


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

Jetzt sind Sie bereit, KaTeX zu verwenden.

Sie können KaTeX aktivieren, indem Sie math: true in das Front Matter der Seite einfügen.

Alles, was noch zu tun ist, ist die Formel im LaTeX-Stil in den Textkörper des Seitenartikels zu schreiben.

1

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

Wenn Sie es wie oben schreiben, wird es wie unten angezeigt.

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

Referenz

Verwendung von HTML-Tags in HUGO

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

Standardmäßig erlaubt HUGO die Verwendung von HTML-Tags in Artikeln nicht, aber Sie können dies aktivieren, indem Sie die folgende Beschreibung in die config.toml einfügen.

1
2


[markup.goldmark.renderer]
 unsafe = true

Referenz: Configure Markup

Nützliche Shortcodes in HUGO

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

Nützliche Shortcodes in HUGO

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

Andere

Shortcodes

Zusätzliche Anmerkung

Um {{< foo >}} auf der Website anzuzeigen, müssen Sie {{</* foo */>}} schreiben.

Bildlayout in PaperMod ändern

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

Das Standardlayout zentriert das Bild mit einer Breite von 100 %, aber da es mir manchmal etwas zu groß vorkam, habe ich versucht, das Bild unter dem Titel umfließen zu lassen, und die Breite auf etwa 150px geändert.

Die Änderungen an den Dateien sind wie folgt.

blank.css

Um Ränder, Bildgröße und Textanzeigezeilen zu ändern, fügen Sie die folgende Beschreibung in blank.css hinzu.

 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

Da ich die Definition in blank.css nicht löschen konnte, habe ich 1 Zeile an der folgenden Stelle in post-entry.css gelöscht.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← Diese Zeile löschen
 height: auto;
}

list.html

Um das Bildlayout zu ändern, habe ich die folgende Stelle in list.html geändert.

 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) }} --><!-- Nach unten verschoben -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- Nach unten verschoben -->
 <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;"><!-- Hinzugefügt -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- Hinzugefügt -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- Von oben verschoben -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- Von oben verschoben -->
 </div><!-- Hinzugefügt -->
 <div style="width:100%;"><!-- Hinzugefügt -->
 {{- 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><!-- Hinzugefügt -->
 </div><!-- Hinzugefügt -->
</article>

Es scheint, dass es nicht wenige ähnliche Anfragen gibt.

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

Es wäre toll, wenn die offiziellen Entwickler dies ebenfalls unterstützen könnten.

So konfigurieren Sie Twitter Card mit PaperMod

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

Einführung

Das PaperMod-Theme unterstützt Twitter Card. Die Einstellungen für Twitter Card müssen jedoch in der config.toml oder in den Header-Informationen der *.md jedes Artikels geschrieben werden. Wenn Sie es sowohl in jedem Artikel als auch in der config.toml konfigurieren, haben die Header-Informationen jedes Artikels Vorrang.

Konfiguration

config.toml

Fügen Sie in config.toml ein Element namens images unter [params] hinzu. Beschreiben Sie in images den Pfad des Bildes, das auf Twitter Card angezeigt werden soll. Wenn Sie das Bild im Ordner static platzieren, reicht es aus, nur den Dateinamen anzugeben.

1
2


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

Ordnerstruktur

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (Hier schreiben)
├─content
│ └─posts
│ └─Artikelordner
│ │ index.md (Hier schreiben)
│ └─images
│ cover.png (Hier platzieren)
└─static
 twitter_card.jpg (Hier platzieren)

Header-Informationen jedes Artikels

Fügen Sie in den Header-Informationen jedes Artikels ein Element namens image unter cover hinzu. Wenn Sie relative auf true setzen, können Sie es mit einem relativen Pfad von der *.md des Artikels aus angeben.

1
2
3


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

Wenn Sie es nicht oben im Artikel anzeigen möchten

Wenn Sie das Titelbild nicht oben im Artikel anzeigen möchten, fügen Sie ein Element namens hidden unter cover hinzu und setzen Sie es auf true.

1
2
3
4


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

Über die Bildgröße

In der aktuellen PaperMod-Spezifikation scheint die Twitter Card-Größe nur summary_large_image zu unterstützen. Für die geeignete Größe (Auflösung) von summary_large_image gibt es verschiedene Theorien, aber etwa 800 x 418 (Bildverhältnis 1.91:1) scheint gut zu sein.

Referenzseite 1 Referenzseite 2

Wenn möglich, empfehlen wir, die Bildgröße vor dem Posten zu ändern.

So überprüfen Sie die Einstellungen

Verwenden Sie den Twitter Card Validator, um die Twitter Card-Einstellungen zu überprüfen. Da die Vorschau in meiner Umgebung jedoch nicht richtig angezeigt wurde, empfehle ich Ihnen, falls die Vorschau nicht angezeigt wird, sie vor dem Posten einmal mit einem privaten Konto oder Ähnlichem zu überprüfen.

Ändern des Farbschemas von PaperMod

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

Ich habe das Farbschema des PaperMod-Themas geändert. Für die Änderungsmethode habe ich Folgendes konsultiert.

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

Der CSS-Pfad lautet wie folgt.

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 {
}

Vorerst keine Änderungen für den Dunkelmodus.

【HUGO】Vorschau in der lokalen Umgebung anzeigen

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

HUGO Installation

Download

HUGO Download

Laden Sie von der obigen Website das für Ihre Umgebung geeignete Windows-Modul herunter und entpacken Sie es. In meinem Fall habe ich “hugo_0.102.3_Windows-64bit.zip” heruntergeladen.

Entpacken

Entpacken Sie die heruntergeladene Zip-Datei und kopieren Sie die darin enthaltene hugo.exe in einen Ordner, den Sie erstellt haben, z. B. C:\bin.

In den Umgebungsvariablen registrieren

Registrieren Sie es in den Umgebungsvariablen, um hugo.exe von überall ausführen zu können. Die folgenden Schritte gelten für Windows 11, aber Sie sollten es mit einem ähnlichen Verfahren registrieren können:

Drücken Sie Win+Pause, um die Versionsinformationen zu öffnen
Klicken Sie auf Erweiterte Systemeinstellungen
Klicken Sie auf Umgebungsvariablen
Wählen Sie Path und klicken Sie auf Bearbeiten
Klicken Sie auf Neu, geben Sie “C:\bin” in eine neue Zeile ein und klicken Sie auf OK, um den Dialog zu schließen

Vorschau des Blogs

Navigieren Sie in der Eingabeaufforderung zum HUGO-Blog-Ordner und führen Sie den folgenden Befehl aus.

hugo server -D

Das Ausführungsergebnis ist unten aufgeführt. (-D ist eine Option zur Anzeige von Entwurfsartikeln.)

 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

Da die Adresse während der Ausführung angezeigt wird (im obigen Beispiel http://localhost:1313/), kopieren Sie diese Adresse in Ihren Browser. Die Vorschau wird bei jedem Speichern der Datei automatisch aktualisiert. Um die Vorschau zu beenden, geben Sie in der Eingabeaufforderung Ctrl+C ein.