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

add pictures style

Browse source
This commit is contained in:
FarseaSH 2021-09-02 21:09:09 +08:00
parent 5cc4be3e19
commit 24dca41afa
4 changed files with 55 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
archetypes/moments.md
View file

@ -18,14 +18,10 @@ tags:
# 附加信息（选填1项或者不填写） # 附加信息（选填1项或者不填写）
# 附加信息类型1:单个图片 # 附加信息类型1:单个图片
pic: pictures:
# 附加信息类型2:图片组
pic_set:
- -
-
# 附加信息类型3:网页链接 # 附加信息类型2:网页链接
# link：必填，网页链接； # link：必填，网页链接；
# link_text：必填，链接显示的文字； # link_text：必填，链接显示的文字；
# link_logo：选填，网页logo，现在支持部分网站自动找到对应图标，无需自己添加图标 # link_logo：选填，网页logo，现在支持部分网站自动找到对应图标，无需自己添加图标

11
layouts/partials/pic_set.html
View file

@ -1,9 +1,14 @@
<!-- START --> <!-- START -->
<div class="pic-grid"> {{ $num_per_row := 3}}
<!-- todo change display style for 2 * 2 --> {{ $max_width := 80}}
{{ if or (eq (len .pic_set) 2) (eq (len .pic_set) 4)}}
{{ $num_per_row = 2}}
{{ $max_width = 53}}
{{ end }}
<div class="pic-grid" style="width: {{ $max_width }}%">
<div class="pure-g"> <div class="pure-g">
{{ range $num, $a := .pic_set }} {{ range $num, $a := .pic_set }}
<div class="pure-u-1-3"> <div class="pure-u-1-{{ $num_per_row }}">
<div class="add-padding"> <div class="add-padding">
<div class="img-container"> <div class="img-container">
<a data-src="{{ $a }}" data-fancybox="gallery"> <a data-src="{{ $a }}" data-fancybox="gallery">

68
layouts/partials/row.html
View file

@ -1,7 +1,7 @@
<div class="moment-row"> <div class="moment-row">
<div class="pure-g"> <div class="pure-g">
<!-- 时间 --> <!-- time -->
<div class="pure-u-1 pure-u-sm-1-3"> <div class="pure-u-1 pure-u-sm-1-3">
<div class="time"> <div class="time">
<div class="month-day">{{ .Date.Format "Jan 2"}}{{ if in (slice 1 21 31) .Date.Day}}st{{ else if in (slice 2 22) <div class="month-day">{{ .Date.Format "Jan 2"}}{{ if in (slice 1 21 31) .Date.Day}}st{{ else if in (slice 2 22)
@ -10,17 +10,17 @@
</div> </div>
</div> </div>
<!-- 正文 --> <!-- moment-content -->
<div class="pure-u-1 pure-u-sm-2-3"> <div class="pure-u-1 pure-u-sm-2-3">
<div class="moment-content"> <div class="moment-content">
<!-- 置顶标签 --> <!-- top mark -->
{{ if gt .Params.top 0}} {{ if gt .Params.top 0}}
<div class="top-mark" style="position: absolute; right: 5%;"> <div class="top-mark" style="position: absolute; right: 5%;">
<i class="fas fa-bookmark" style="color: #e76b4f;"></i> <i class="fas fa-bookmark" style="color: #e76b4f;"></i>
</div> </div>
{{ end }} {{ end }}
<!-- 抬头 --> <!-- user info -->
<div class="user-info"> <div class="user-info">
<div class="avatar-block"> <div class="avatar-block">
{{ with .Params.avatar }} {{ with .Params.avatar }}
@ -39,46 +39,65 @@
<div> <div>
{{ $tags_filtered := slice}} {{ $tags_filtered := slice}}
{{ with .Params.tags }} {{ with .Params.tags }}
{{ range . }} {{ range . }}
{{ with .}} {{ with .}}
{{ $tags_filtered = $tags_filtered | append . }} {{ $tags_filtered = $tags_filtered | append . }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ with $tags_filtered }} {{ with $tags_filtered }}
{{ range . }}<span class="tag text-muted">{{ . }}</span>{{ end }} {{ range . }}<span class="tag text-muted">{{ . }}</span>{{ end }}
{{ end }} {{ end }}
</div> </div>
</div> </div>
</div> </div>
<!-- 抬头后面内容右平移5px，与头像兼容显得自然 -->
<div style="padding-left: 5px; padding-right: 5px;"> <div style="padding-left: 5px; padding-right: 5px;">
<!-- 文字 --> <!-- content -->
<div class="context"> <div class="context">
{{ .Content }} {{ .Content }}
</div> </div>
<!-- 图片 --> <!-- add-on info 1: pictures -->
<!-- single picture (old version)-->
{{ with .Params.pic }} {{ with .Params.pic }}
<img src="{{ . }}" class="img-fluid pic1" alt="Responsive image" data-fancybox="gallery"></img> <img src="{{ . }}" class="single-pic" alt="Responsive image" data-fancybox="gallery"></img>
{{ end }} {{ end }}
<!-- 图片集 --> <!-- multiple pictures (old version) -->
{{ $pic_set_filtered := slice}} {{ $pic_set_filtered := slice}}
{{ with .Params.pic_set }} {{ with .Params.pic_set }}
{{ range . }} {{ range . }}
{{ with .}} {{ with . }}
{{ $pic_set_filtered = $pic_set_filtered | append . }} {{ $pic_set_filtered = $pic_set_filtered | append . }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ with $pic_set_filtered }} {{ with $pic_set_filtered }}
{{ partial "pic_set.html" (dict "pic_set" .) }} {{ partial "pic_set.html" (dict "pic_set" .) }}
{{ end }} {{ end }}
<!-- todo format the name of this part --> <!-- new pictures API (combine single & multiple pictures)-->
<!-- add-on info 3: link --> {{ $pictures_set:= slice}}
{{ with .Params.pictures }}
{{ range . }}
{{ with . }}
{{ $pictures_set = $pictures_set | append . }}
{{ end }}
{{ end }}
{{ end }}
{{ if (eq (len $pictures_set) 1) }}
{{ range $pictures_set }}
<img src="{{ . }}" class="single-pic" alt="Responsive image" data-fancybox="gallery"></img>
{{ end }}
{{ end }}
{{ if (gt (len $pictures_set) 1)}}
{{ partial "pic_set.html" (dict "pic_set" $pictures_set) }}
{{ end }}
<!-- add-on info 2: link -->
{{ $link_link := .Params.link }} {{ $link_link := .Params.link }}
{{ $link_logo := .Params.link_logo }} {{ $link_logo := .Params.link_logo }}
{{ $link_text := .Params.link_text }} {{ $link_text := .Params.link_text }}
@ -88,13 +107,12 @@
$.Site.BaseURL)}} $.Site.BaseURL)}}
{{ end }} {{ end }}
<!-- 附注信息 --> <!-- Note info -->
<div class="moment-note"> <div class="moment-note">
<p class="note">{{ .Date.Format "15:04" }} {{ .Params.note }}</p> <p class="note">{{ .Date.Format "15:04" }} {{ .Params.note }}</p>
<div style="padding-right: 12px;"><i class="far fa-heart"></i></div> <div style="padding-right: 12px;"><i class="far fa-heart"></i></div>
</div> </div>
</div> </div>
<!-- 分隔线 -->
<hr style="clear: both"> <hr style="clear: both">
</div> </div>
</div> </div>

4
static/css/style.css
View file

@ -169,8 +169,8 @@ p{
} }
/* 图片 */ /* 图片 */
.pic1{ .single-pic{
max-width: 80%; max-width: 65%;
max-height: 250px; max-height: 250px;
padding-bottom:10px; padding-bottom:10px;
margin-top: 5px; margin-top: 5px;