Hugo에서 Bootstrap을 사용하여 테마 "Bootstrap 드 아마추어"를 작성했습니다.

8297 단어 bootstrap4Hugo작업 로그
Hugo에서 쵸코 쵸코 「아리 모노」의 테마를 만나면서 사이트를 구축하고 있었습니다만, 처음부터 테마를 써 보려고 생각했기 때문에 메모로서 남겨 둡니다

병아리가되는 사이트 만들기


$ hugo new site doshirouto

최소한의 config.toml 쓰기


$ cd doshirouto
$ nano config.toml
baseURL = "//www.example.com/"
title = "Bootstrapド素人"
languageCode = "ja-JP"
HasCJKLanguage = true
[params]
description = "サイトの説明文"
copyright = " Bootstrapド素人; all rights reserved."

새로운 테마 작성



테마의 병아리 생성


$ hugo new theme doshirouto
$ tree -F themes/doshirouto/
themes/doshirouto/
├── archetypes/
│   └── default.md
├── layouts/
│   ├── 404.html
│   ├── _default/
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html
│   └── partials/
│       ├── footer.html
│       └── header.html
├── LICENSE.md
├── static/
│   ├── css/
│   └── js/
└── theme.toml

Bootstrap4를 캡처했습니다.



테마 폴더의 정적 폴더에 Bootstrap4를 가져 왔습니다.
themes/doshirouto/
├── LICENSE.md
├── static/
│   ├── css/
│   │   └── bootstrap.min.css
│   └── js/
│       ├── bootstrap.min.js
│       └── jquery-3.3.1.min.js
└── theme.toml

단순화를 위해 layouts/index.html을 지웠습니다.



Hugo's Lookup Order
$ rm themes/doshirouto/layouts/index.html

layouts/_default/baseof.html 작성


$ nano themes/doshirouto/layouts/_default/baseof.html
{{ partial "header.html" . }}
{{ partial "page/header.html" . }}
<div class="row">
    <div class="col-md-9">
        <div class="main-content">
        {{ block "main" . }}{{ end }}
        </div>
    </div>
    <div class="col-md-3">
        <div class="side-content">
        {{ partial "side-content.html" . }}
        </div>
    </div>
</div>
<div class="row">
    {{ partial "page/footer.html" . }}
</div>
{{ partial "footer.html" . }}

partials/header.html 작성


$ nano themes/doshirouto/layouts/partials/header.html
<!DOCTYPE html>
<html>
<head>
<title>{{ block "title" . }} {{ .Site.Title }} {{ end }}</title>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ "css/bootstrap.min.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
</head>
<body>

partials/footer.html 작성


$ nano themes/doshirouto/layouts/partials/footer.html
{{ partial "scripts" . }}
</body>
</html>

partials/page/header.html 작성


$ mkdir themes/doshirouto/layouts/partials/page
$ nano themes/doshirouto/layouts/partials/page/header.html
\## partials/page/header.html ここから ##
<div class="page-content">    
<div class="container-fluid">
    <nav class="navbar navbar-light" style="background-color: #e3f2fd;">        
        <a class="navbar-brand" href="/">{{ .Site.Title }}</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
            </li>
        </div>
    </nav>
\## partials/page/header.html ここまで ##

partials/page/footer.html 작성


$ nano themes/doshirouto/layouts/partials/page/footer.html
\## partials/page/footer.html ここから ##
\&copy; {{now.Format "2006"}} {{ .Site.Params.copyright}}
</div>
</div>
\## partials/page/footer.html ここまで ##

partials/side-content.html 작성


$ nano themes/doshirouto/layouts/partials/side-content.html
\## partials/side-content.html ここから ##
<div class="card Profile">
    <div style="text-align: center;">
        <img class="card-img-top ProfileAvatar" src="{{ "image/profile/avatar.jpg" | relURL }}">
    </div>
    <div class="card-body">
        {{ .Site.Params.description }}
    </div>
</div>
\## partials/side-content.html ここまで ##

partials/scripts.html 작성


$ nano themes/doshirouto/layouts/partials/scripts.html
<script src="{{ "/js/jquery-3.3.1.min.js" | relURL }}"></script>
<script src="{{ "/js/bootstrap.min.js" | relURL }}"></script>

layouts/_default/list.html 작성


$ nano themes/doshirouto/layouts/_default/list.html
{{ define "main" }}
{{ $paginator := .Paginate (where .Data.Pages "Type" "page" ) 5 }}
{{ range $paginator.Pages }}
{{ .Render "list/item" }}
{{ end }}
{{ partial "page/pagination" . }}
{{ end }}

layouts/_default/list/item.html 작성


$ mkdir themes/doshirouto/layouts/_default/list
$ nano themes/doshirouto/layouts/_default/list/item.html
\## _default/list/item.html ここから ##
<div class="card">
    <div class="card-header">
        {{ .Title }}
    </div>
    <div class="card-body">
        <p>{{ .Summary }}</p>
        <div class="text-right">
            <a href="{{ .Permalink }}" class="btn btn-primary ">続きをよむ</a>
        </div>     
    </div>
    <div class="card-footer text-muted">
        <ul class="card-footer-tags-ul">
            {{ range .Params.tags }}
                <li class="card-footer-tags-li"><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">[ {{ . }} ]</a> </li>
            {{ end }}
        </ul>
    </div>
</div>
\## _default/list/item.html ここまで ##

layouts/_default/single.html 작성


$ nano themes/doshirouto/layouts/_default/single.html
{{ define "main" }}
{{ .Render "single/page" }}
{{ end }}

layouts/_default/single/page.html 작성


$ mkdir themes/doshirouto/layouts/_default/single
$ nano themes/doshirouto/layouts/_default/single/page.html
\## _default/single/page.html ここから ##
<div class="card">
    <div class="card-header">
        {{ .Title }}
    </div>
    <div class="card-body">
        {{ .Content }}
    </div>
</div>
\## _default/single/page.html ここまで ##

우선 완성



그런 다음 목적에 맞게 CSS를 작성하거나 페이지를 사용자 정의합니다.


감상



Hugo도 Bootstrap도 도 아마추어로 2시간 정도 써 보았습니다만, 어쩐지 써도 좋은 느낌이 드네요
Boostrap4로 tooltip에 이미지 표시
Pingendo라는 Bootstrap 4 기반 프로토 타이핑 도구가 좋습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage