기본 콘텐츠 렌더링

8136 단어 vuegohtmlbloghugo

정상적인 기본값



이전 시리즈에서는 및 를 만들었습니다. 이제 멋진 HTML 기본값을 갖도록 템플릿을 업데이트하겠습니다. 이 주제에 대해 좀 더 자세히 설명하는 훌륭한 기사Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project를 읽어 보시기 바랍니다. 그러나 우리의 경우 기본 템플릿을 Vite's boilerplate template for Vue 에 기반할 것입니다.

먼저 lang="en" 태그에 html 속성을 추가하여 콘텐츠가 영어로 되도록 지정합니다. 이 블로그가 여러 언어를 지원하도록 할 계획입니다. 제 주 언어는 러시아어이지만 모국어는 우즈베크어입니다. 그리고 앞으로 이러한 언어로도 글을 쓰기를 희망합니다. Hugo's Lookup Order 페이지에서 (솔직히 말해서 직접적이지 않음) Hugo의 모든 템플릿 조회는 layouts/_default/baseof.html 템플릿으로 시작한다고 명시되어 있습니다. 이 사실은 생성된 html 폴더에서 layouts 태그가 있는 템플릿을 찾는 것으로도 유추할 수 있습니다.

diff --git a/blog/src/layouts/_default/baseof.html b/blog/src/layouts/_default/baseof.html
index 7b0d566..94c5dfe 100644
--- a/blog/src/layouts/_default/baseof.html
+++ b/blog/src/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     {{- partial "head.html" . -}}
     <body>
         {{- partial "header.html" . -}}


그 후 기존 구조에 따라 head에서 layouts/_default/head.html 태그를 업데이트합니다.

diff --git a/blog/src/layouts/partials/head.html b/blog/src/layouts/partials/head.html
index e69de29..b9f74a6 100644
--- a/blog/src/layouts/partials/head.html
+++ b/blog/src/layouts/partials/head.html
@@ -0,0 +1,6 @@
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ .Site.Title }}</title>
+</head>


여기 있습니다
  • 기본 문자 인코딩을 지정하는 태그가 추가됨meta
  • link를 미래 파비콘
  • 에 추가했습니다.
  • 페이지 너비를 장치 화면 너비로 렌더링하는 meta 구성에 대한 또 다른 viewport 태그를 추가했습니다
  • .
  • 페이지 제목을 설정하기 위해 title 태그를 추가했습니다.

  • Hugo의 팀이 제안한 내용docs도 확인할 수 있습니다.

    GoHTML 템플릿



    이제 콘텐츠를 표시하도록 기본 Kind 템플릿을 구성할 준비가 되었습니다. 방문 페이지부터 시작하겠습니다 - layouts/index.html . 기본baseof.html에는 block 구문의 사용법이 포함되어 있습니다. 다른 템플릿 언어를 사용한 경우 이는 매우 친숙할 것입니다. 기본적으로 이렇게 하면 기본 템플릿의 재정의 가능한 부분을 가질 수 있습니다. 예를 들어, {{- block "main" . }}{{- end }} 이 있는데, 이는 이 부분을 다시 define 할 수 있음을 의미합니다. 이해를 돕기 위해 the docs on Base Templates and Blocks을 읽으십시오. 최종 결과만 보여드리겠습니다.

    index.html




    diff --git a/blog/src/layouts/index.html b/blog/src/layouts/index.html
    index e69de29..728b791 100644
    --- a/blog/src/layouts/index.html
    +++ b/blog/src/layouts/index.html
    @@ -0,0 +1,8 @@
    +{{ define "main" }}
    +    <h1>{{ .Site.Title }}</h1>
    +    {{ range .Pages }}
    +        <article>
    +            <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
    +        </article>
    +    {{ end }}
    +{{ end }}
    


    이제 우리 블로그는 랜딩 페이지의 config.toml 및 현재 수준의 모든 페이지(현재 "블로그를 비행하면서 블로그 만들기"시리즈 링크만 해당)에서 제목을 링크와 함께 렌더링합니다. "이것은 내 첫 번째 로데오가 아닙니다."개인적으로 위의 템플릿이 매우 간단하다는 것을 알았습니다. 그러나 템플릿을 처음 사용하는 경우 template functionstemplate variables 에 대한 공식 문서를 살펴보는 것이 좋습니다.

    _default/list.html



    동일한 논리에 따라 list Kind 템플릿을 업데이트합니다. 현재 페이지Title를 표시하고 모든 하위 페이지를 렌더링합니다.

    --- a/blog/src/layouts/_default/list.html
    +++ b/blog/src/layouts/_default/list.html
    @@ -0,0 +1,8 @@
    +{{ define "main" }}
    +    <h1>{{ .Title }}</h1>
    +    {{ range .Pages }}
    +        <article>
    +            <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
    +        </article>
    +    {{ end }}
    +{{ end }}
    


    _default/single.html



    마지막으로 _default/single.html에서 기사의 실제 내용을 렌더링합니다.

    --- a/blog/src/layouts/_default/single.html
    +++ b/blog/src/layouts/_default/single.html
    @@ -0,0 +1,6 @@
    +{{ define "main" }}
    +    <article>
    +        <h1>{{ .Title }}</h1>
    +        {{ .Content }}
    +    </article>
    +{{ end }}
    


    접근성을 위한 기사 업데이트



    이전에는 이 블로그의 내 기사에서 제목을 표시하기 위해 단일 해시태그#를 사용했지만 이제부터는 두 개의 해시태그##를 사용하므로 모든 기사의 섹션이 heading level 2으로 렌더링됩니다. 이것은 dev.to의 편집자가 접근성을 개선하기 위해 권장하는 것이며 또한 이를 통해 기사 제목이 <h1>로 렌더링되고 섹션의 모든 제목이 <h2>로 렌더링되는 기사 콘텐츠를 적절하게 렌더링할 수 있습니다.

    만세!



    우리는 어딘가에서 호스팅할 수 있고 사람들이 그것을 읽을 수 있는 실제 작동하는 블로그를 가지고 있습니다. 그러나 우리는 다른 시간에 실제 호스팅을 할 것입니다. 지금은 블로그 자체를 계속 구축하고 블로그에 게시할 것입니다.

    연결


  • https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/
  • https://github.com/vitejs/vite/blob/main/packages/create-vite/template-vue/index.html
  • https://gohugo.io/templates/lookup-order/
  • https://gohugo.io/templates/base/#define-the-base-template
  • https://gohugo.io/templates/lookup-order/#hugo-layouts-lookup-rules
  • https://gohugo.io/templates/base/#override-the-base-template
  • https://gohugo.io/categories/functions
  • https://gohugo.io/variables/
  • https://www.markdownguide.org/basic-syntax/#headings
  • 좋은 웹페이지 즐겨찾기