Hugo 사이트에 임의 페이지 버튼 추가
우리는 무엇을 만들고 있습니까?
어떻게
1. JSON 페이지 목록 생성
Hugo를 사용하면 JSON 데이터를 편리하게 출력할 수 있으므로 나머지 정적 파일과 함께 배포될 루트에 JSON 데이터를 생성합니다. 이 예에 대한 몇 가지 주의 사항:
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>
그게 다야! 간단하다고 말씀해주셨어요.
Reference
이 문제에 관하여(Hugo 사이트에 임의 페이지 버튼 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/idontremember/add-a-random-page-button-to-hugo-site-45e9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)