Content-Length: 304004 | pFad | http://b.hatena.ne.jp/baboocon19820419/HTML/SSG/
Astro(Static Site Genarator) 好きなフレームワークで高速WEBサイト構築 | Reffect
高速なコンテンツ重視の WEB サイトを構築したいという人向けに新たな Static Site Generator(静的サイトジェネレーター:SSG)が登場しました。その名前は Astro。Next.js や Remix などの React フレームワークと同様に注目度の高いフレームワークの一つです。ブログサイトやオープソースのサイト(例：create-t3-app)などで利用され活発に更新が行われているので 2024年8月20日最新のバージョンはのAstro4.14.2です。 リリース当初は Static Site Generator(静的サイトジェネレーター:SSG)として登場した Astroですが現在はSSR(Sever Side Rendring)も備え, Static Site Generatorではなくフルスタックフレームワークとして開発が行われています。 本文書では公開当初は
Hugo で次のページ、前のページへのリンクを表示する
ページ変数の .NextInSection や .PrevInSection を使用すると、同じセクション内の次のページ、前のページを参照することができます。 同じ階層にある「前のページ」「次のページ」へのリンクを表示する下記のテンプレートコードは、前のページへのリンクと、次のページへのリンクを表示するシンプルな例です。 テンプレートコード（抜粋） {{ with .PrevInSection }} <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> {{ end }} {{ with .NextInSection }} <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> {{ end }} Page 変数の .PrevInSection や .NextInSection には、同じセクショ
Hugo で独自のショートコードを作成する
Hugo で独自のショートコードを作成すると、定型の HTML コードを記事内に簡単に埋め込めるようになります。 ショートコード作成の基本ショートコードは、layouts/shortcodes ディレクトリ内に .html 拡張子のファイルとして作成します。 layouts/shortcodes/my-shortcode.html ファイル名から拡張子を除いたものが、ショートコード名となります。 上記の例の場合、my-shortcode というショートコードを作成したことになります。 記事（Markdown ファイル）の中から、下記のように呼び出すと、上記の内容がそこに展開されます。 content/page1.md ショートコードにパラメータを渡す (.Get)単純なパラメータショートコード呼び出し時に、パラメータを渡すことができます。 下記の例では、２つのパラメータ red、32px
Hugoのテンプレート構文「template」「partial」「block」「define」のわかりやすい解説
Hugo のオリジナルテーマ作成を勝手に応援する企画、記念すべき第 1 弾はテンプレート構文の基本となる「template」「partial」「block」「define」の違いについてです。以下のバージョンで確認しています。 Hugo Static Site Generator v0.53/extended darwin/amd64 BuildDate: unknown Hugo のテンプレート構文 Hugo にはさまざまなテンプレート構文が用意されています。今回は、その中でも基本となる以下の 4 つについて、とくにつまずきやすい点を中心に解説します。記事の内容に対するご質問やご指摘等はコメント欄でお待ちしております。 template partial block define template template構文は、Hugo であらかじめ定義されている内部のテンプレートファイルを読み
Pagination
Displaying a large page collection on a list page is not user-friendly: A massive list can be intimidating and difficult to navigate. Users may get lost in the sheer volume of information. Large pages take longer to load, which can frustrate users and lead to them abandoning the site. Without any filtering or organization, finding a specific item becomes a tedious scrolling exercise. Improve usabi
静的サイトジェネレータHugoを使ったサイト構築（Taxonomy編）
こんにちは、tamaoki (@t0shiya) です。 今回は、静的サイトジェネレータ Hugo の Taxonomy ついて。 Taxonomy （タクソノミー）とは、ざっくり言うとコンテンツをグルーピングする 分類 のことです。 Hugo ではデフォルトで tags と categories の２つの Taxonomy が定義されています。Taxonomy を使用すると Hugo は自動的に Taxonomy 自体のリスト(tags, categories, …)、各Taxonomy毎のキーのリスト、各Taxonomyに紐づくコンテンツのリストを生成します。 定義 Taxonomy 公式ドキュメントに記載されている俳優(Actor)というTaxonomyと出演作品（Content）の例をあげます。 Actor <- Taxonomy Bruce Willis <- Term The
Hugo Shortcodesの作り方 - SIS Lab
Hugoでは、ちょっとしたHTMLタグを記事やテンプレートに差し込みたいと思った場合、ShortCodesという便利な機能が使えます。 例えば、次のものがあります。 Twitterのツイート埋め込みSlideshare, Speakerdeckなどのスライドの埋め込みYoutubeなどの動画埋め込みAmazonアフィリエイトリンクInstagramの写真imgタグAdsenseShortcodesのメリットHTMLタグを直書きと比べて何が嬉しいかというと、次の2点が挙げられます。 変更に強い見た目がシンプル埋め込みURLでよくあるパターンが、各記事に主導でコードを埋め込んだはいいがちょっと変更を加えたいときに、1つ1つ直していかなければいけないというものです。 HTML直書きだと変更に対して明らかに弱いです。 一方、Shortcodesにしておけば、コードは変えずにレイアウトを後からいくら
本ブログにもページネーション機能が付きました！Hugoでページネーション機能を作ろう
こんにちは、 dotstudio代表ののびすけです。 このブログはページネーション機能が無かったのですが、そろそろコンテンツ数も増えてきたのでページネーション機能を実装しました。 888888 実際に作る方法を紹介します。 Hugoでページネーション機能を作る今回はblogセクションにページネーションを実装します。 Hugoのページネーションで調べるとまずはドキュメントページのここがヒットします。 もともともsection/blog.htmlは以下のようなコードでした。 {{ partial "header.html" . }} <!-- Main Content --> <div id="blog-card--container"> {{ range first 12 (where .Data.Pages "Type" "blog") }} {{ .Render "summary"}}
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/baboocon19820419/HTML/SSG/
Alternative Proxies:
Astro
PaperMod