このブログの書き方

この記事は自分のための備忘録です

メインブログは執筆コストが高すぎるので、気軽にかけるこちらのHugoブログへコンテンツを集約しようと画策しています。

こちらで積極的な記事執筆に従事すべく、hugo-stackthemeにて定義されているスニペットやHugoそのもので定義されているスニペットをまとめておきます。あくまで自分用なので網羅はしていません。

自分のための備忘録ですが、hugo-stack themeをお使いの方の参考にもなれば。

ショートコードなどは追加するかもしれないので、随時この記事を更新します。

Hugoで規定されているショートコード

`figure`

1

{{< figure src="https://d33wubrfki0l68.cloudfront.net/c38c7334cc3f23585738e40334284fddcaf03d5e/2e17c/images/hugo-logo-wide.svg" title="Hugo logo" >}}

Hugo logo

Markdown記法で事足りることがほとんどなので、figureを使うことは無さそうです。

gist

gistは今回初めて使ったくらいなので、これも使うことは無いかも。使い方は簡単。

highlight

1
2
3


{{< highlight python  >}}
...
{{< /highlight >}}

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


def bubbleSort(array):

  # loop to access each array element
  for i in range(len(array)):
    # loop to compare array elements
    for j in range(0, len(array) - i - 1):
      # compare two adjacent elements
      # change > to < to sort in descending order
      if array[j] > array[j + 1]:
        # swapping elements if elements
        # are not in the intended order
        array[j], array[j+1] = array[j+1], array[j]
  return array

data = [-2, 45, 0, 11, -9]
sorted_data = bubbleSort(data)
print('Sorted Array in Ascending Order:')
print(sorted_data)

※AIが生成したコードなので間違ってるかもしれません(見た限り合ってるっぽいけど)

これもmarkdown記法で足りる。本当は行ハイライトなども可能ですが、stackテーマとは相性が悪いのか行番号がずれてしまいます。

ref

1

[相模原サンキューキャンペーンの時の記事]({{<  ref "2022-10-15-sagamihara-map/index.md"  >}})

相模原サンキューキャンペーンの時の記事

サイト内リンクのURLを自動生成してくれるスニペット。

これ今まで全く活用してなかったけど、便利だし最適解だし使わなきゃだな。

ページ内リンクも使ってみたけど、残念ながらうまくジャンプしてくれませんでした。

1

{{< tweet golang 1633151903352627207 >}}

🥳 Go 1.20.2 and 1.19.7 are released!

🔐 Security: Includes a security fix for crypto/elliptic (CVE-2023-24532).

🔈 Announcement: https://t.co/0R5yvEp6JL

⬇️ Download: https://t.co/CxvhilnLor #golang pic.twitter.com/xlnHevMUGv
— Go (@golang) March 7, 2023

ツイート引用もwordpressだと何かと面倒ですが、hugoのショートコードならかなり簡単に。

このブログで仕様しているstackテーマでは中心寄せのcssになっていなかったので、以下のように少し改変しました。

1
2
3
4
5
6


    .twitter-tweet {
        color: var(--card-text-color-main);
        display:block;
        margin-left:auto;
        margin-right:auto;
    }

css改変前後の比較

youtube

1

{{< youtube weLaDoGBlxM >}}

youtubeもidを入れるだけでページ内ビュワーが作られます。ショート動画は左右に暗幕が出来てしまうので、あまり見栄えが良くないかも。

自分で追加したショートコード

message box

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


{{% hint info %}}
Info box.
{{% /hint %}}

{{% hint warning %}}
Warning box.
{{% /hint %}}

{{% hint danger %}}
Danger box.
{{% /hint %}}

{{% hint normal %}}
Normal box.
{{% /hint %}}

Info box.P

Warning box.

Danger box.

Normal box.

blog-card

1

{{< blog-card url="https://www.youtube.com" >}}

オシャンなblogカードが欲しくて過去に作ったもの。はてなのAPIを使って実装しています。

accordion

1
2
3
4
5


{{< accordion title="クリックで展開" >}}
{{< highlight python>}}
import pandas as pd
{{< /highlight >}}
{{< /accordion >}}

クリックで展開

1

import pandas as pd

gkzz.devさんのブログを参考にさせていただきました。

スニペット

ショートコードの記法とは異なるが、html tagのようなスニペットが使える。

mark

1

文章の中でも<mark>**特に強調したい部分**</mark>をハイライトできる。

文章の中でも特に強調したい部分をハイライトできる。

sub, sup

1

文章の中で<sub>下付き</sub>や<sup>上付き</sup>を使うことが出来る。

文章の中で_下付きや^上付きを使うことが出来る。

kbd

1

<kbd>Ctrl</kbd>キーを押しながら<kbd>C</kbd>を押す

Ctrlキーを押しながらCを押す