zhao/hugo-theme-moments
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add pic grid and basic pure css support

Browse source
This commit is contained in:
FarseaSH 2021-09-01 22:36:56 +08:00
parent 5689f4355b
commit f52ff6f27d
6 changed files with 150 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
hugo-theme-moments.code-workspace Normal file
View file

@ -0,0 +1,11 @@
{
"folders": [
{
"path": "../.."
},
{
"path": "."
}
],
"settings": {}
}

2
layouts/index.html
View file

@ -1,5 +1,5 @@
{{ define "main" }}
<div class="container bodycontainer">
<div class="container">
{{ $paginator := .Paginate ((where .Site.RegularPages "Section" "moments").ByParam "top") }}
{{ range $paginator.Pages }}
{{ partial "row.html" . }}

7
layouts/partials/head.html
View file

@ -1,9 +1,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
<!-- 点赞 -->
<link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.min.css" rel="stylesheet">
@ -34,5 +34,8 @@
<!-- fancybox css (js in the end before the body closing tag) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>
<!-- pure.css -->
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<!-- website title -->
<title>{{ .Site.Params.title }}</title>

42
layouts/partials/pic_set.html
View file

@ -1,33 +1,17 @@
<!-- START -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<div class="pic-grid">
<!-- todo change display style for 2 * 2 -->
<div class="pure-g">
{{ range $num, $a := .pic_set }}
{{if eq $num 0 }}
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
{{ else }}
<li data-target="#carouselExampleIndicators" data-slide-to="{{$num}}"></li>
{{ end }}
{{end}}
</ol>
<div class="carousel-inner">
{{range $num,$a := .pic_set}}
{{if eq $num 0 }}
<div class="carousel-item active">
<img src="{{$a}}" class="d-block w-100 pic-in-set" alt="{{add $num 1}}" data-fancybox="gallery">
</div>
{{else}}
<div class="carousel-item">
<img src="{{$a}}" class="d-block w-100 pic-in-set" alt="{{add $num 1}}" data-fancybox="gallery">
</div>
{{end}}
{{end}}
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<div class="pure-u-1-3">
<div class="add-padding">
<div class="img-container">
<a data-src="{{ $a }}" data-fancybox="gallery">
<img src="{{ $a }}" alt="pictures"/>
</a>
</div>
</div>
</div>
{{ end }}
</div>
</div>

22
layouts/partials/row.html
View file

@ -1,12 +1,20 @@
<div class="row">
<div class="moment-row">
<div class="pure-g">
<!-- 时间 -->
<div class="col-sm-4 time">
<h2>{{ .Date.Format "Jan 2"}}{{ if in (slice 1 21 31) .Date.Day}}st{{ else if in (slice 2 22) .Date.Day}}nd{{ else if in (slice 3 23) .Date.Day}}rd{{ else }}th{{ end }}</h2>
<!-- <div class="pure-u-1 pure-u-sm-1-3"> -->
<div class="pure-u-1-3">
<div class="time">
<h2>{{ .Date.Format "Jan 2"}}{{ if in (slice 1 21 31) .Date.Day}}st{{ else if in (slice 2 22)
.Date.Day}}nd{{ else if in (slice 3 23) .Date.Day}}rd{{ else }}th{{ end }}</h2>
<h4>{{ .Date.Format "2006"}}</h4>
</div>
</div>
<!-- 正文 -->
<div class="col-sm-8">
<!-- <div class="pure-u-1 pure-u-sm-1-3"> -->
<div class="pure-u-2-3">
<div class="moment-content">
<!-- 置顶标签 -->
{{ if gt .Params.top 0}}
<div class="top-mark" style="position: absolute; right: 5%;">
@ -77,7 +85,8 @@
{{ $link_text := .Params.link_text }}
{{ with .Params.link }}
{{ partial "link-block.html" (dict "logo" $link_logo "a" $link_link "word" $link_text "baseurl" $.Site.BaseURL)}}
{{ partial "link-block.html" (dict "logo" $link_logo "a" $link_link "word" $link_text "baseurl"
$.Site.BaseURL)}}
{{ end }}
<!-- 附注信息 -->
@ -92,3 +101,6 @@
<hr style="clear: both">
</div>
</div>
</div>
</div>

32
static/css/style.css
View file

@ -14,11 +14,14 @@ body{
}
}
.bodycontainer{
.container{
max-width: 760px;
/* padding-right: 80px; */
margin: auto;
}
.moment-content{
position: relative;
}
/* 时间 */
.time{
text-align: right;
@ -78,14 +81,27 @@ body{
margin-top: 5px;
}
/* 图片集 */
#carouselExampleIndicators{
width: 80%;
padding-bottom:10px;
margin-top: 5px;
.pic-grid{
max-width: 80%;
}
.pic-in-set{
height: 250px;
.pic-grid .img-container{
padding-top: 50%;
padding-bottom: 50%;
position: relative;
height: 0px;
}
.pic-grid img{
object-fit: cover;
height: 100%;
width: 100%;
position: absolute;
top: 0
}
.pic-grid .add-padding{
padding: 2.5px;
}
/* 内容附带的超链接 */