質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.97%

ルートディレクトリ/content/postsフォルダ内にある.mdを記事一覧として表示したい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 100

MajinBoo

score 8

前提

Hestia Pure | Hugo Themes
上記テーマを元に、Hugoでブログを作成しています。
下記ディレクトリ構造になっています。

root
├ content
│      ├ posts - a.md
└ etc  └ pages   b.md
                 c.md

postsフォルダにある.mdファイルがブログの記事です。
pagesフォルダにはaboutページやプライバシーポリシーページなどが入っています。

Hugoのバージョンは、v0.59.1です。

発生している問題

トップページを開くとpostsという名前のリンクカードのみが表示され、postsリンクカードをクリックすると、postsの中にあるa.md, b.md, c.mdなどのブログ記事へのリンクカードが表示しています。

実現したいこと

トップページを開くとpostsフォルダの中にあるa.md, b.md, c.mdなどのブログ記事へのリンクカードを表示させたいです。

該当のソースコード

index.html

<body>
  <div id="wrap" class="wrap">
    {{ partial "header" . }}
    <main class="main">
      <section class="articles">
        <div class="pure-g">
          {{ $paginator := .Paginate (where .Data.Pages "Type" "posts") 20 }}
          {{ range (.Paginator 12).Pages }}
          {{ .Render "li" }}
          {{ end }}
        </div>
      </section>
    </main>
    {{ partial "footer" . }}
  </div>
  {{ partial "js" . }}
</body>


index.htmlの{{ .Render "li" }}で表示される、li.html

<article class="card pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
  <a class="card__thumb" href="{{ .Permalink }}">
    <img
      src="{{ if and (.Params.image) (ne .Params.image "") }}/{{ .Params.image }}{{ else }}/img/notfound.jpg{{ end }}"
      alt="">
  </a>
  <a href="{{ .Permalink }}">
    <h3>{{ .Title }}</h3>
  </a>
</article>

試したこと

上記ソースコードのindex.htmlにあります下記部分は、

{{ $paginator := .Paginate (where .Data.Pages "Type" "posts") 20 }}
{{ range (.Paginator 12).Pages }}
{{ .Render "li" }}
{{ end }}


下記ページの書き方をコピペしました。
【Hugo】固定ページを作る – Snaplog
参考にしたページによると、これで記事一覧がトップページに来るようになっているようですが、私の環境だと発生している問題の項に記載しました状態です。

そのほかに必要な情報がありましたらご連絡ください。
何卒宜しくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

index.htmlを以下のように変更して試してみてください。

<body>
  <div id="wrap" class="wrap">
    {{ partial "header" . }}
    <main class="main">
      <section class="articles">
        <h2>Recent Post</h2>
        <div class="pure-g">
          {{ $paginator := .Paginate ( where .Site.RegularPages "Section" "posts" ) }}
          {{ range ( $paginator.Pages ) 20}}
                  {{ .Render "li" }}
          {{ end }}
        </div>
      </section>
      {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
        <nav class="pagination">
          {{ if .Paginator.HasPrev }}
          <a class="pagination__link pagination__link--prev" href="{{ .Paginator.Prev.URL }}">&lt; Prev</a>
          {{ end }}
          <span class="pagination__current">{{ .Paginator.PageNumber}} / {{ .Paginator.TotalPages }} Page</span>
          {{ if .Paginator.HasNext }}
          <a class="pagination__link pagination__link--next" href="{{ .Paginator.Next.URL }}">Next &gt;</a>
          {{ end }}
        </nav>
        {{ end }}
    </main>
    {{ partial "footer" . }}
  </div>
{{ partial "js" . }}
</body>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる