add pictures style
This commit is contained in:
FarseaSH
parent
5cc4be3e19
commit
24dca41afa
4 changed files with 55 additions and 36 deletions
|
|
@ -18,14 +18,10 @@ tags:
|
|||
|
||||
# 附加信息（选填1项或者不填写）
|
||||
# 附加信息类型1:单个图片
|
||||
pic:
|
||||
|
||||
# 附加信息类型2:图片组
|
||||
pic_set:
|
||||
pictures:
|
||||
-
|
||||
-
|
||||
|
||||
# 附加信息类型3:网页链接
|
||||
# 附加信息类型2:网页链接
|
||||
# link：必填，网页链接；
|
||||
# link_text：必填，链接显示的文字；
|
||||
# link_logo：选填，网页logo，现在支持部分网站自动找到对应图标，无需自己添加图标
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
<!-- START -->
|
||||
<div class="pic-grid">
|
||||
<!-- todo change display style for 2 * 2 -->
|
||||
{{ $num_per_row := 3}}
|
||||
{{ $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">
|
||||
{{ 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="img-container">
|
||||
<a data-src="{{ $a }}" data-fancybox="gallery">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="moment-row">
|
||||
|
||||
<div class="pure-g">
|
||||
<!-- 时间 -->
|
||||
<!-- time -->
|
||||
<div class="pure-u-1 pure-u-sm-1-3">
|
||||
<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)
|
||||
|
|
@ -10,17 +10,17 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 正文 -->
|
||||
<!-- moment-content -->
|
||||
<div class="pure-u-1 pure-u-sm-2-3">
|
||||
<div class="moment-content">
|
||||
<!-- 置顶标签 -->
|
||||
<!-- top mark -->
|
||||
{{ if gt .Params.top 0}}
|
||||
<div class="top-mark" style="position: absolute; right: 5%;">
|
||||
<i class="fas fa-bookmark" style="color: #e76b4f;"></i>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<!-- 抬头 -->
|
||||
<!-- user info -->
|
||||
<div class="user-info">
|
||||
<div class="avatar-block">
|
||||
{{ with .Params.avatar }}
|
||||
|
|
@ -39,46 +39,65 @@
|
|||
<div>
|
||||
{{ $tags_filtered := slice}}
|
||||
{{ with .Params.tags }}
|
||||
{{ range . }}
|
||||
{{ with .}}
|
||||
{{ $tags_filtered = $tags_filtered | append . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ range . }}
|
||||
{{ with .}}
|
||||
{{ $tags_filtered = $tags_filtered | append . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ with $tags_filtered }}
|
||||
{{ range . }}<span class="tag text-muted">{{ . }}</span>{{ end }}
|
||||
{{ range . }}<span class="tag text-muted">{{ . }}</span>{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 抬头后面内容右平移5px，与头像兼容显得自然 -->
|
||||
<div style="padding-left: 5px; padding-right: 5px;">
|
||||
<!-- 文字 -->
|
||||
<!-- content -->
|
||||
<div class="context">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
<!-- 图片 -->
|
||||
|
||||
<!-- add-on info 1: pictures -->
|
||||
<!-- single picture (old version)-->
|
||||
{{ 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 }}
|
||||
|
||||
<!-- 图片集 -->
|
||||
<!-- multiple pictures (old version) -->
|
||||
{{ $pic_set_filtered := slice}}
|
||||
{{ with .Params.pic_set }}
|
||||
{{ range . }}
|
||||
{{ with .}}
|
||||
{{ $pic_set_filtered = $pic_set_filtered | append . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ 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 -->
|
||||
<!-- new pictures API (combine single & multiple pictures)-->
|
||||
{{ $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_logo := .Params.link_logo }}
|
||||
{{ $link_text := .Params.link_text }}
|
||||
|
|
@ -88,13 +107,12 @@
|
|||
$.Site.BaseURL)}}
|
||||
{{ end }}
|
||||
|
||||
<!-- 附注信息 -->
|
||||
<!-- Note info -->
|
||||
<div class="moment-note">
|
||||
<p class="note">{{ .Date.Format "15:04" }} {{ .Params.note }}</p>
|
||||
<div style="padding-right: 12px;"><i class="far fa-heart"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分隔线 -->
|
||||
<hr style="clear: both">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -169,8 +169,8 @@ p{
|
|||
}
|
||||
|
||||
/* 图片 */
|
||||
.pic1{
|
||||
max-width: 80%;
|
||||
.single-pic{
|
||||
max-width: 65%;
|
||||
max-height: 250px;
|
||||
padding-bottom:10px;
|
||||
margin-top: 5px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue