add pic grid and basic pure css support
This commit is contained in:
FarseaSH
parent
5689f4355b
commit
f52ff6f27d
6 changed files with 150 additions and 124 deletions
11
hugo-theme-moments.code-workspace
Normal file
11
hugo-theme-moments.code-workspace
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"folders": [
|
||||||
|
{
|
||||||
|
"path": "../.."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"settings": {}
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="container bodycontainer">
|
<div class="container">
|
||||||
{{ $paginator := .Paginate ((where .Site.RegularPages "Section" "moments").ByParam "top") }}
|
{{ $paginator := .Paginate ((where .Site.RegularPages "Section" "moments").ByParam "top") }}
|
||||||
{{ range $paginator.Pages }}
|
{{ range $paginator.Pages }}
|
||||||
{{ partial "row.html" . }}
|
{{ partial "row.html" . }}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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://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://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">
|
<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) -->
|
<!-- 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"/>
|
<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 -->
|
<!-- website title -->
|
||||||
<title>{{ .Site.Params.title }}</title>
|
<title>{{ .Site.Params.title }}</title>
|
||||||
|
|
@ -1,33 +1,17 @@
|
||||||
<!-- START -->
|
<!-- START -->
|
||||||
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
|
<div class="pic-grid">
|
||||||
<ol class="carousel-indicators">
|
<!-- todo change display style for 2 * 2 -->
|
||||||
{{range $num,$a := .pic_set}}
|
<div class="pure-g">
|
||||||
{{if eq $num 0 }}
|
{{ range $num, $a := .pic_set }}
|
||||||
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
|
<div class="pure-u-1-3">
|
||||||
{{ else }}
|
<div class="add-padding">
|
||||||
<li data-target="#carouselExampleIndicators" data-slide-to="{{$num}}"></li>
|
<div class="img-container">
|
||||||
{{ end }}
|
<a data-src="{{ $a }}" data-fancybox="gallery">
|
||||||
{{end}}
|
<img src="{{ $a }}" alt="pictures"/>
|
||||||
</ol>
|
</a>
|
||||||
<div class="carousel-inner">
|
</div>
|
||||||
{{range $num,$a := .pic_set}}
|
</div>
|
||||||
{{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>
|
</div>
|
||||||
{{else}}
|
{{ end }}
|
||||||
<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>
|
</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>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,94 +1,106 @@
|
||||||
<div class="row">
|
<div class="moment-row">
|
||||||
<!-- 时间 -->
|
|
||||||
<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>
|
|
||||||
<h4>{{ .Date.Format "2006"}}</h4>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 正文 -->
|
<div class="pure-g">
|
||||||
<div class="col-sm-8">
|
<!-- 时间 -->
|
||||||
<!-- 置顶标签 -->
|
<!-- <div class="pure-u-1 pure-u-sm-1-3"> -->
|
||||||
{{ if gt .Params.top 0}}
|
<div class="pure-u-1-3">
|
||||||
<div class="top-mark" style="position: absolute; right: 5%;">
|
<div class="time">
|
||||||
<i class="fas fa-bookmark" style="color: #e76b4f;"></i>
|
<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>
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
<!-- 抬头 -->
|
<!-- 正文 -->
|
||||||
<!-- 头像前面margin2px -->
|
<!-- <div class="pure-u-1 pure-u-sm-1-3"> -->
|
||||||
<div style="margin-top: 2px;">
|
<div class="pure-u-2-3">
|
||||||
{{ with .Params.avatar }}
|
<div class="moment-content">
|
||||||
<img src='{{ . }}' class="avatar">
|
<!-- 置顶标签 -->
|
||||||
{{ else }}
|
{{ if gt .Params.top 0}}
|
||||||
<!-- fixme check whether the default avatar path is url or not-->
|
<div class="top-mark" style="position: absolute; right: 5%;">
|
||||||
<img src='{{ $.Site.BaseURL }}/{{ .Site.Params.avatar }}' class="avatar">
|
<i class="fas fa-bookmark" style="color: #e76b4f;"></i>
|
||||||
{{ end }}
|
|
||||||
<div class="intro">
|
|
||||||
{{ with .Params.name }}
|
|
||||||
<h4 class="text-primary name">{{ . }}</h4>
|
|
||||||
{{ else }}
|
|
||||||
<h4 class="text-primary name">{{ .Site.Params.name }}</h4>
|
|
||||||
{{ end }}
|
|
||||||
<div>
|
|
||||||
{{ $tags_filtered := slice}}
|
|
||||||
{{ with .Params.tags }}
|
|
||||||
{{ range . }}
|
|
||||||
{{ with .}}
|
|
||||||
{{ $tags_filtered = $tags_filtered | append . }}
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
{{ with $tags_filtered }}
|
|
||||||
{{ range . }}<span class="tag text-muted">{{ . }}</span>{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 抬头后面内容右平移5px，与头像兼容显得自然 -->
|
|
||||||
<div style="padding-left: 5px; padding-right: 5px;">
|
|
||||||
<!-- 文字 -->
|
|
||||||
<div class="context">
|
|
||||||
{{ .Content }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 图片 -->
|
|
||||||
{{ with .Params.pic }}
|
|
||||||
<img src="{{ . }}" class="img-fluid pic1" alt="Responsive image" data-fancybox="gallery"></img>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
<!-- 图片集 -->
|
|
||||||
{{ $pic_set_filtered := slice}}
|
|
||||||
{{ with .Params.pic_set }}
|
|
||||||
{{ range . }}
|
|
||||||
{{ with .}}
|
|
||||||
{{ $pic_set_filtered = $pic_set_filtered | append . }}
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ with $pic_set_filtered }}
|
|
||||||
{{ partial "pic_set.html" (dict "pic_set" .) }}
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
<!-- todo format the name of this part -->
|
|
||||||
<!-- add-on info 3: link -->
|
|
||||||
{{ $link_link := .Params.link }}
|
|
||||||
{{ $link_logo := .Params.link_logo }}
|
|
||||||
{{ $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)}}
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
<!-- 附注信息 -->
|
<!-- 抬头 -->
|
||||||
<div>
|
<!-- 头像前面margin2px -->
|
||||||
<p class="text-black-50 note">
|
<div style="margin-top: 2px;">
|
||||||
{{ .Date.Format "15:04" }} {{ .Params.note }}
|
{{ with .Params.avatar }}
|
||||||
</p>
|
<img src='{{ . }}' class="avatar">
|
||||||
<i class="far fa-heart" style="float: right; margin-right: 5px; color:#808080"></i>
|
{{ else }}
|
||||||
|
<!-- fixme check whether the default avatar path is url or not-->
|
||||||
|
<img src='{{ $.Site.BaseURL }}/{{ .Site.Params.avatar }}' class="avatar">
|
||||||
|
{{ end }}
|
||||||
|
<div class="intro">
|
||||||
|
{{ with .Params.name }}
|
||||||
|
<h4 class="text-primary name">{{ . }}</h4>
|
||||||
|
{{ else }}
|
||||||
|
<h4 class="text-primary name">{{ .Site.Params.name }}</h4>
|
||||||
|
{{ end }}
|
||||||
|
<div>
|
||||||
|
{{ $tags_filtered := slice}}
|
||||||
|
{{ with .Params.tags }}
|
||||||
|
{{ range . }}
|
||||||
|
{{ with .}}
|
||||||
|
{{ $tags_filtered = $tags_filtered | append . }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ with $tags_filtered }}
|
||||||
|
{{ range . }}<span class="tag text-muted">{{ . }}</span>{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 抬头后面内容右平移5px，与头像兼容显得自然 -->
|
||||||
|
<div style="padding-left: 5px; padding-right: 5px;">
|
||||||
|
<!-- 文字 -->
|
||||||
|
<div class="context">
|
||||||
|
{{ .Content }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图片 -->
|
||||||
|
{{ with .Params.pic }}
|
||||||
|
<img src="{{ . }}" class="img-fluid pic1" alt="Responsive image" data-fancybox="gallery"></img>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- 图片集 -->
|
||||||
|
{{ $pic_set_filtered := slice}}
|
||||||
|
{{ with .Params.pic_set }}
|
||||||
|
{{ range . }}
|
||||||
|
{{ with .}}
|
||||||
|
{{ $pic_set_filtered = $pic_set_filtered | append . }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ with $pic_set_filtered }}
|
||||||
|
{{ partial "pic_set.html" (dict "pic_set" .) }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- todo format the name of this part -->
|
||||||
|
<!-- add-on info 3: link -->
|
||||||
|
{{ $link_link := .Params.link }}
|
||||||
|
{{ $link_logo := .Params.link_logo }}
|
||||||
|
{{ $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)}}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- 附注信息 -->
|
||||||
|
<div>
|
||||||
|
<p class="text-black-50 note">
|
||||||
|
{{ .Date.Format "15:04" }} {{ .Params.note }}
|
||||||
|
</p>
|
||||||
|
<i class="far fa-heart" style="float: right; margin-right: 5px; color:#808080"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分隔线 -->
|
||||||
|
<hr style="clear: both">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 分隔线 -->
|
|
||||||
<hr style="clear: both">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -14,11 +14,14 @@ body{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bodycontainer{
|
.container{
|
||||||
max-width: 760px;
|
max-width: 760px;
|
||||||
/* padding-right: 80px; */
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.moment-content{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
/* 时间 */
|
/* 时间 */
|
||||||
.time{
|
.time{
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
@ -78,14 +81,27 @@ body{
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
/* 图片集 */
|
/* 图片集 */
|
||||||
#carouselExampleIndicators{
|
.pic-grid{
|
||||||
width: 80%;
|
max-width: 80%;
|
||||||
padding-bottom:10px;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pic-in-set{
|
.pic-grid .img-container{
|
||||||
height: 250px;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 内容附带的超链接 */
|
/* 内容附带的超链接 */
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue