hugo 创建自己的静态博客_hugo 分页-CSDN博客

本文链接：https://blog.csdn.net/by2233/article/details/112628372

Hugo是由Go语言实现的静态网站生成器。

安装

 	二进制下载地址	https://github.com/spf13/hugo/releases

创建站点

	hugo new site myblog

创建主题

    cd myblog
    hugo new theme xxxx

或者使用现有主题

	cd themes
	git clone https://github.com/spf13/hyde.git

运行，浏览器里打开： http://localhost:1313

    本地调试
	hugo server --theme=hyde --buildDrafts
	生成html
	hugo --theme=hyde --baseUrl="http://xxx.github.io/"

或者修改config.toml

themes = hyde

	hugo server
	hugo

我的配置参考配置文件还可以使用 yaml ，json

baseURL = "https://kongjs2021.gitee.io"
languageCode = "en-us"
title = "静态站点"
theme = "yodogo"
builddrafts = true
copyright = "Copyright &#xA9; 2020 By       . All Rights Reserved."
summaryLength = 25
[author]
 name = ""
 url = "https://www.kongjs.com"
[params]
  dateformat = "2006年/1月/2日"
[permalinks]
  post = "/post/:year/:month/:day/:title/"
  tans = "/tans/:year/:month/:day/:title/"
  tags = "/tags/:year/:month/:day/:title/"
  categories ="/categories/:year/:month/:day/:title/"

[taxonomies]
  category = "categories"
  tag = "tags"



[frontmatter]
date = ["date", "publishDate", "lastmod"]
lastmod = [":git", "lastmod", "date", "publishDate"]
publishDate = ["publishDate", "date"]
expiryDate = ["expiryDate"]

# 页眉导航菜单
[[menu.main]]
name="博文"
url="/post"
weight="1"
[[menu.main]]
name="杂谈"
url="/tans"
weight="2"
[[menu.main]]
name="标签"
url="/tags"
weight="3"
[[menu.main]]
name="分类"
url="/categories"
weight="4"
[[menu.main]]
name="关于"
url="/about"
weight="5"

# 页脚导航菜单
[[menu.foot]]
name="文档"
url="/docs"
weight="1"
[[menu.foot]]
name="归档"
url="/archives"
weight="2"
[[menu.foot]]
name="联系"
url="/contact"
weight="3"

编写一个简单的主题编辑器推荐vscode

		hugo new theme xxx
		cd themes/xxx

引入静态文件，css框架

目录
themes\xxx\static\css \

themes\xxx\static\js \

{{- $baseUrl := .Site.BaseURL -}}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="{{.Site.Author.name}}">
<meta name="description" content="{{.Page.Description}}">
<script src="{{ $baseUrl }}/js/jquery.min.js"></script>
<script src="{{ $baseUrl }}/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{{ $baseUrl }}/css/bootstrap.min.css">
<title>{{- .Title -}}</title>

添加页眉，layouts \ partials \head.html

<div class="sticky-top fixed-top py-1">
  <div class="navbar navbar-expand-sm flex-nowrap justify-content-between">
    <div class="d-flex">
      <a class="navbar-brand text-muted" href="{{- .Site.BaseURL -}}">首页</a>
    </div>
    <div class="d-flex">
      <ul class="nav flex-nowrap d-flex">
        {{- range .Site.Menus.main -}}
        <li class="nav-item ">
          <a class="nav-link text-muted " href="{{.URL}}">{{.Name}} </a>
        </li>
        {{- end -}}
      </ul>
    </div>
  </div>
</div>

修改 layouts \ _default \ baseof.html，基本布局页面，也可以不用

最好使用hugo命令生成的页面

<!DOCTYPE html>
<html>

<head>
    {{- partial "head.html" . -}}
</head>

<body>
    <div class="container">
        {{- partial "header.html" . -}}

        {{- block "main" . }}{{- end }}

        {{- partial "footer.html" . -}}
    </div>
  
</body>

</html>

修改 layouts \ _default \ single.html , 文章页面

{{- define "main" -}}
<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a class="text-muted" href="{{- .Site.BaseURL -}}">首页</a></li>
          <li class="breadcrumb-item"><a class="text-muted" href="{{.Parent.RelPermalink}}">{{.Parent.Title}}</a></li>
          <li class="breadcrumb-item active" aria-current="page">{{.Title}}</li>
        </ol>
      </nav>
    <h5 class="mt-0 mb-1 text-center"><a class="text-muted" href="{{ .RelPermalink }}">{{.Title}}</a></h5>
    <ul class="list-inline">
        <li class="list-inline-item">  <span class="mb-2 badge badge-secondary">发布时间：{{ .Date.Format .Site.Params.Dateformat }}</span></li>
        <li class="list-inline-item"> <span class="mb-2 badge badge-secondary">
            标签：
            {{ range .Params.tags}}
            {{.}}
            {{ end }}
        </span></li>
        <li class="list-inline-item"><span class="mb-2 badge badge-secondary">
            分类：
            {{ range .Params.categories}}
            {{.}}
            {{ end }}
        </span></li>
      </ul>
    <div> <small class="ml-3">预计阅读时间{{ .ReadingTime }}分钟</small></div>
    <div> <small class="ml-3">总计{{ .WordCount }}字</small></div>
    <div class="lead">
        <div>
            <p class="text-center small">
                <i class="ml-4">
                    {{ .Description }}
                </i>
            </p>
        </div>
        <div>
            <div class="ml-3">
                {{.Content}}
            </div>
        </div>
    </div>
</div>



<div class="container">
    
    <ul class="pagination justify-content-center">
        {{ if .Prev }}
        <li class="page-item previous"><a class="page-link" href="{{.Prev.Permalink}}"> 上一页</a></li>
        {{ end }}
        {{ if not .Prev }}
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">已经到头了</a>
        </li>
        {{ end }}
       
        {{ if .Next }}
        <li class="page-item">
            <a class="page-link next" href="{{.Next.Permalink}}">下一页</a>
        </li>
        {{ end }}

        {{ if not .Next }}
        <li class="page-item disabled">
            <a class="page-link" href="#">
                下一页没有了
            </a>
        </li>
        {{ end }}

    </ul>
</div>
{{- end -}}

修改 layouts \ _default \ list.html , 文章列表页面，该页面使用了分页

{{- define "main" -}}

<div class="container">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a class="text-muted" href="{{- .Site.BaseURL -}}">首页</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{.Title}}</li>
    </ol>
  </nav>
    <ul class="list-unstyled">
      

        {{  range (.Paginator 16).Pages.ByWeight }}
      <li class="media my-4">
        <div class="media-body">
          <div class="container">
            <h5 class="mt-0 mb-1"><a class="text-muted" href="{{ .RelPermalink }}">{{.Title}}</a></h5>
            <ul class="list-inline">
              <li class="list-inline-item">  <span class="mb-2 badge badge-secondary">发布时间：{{ .Date.Format .Site.Params.Dateformat }}</span></li>
             
              {{ if  .Params.tags}}
              <li class="list-inline-item"> <span class="mb-2 badge badge-secondary">
                标签：
                {{ range .Params.tags}}
                {{.}}
                {{ end }}
            </span></li>
              {{ end }}
            {{ if  .Params.categories}}
            <li class="list-inline-item"><span class="mb-2 badge badge-secondary">
              分类：
              {{ range .Params.categories}}
              {{.}}
              {{ end }}
          </span></li>
            {{ end }}

           
            </ul>
            <div class="row">
              <div class="col-6">
                <p class="ml-4 small">
                  <i>   {{ .Description }} </i>
                </p>
             
              </div>
            </div>
            <div class="row alert">
              <div class="col-sm-9">
                {{ .Summary }}
              </div>
                  <div class="col-sm-3">
                  <a class="text-muted" href="{{ .RelPermalink }}">更多…</a>
              </div>
            </div>
          </div>
        </div>
      </li>
      {{  end  }}
    </ul>
    {{ template "_internal/pagination.html" . }}
</div>

{{- end -}}

创建首页 layouts \ index.html

{{- define "main" -}}

<div class="row py-5  small">
  <div class="col-sm-6 d-flex">
    <div class="container ">
      <h5>最新博文</h5>
      <ul class="list-unstyled">
        {{ range where .Site.Pages.ByPublishDate "Section" "post"}}
        {{ range first 16 .Pages }}
        <li class="media my-4">
          <div class="media-body">
            <div class="container">
              <h5 class="mt-0 mb-1"><a class="text-muted" href="{{ .RelPermalink }}">{{.Title}}</a></h5>
              <ul class="list-inline">
                <li class="list-inline-item">  <span class="mb-2 badge badge-secondary">发布时间：{{ .Date.Format .Site.Params.Dateformat }}</span></li>
                <li class="list-inline-item"> <span class="mb-2 badge badge-secondary">
                    标签：
                    {{ range .Params.tags}}
                    {{.}}
                    {{ end }}
                </span></li>
                <li class="list-inline-item"><span class="mb-2 badge badge-secondary">
                    分类：
                    {{ range .Params.categories}}
                    {{.}}
                    {{ end }}
                </span></li>
              </ul>

              <div class=" row">
                <div class="col-6">
                  <p class="ml-4 small">
                    <i>   {{ .Description }} </i>
                  </p>
                </div>

              </div>
              <div class="row">
                <div class="col-sm-9 ">
                  <p class="ml-3">
                    {{ .Summary }}
                  </p>
                </div>
                <div class="col-sm-3">
                  <a class="text-muted" href="{{ .RelPermalink }}">更多…</a>
                </div>
              </div>
            </div>

          </div>

        </li>
        {{ end }}
        {{ end }}
      </ul>
   
    </div>

  </div>
  <div class="col-sm-6 d-flex">
    <div class="container">
      <h5>热门杂谈</h5>
    
      <ul class="list-unstyled">
        {{ range where .Site.Pages.ByWeight "Section" "tans"}}
        {{ range first 16 .Pages }}
        <li class="media my-4">
          <div class="media-body">


            <div class="container">
              <h5 class="mt-0 mb-1"><a class="text-muted" href="{{ .RelPermalink }}">{{.Title}}</a></h5>
              <span class="mb-2 badge badge-secondary">发布时间：{{ .Date.Format .Site.Params.Dateformat }}</span>
              <div class=" row">
                <div class="col-6">
                  <p class="ml-4 small">
                    <i>   {{ .Description }} </i>
                  </p>
                </div>

              </div>
              <div class="row">
                <div class="col-sm-9 ">
                  <p class="ml-3">
                    {{ .Summary }}
                  </p>
                 
                </div>
                <div class="col-sm-3">
                  <a class="text-muted" href="{{ .RelPermalink }}">更多…</a>
                </div>
              </div>
            </div>

          </div>

        </li>
        {{ end }}
        {{ end }}
      </ul>
      
    </div>

  </div>
</div>
{{- end -}}