Hugo 사이트에 임의 페이지 버튼 추가

얼마나 편리한지 기억한 후 내 Hugo 사이트 중 하나에 무작위 버튼을 추가하고 싶었습니다XKCD . Hugo를 사용하면 JSON 파일을 생성한 다음 임의의 기사를 선택하는 간단한 스크립트를 작성하기만 하면 되는 정말 간단한 프로세스입니다.

우리는 무엇을 만들고 있습니까?

어떻게

1. JSON 페이지 목록 생성

Hugo를 사용하면 JSON 데이터를 편리하게 출력할 수 있으므로 나머지 정적 파일과 함께 배포될 루트에 JSON 데이터를 생성합니다. 이 예에 대한 몇 가지 주의 사항:

사이트에 하나의 페이지 원형만 있고 모든 필터를 원했기 때문에 필터가 간단합니다. Hugo의 where 및 other functions을 사용하면 확실히 창의적인 아이디어를 얻을 수 있습니다.

사이트 검색을 위한 이 색인은 내가 사용하고 있던 테마에 이미 포함되어 있습니다. 랜더마이저만 원하는 경우 tags 및 contents 와 같은 추가 데이터 필드를 모두 삭제할 수 있습니다.

   # layouts/_default/index.json

   {{- $.Scratch.Add "index" slice -}}
   {{- range where site.RegularPages "Type" "in" site.Params.mainSections -}}
   {{ $date:= .PublishDate.Format "02"}}
   {{- $.Scratch.Add "index" (dict "title" .Title "date" $date "tags" .Params.tags "image" .Params.image "categories" .Params.categories "contents" .Plain "permalink" .Permalink) -}}
   {{- end -}}
   {{- $.Scratch.Get "index" | jsonify -}}

내 config.toml에 작은 매개변수를 추가해야 했습니다. 여기에 article if you want to dive a bit deeper이 있고 무슨 일이 일어나고 있는지 더 많이 이해해야 했습니다.

[outputs]
    home = ["json", "html"]

프로덕션 JSON 출력

참고로 위의 Hugo 코드가 출력하게 될 JSON입니다.

[
   {
     "categories": [
       "Developers"
     ],
     "contents": "text of the document",
     "date": "07",
     "image": "images/post/article-1.png",
     "permalink": "https://permalink",
     "tags": [
        "Software Development"
     ],
     "title": "Title of the most recent article"
   },
 ...
 ]

2. HTML 페이지에서 JSON 사용

HTML 페이지에 이와 유사한 것을 추가할 수 있습니다. 버튼이 페이지에 표시되는 partial에 있습니다.

    <script>
     var searchIndexData = [];
     // fetch on page load from the search index
     let json_path = window.location.origin + '/index.json'

     fetch(json_path).then(function (response) {
        return response.json();
     })
     .then(function (data) {
        searchIndexData = data;
     })
     .catch(function (err) {
        console.log(err)
     });


     function sendToRandomArticle() {
     let randIndex = Math.floor(Math.random() * searchIndexData.length);
     let randArticle = searchIndexData[randIndex]['permalink'] + '?utm_source=RandomButton';
     window.location.href = randArticle;
     }

    </script>
    ...
    ...
    <button type="button" class="btn btn-primary" onclick='sendToRandomArticle()'>Random</button>

그게 다야! 간단하다고 말씀해주셨어요.