tag: HUGO

はじめに Rankletというサービスを使うと、Googleアナリティクスから人気ページランキングを取得して簡単に配置できます。 この記事ではHUGOブログに配置する方法をご紹介します。 動作イメージ 準備 サイトにGoogleアナリティクスを設定していること 手順 Rankletにアクセスする Sign in with GoogleをクリックしてGoogleアカウントでログインする（Googleアナリティクスのアカウントと紐づけられていること） 許可をクリック 基本情報を設定する 上記のように設定しました。 Google Analytics ビューではランキングを取得したいビューを選択します。 テキストの置換を設定する 上記のように設定しました。 ページタイトルの | kenji.blogを削除するために設定しています。 テンプレートを設定する HTML(ランキングの数字を非表示にしました) <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....

KaTeXとは KaTeXは、LaTeX風の数式をHTMLで表示するためのjavascriptライブラリです。 具体的には下記のような数式を表示することができます。 $$f(x) = x^2 + x + 41$$ 他にもLaTeX風な数式表示ライブラリもあるようですが、KaTeXはシンプルで高速と定評があるようです。 hugoへの導入方法 hugoのフォルダ階層でlayouts/partials/math.htmlを新規作成します。 中身は下記の通りにしてください。 <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に下記のコードを追加します。 {{ if or ....

HUGOのデフォルトでは記事中のHTMLタグの使用ができなくなっていますが、config.tomlに下記の記述をするとできるようになります。 [markup.goldmark.renderer] unsafe = true 参考: Configure Markup

HUGOで使えるショートコード YouTube {{<youtube 123456abc>}} Twitter {{<twitter 123456abc>}} Instagram {{<instagram 123456abc>}} Flickr {{<flickr 123456abc>}} Vimeo {{<vimeo 123456abc>}} その他 Shortcodes 余談 サイト上で{{< foo >}}と表現したい場合は、{{</* foo */>}}と記述する必要があります。

既定のレイアウトは、画像を中央に横幅100%で配置されていますが、 少し大きいなと感じることがあったため、画像をタイトルの下に周り込ませて、 横幅を150px程度に変更してみました。 ファイルの変更箇所は下記のとおりとなります。 blank.css 余白や画像のサイズ、テキストの表示行を変更するために、blank.cssに下記の記述を追加します。 .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行削除します。 .entry-cover img { border-radius: var(--radius); pointer-events: none; /* width: 100%; */ ← この行を削除 height: auto; } list.html 画像の配置を変更するために、list.htmlの下記箇所を変更しました。 <article class="{{ $class }}"> <!-- {{- $isHidden := (site.Params.cover.hidden | default site....

はじめに PaperModテーマはTwitter Cardに対応しています。 ただし、Twitter Cardの設定は、config.tomlまはた各記事の*.mdのヘッダ情報に記述する必要があります。 各記事とconfig.tomlの両方に設定した場合は、各記事のヘッダ情報が優先されます。 設定方法 config.toml config.tomlには、[params]の下に、imagesという項目を追加します。 imagesには、Twitter Cardに表示する画像のパスを記述します。 画像をstaticフォルダに配置する場合は、ファイル名だけの指定でOKです。 [params] images = ["twitter_card.jpg"] フォルダ構成 root │ config.toml (ココに記述) ├─content │ └─posts │ └─記事フォルダ │ │ index.md (ココに記述) │ └─images │ cover.png (ココに配置) └─static twitter_card.jpg (ココに配置) 各記事のヘッダ情報 各記事のヘッダ情報には、coverの配下にimageという項目を追加します。 relativeをtrueにすると、記事の*.mdからの相対パスで指定できます。 cover: image: "images/cover.jpg" relative: true 記事の上部には表示させたくない場合 記事の上部にカバー画像を表示させたくない場合は、coverの配下にhiddenという項目を追加てtrueに設定します。 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テーマの配色を変更しました。変更方法は下記を参考にしました。 https://github.com/adityatelange/hugo-PaperMod/discussions/645 CSSのパスは下記になります。 themes/PaperMod/assets/css/extended/blank.css :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のインストール ダウンロード HUGOのダウンロード 上記のサイトから、環境に合わせたWindowsのモジュールをダウンロードして展開する。 私の場合は「hugo_0.102.3_Windows-64bit.zip」をダウンロードしました。 展開 ダウンロードしたzipファイルを展開して、その中にあるhugo.exeを例えばC:\bin等のフォルダを作ってそこにコピーします。 環境変数に登録 任意の場所からhugo.exeを実行するために環境変数に登録します。 Windows11での操作になりますが、下記のような手順で登録できると思います。 Win+Pauseボタンを押してバージョン情報を開く システムの詳細設定をクリックする 環境変数をクリックする Pathを選択して編集をクリックする 新規をクリックして、新しい行に「C:\bin」と入力してOKでダイアログを閉じる ブログをプレビューする コマンドプロンプトでHUGOブログのフォルダに移動して、下記のコマンドを実行する。 hugo server -D 実行結果は下記。（-Dはドラフトの記事を表示するオプションです。） 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....