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

NEW: experimental comment feature

Browse source
This commit is contained in:
FarseaSH 2023-11-10 23:59:18 +08:00
parent 771105eca7
commit 000a89aca2
5 changed files with 64 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

8
assets/style-refractored.scss
View file

@ -386,6 +386,14 @@ $gray: #919EB1;
cursor: pointer; cursor: pointer;
} }
} }
.comment-btn {
padding-right: 10px;
&:hover {
cursor: pointer;
}
}
} }
// hr // hr

4
layouts/_default/list.html
View file

@ -1,8 +1,8 @@
{{ define "main" }} {{ define "main" }}
<div class="container bodycontainer"> <div class="container bodycontainer">
{{ $paginator := .Paginate ((where $.Site.RegularPages "Section" .Section ).ByParam "top") }} {{ $paginator := .Paginate ((where $.Site.RegularPages "Section" .Section ).ByParam "top") }}
{{ range $paginator.Pages }} {{ range $i, $page := $paginator.Pages }}
{{ partial "row.html" . }} {{ partial "row.html" (dict "page" $page "index" $i) }}
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}

4
layouts/index.html
View file

@ -1,8 +1,8 @@
{{ define "main" }} {{ define "main" }}
<div class="container"> <div class="container">
{{ $paginator := .Paginate (.Site.RegularPages.ByParam "top") }} {{ $paginator := .Paginate (.Site.RegularPages.ByParam "top") }}
{{ range $paginator.Pages }} {{ range $i, $page := $paginator.Pages }}
{{ partial "row.html" . }} {{ partial "row.html" (dict "page" $page "index" $i "site" $.Site) }}
{{ end }} {{ end }}
</div> </div>
{{ if .Site.Params.infiniteScroll }} {{ if .Site.Params.infiniteScroll }}

4
layouts/partials/head.html
View file

@ -58,6 +58,10 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js"></script>
{{ end }} {{ end }}
{{ if $.site.Params.experimental.comment }}
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
{{ end }}
{{ if .Site.Params.features.heti }} {{ if .Site.Params.features.heti }}
<link rel="stylesheet" href="/style/heti.min.css"> <link rel="stylesheet" href="/style/heti.min.css">

67
layouts/partials/row.html
View file

@ -1,3 +1,6 @@
{{ $page := .page }}
{{ $index := .index }}
{{ $site := .site }}
<div class="moment-row"> <div class="moment-row">
<div class="pure-g"> <div class="pure-g">
@ -5,8 +8,8 @@
{{/* time info shown in the left (or above in small screens) */}} {{/* time info shown in the left (or above in small screens) */}}
<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) .Date.Day}}nd{{ else if in (slice 3 23) .Date.Day}}rd{{ else }}th{{ end }}</div> <div class="month-day">{{ $page.Date.Format "Jan 2"}}{{ if in (slice 1 21 31) $page.Date.Day}}st{{ else if in (slice 2 22) $page.Date.Day}}nd{{ else if in (slice 3 23) $page.Date.Day}}rd{{ else }}th{{ end }}</div>
<div class="year">{{ .Date.Format "2006"}}</div> <div class="year">{{ $page.Date.Format "2006"}}</div>
</div> </div>
</div> </div>
@ -14,7 +17,7 @@
<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 */}} {{/* top mark */}}
{{ if gt .Params.top 0}} {{ if gt $page.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>
@ -23,22 +26,22 @@
{{/* user info */}} {{/* user info */}}
<div class="user-info"> <div class="user-info">
<div class="avatar-block"> <div class="avatar-block">
{{ with .Params.avatar }} {{ with $page.Params.avatar }}
<img src='{{ . }}' class="avatar"> <img src='{{ . }}' class="avatar">
{{ else }} {{ else }}
{{/* fixme check whether the default avatar path is url or not--> */}} {{/* fixme check whether the default avatar path is url or not--> */}}
<img src='{{ $.Site.BaseURL }}/{{ .Site.Params.avatar }}' class="avatar"> <img src='{{ $site.BaseURL }}/{{ $page.Site.Params.avatar }}' class="avatar">
{{ end }} {{ end }}
</div> </div>
<div class="intro"> <div class="intro">
{{ with .Params.name }} {{ with $page.Params.name }}
<div class="name">{{ . }}</div> <div class="name">{{ . }}</div>
{{ else }} {{ else }}
<div class="name">{{ .Site.Params.name }}</div> <div class="name">{{ $site.Params.name }}</div>
{{ end }} {{ end }}
<div> <div>
{{ $tags_filtered := slice}} {{ $tags_filtered := slice}}
{{ with .Params.tags }} {{ with $page.Params.tags }}
{{ range . }} {{ range . }}
{{ with .}} {{ with .}}
{{ $tags_filtered = $tags_filtered | append . }} {{ $tags_filtered = $tags_filtered | append . }}
@ -55,14 +58,14 @@
<div style="padding-left: 5px; padding-right: 5px;"> <div style="padding-left: 5px; padding-right: 5px;">
{{/* Main text content */}} {{/* Main text content */}}
{{ if .Site.Params.features.heti }}<div class="context heti">{{ else }}<div class="context">{{ end }} {{ if .Site.Params.features.heti }}<div class="context heti">{{ else }}<div class="context">{{ end }}
{{ .Content }} {{ $page.Content }}
</div> </div>
{{/* add-on info 1: pictures */}} {{/* add-on info 1: pictures */}}
{{/* new pictures API `pictures` (combine single & multiple pictures)*/}} {{/* new pictures API `pictures` (combine single & multiple pictures)*/}}
{{ $pictures_set := slice}} {{ $pictures_set := slice}}
{{ $picture_caption := .Plain}} {{ $picture_caption := $page.Plain}}
{{ with .Params.pictures }} {{ with $page.Params.pictures }}
{{ range . }} {{ range . }}
{{ with . }} {{ with . }}
{{ $pictures_set = $pictures_set | append . }} {{ $pictures_set = $pictures_set | append . }}
@ -70,8 +73,8 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ $video_caption := .Plain}} {{ $video_caption := $page.Plain}}
{{ with .Params.video }} {{ with $page.Params.video }}
<a data-src="{{ . }}" data-fancybox="video-gallery" data-caption={{ $video_caption }}> <a data-src="{{ . }}" data-fancybox="video-gallery" data-caption={{ $video_caption }}>
<video class="video-js" src="{{ . }}"></video> <video class="video-js" src="{{ . }}"></video>
</a> </a>
@ -88,13 +91,13 @@
{{ end }} {{ end }}
{{/* Probably DEPRECATED in the future: single picture (old version API `pic`)*/}} {{/* Probably DEPRECATED in the future: single picture (old version API `pic`)*/}}
{{ with .Params.pic }} {{ with $page.Params.pic }}
<img src="{{ . }}" class="single-pic" alt="Responsive image" data-fancybox="gallery" data-caption={{ $picture_caption }}></img> <img src="{{ . }}" class="single-pic" alt="Responsive image" data-fancybox="gallery" data-caption={{ $picture_caption }}></img>
{{ end }} {{ end }}
{{/* Probably DEPRECATED in the future: multiple pictures (old version API `pic_set`) */}} {{/* Probably DEPRECATED in the future: multiple pictures (old version API `pic_set`) */}}
{{ $pic_set_filtered := slice}} {{ $pic_set_filtered := slice}}
{{ with .Params.pic_set }} {{ with $page.Params.pic_set }}
{{ range . }} {{ range . }}
{{ with . }} {{ with . }}
{{ $pic_set_filtered = $pic_set_filtered | append . }} {{ $pic_set_filtered = $pic_set_filtered | append . }}
@ -108,21 +111,45 @@
{{/* add-on info 2: hyperlink to other resourse (e.g webpage, Netease music, Bilibili Video) */}} {{/* add-on info 2: hyperlink to other resourse (e.g webpage, Netease music, Bilibili Video) */}}
{{ $link_link := .Params.link }} {{ $link_link := $page.Params.link }}
{{ $link_logo := .Params.link_logo }} {{ $link_logo := $page.Params.link_logo }}
{{ $link_text := .Params.link_text }} {{ $link_text := $page.Params.link_text }}
{{ with .Params.link }} {{ with $page.Params.link }}
{{ partial "link-block.html" (dict "logo" $link_logo "a" $link_link "word" $link_text "baseurl" {{ partial "link-block.html" (dict "logo" $link_logo "a" $link_link "word" $link_text "baseurl"
$.Site.BaseURL)}} $.Site.BaseURL)}}
{{ end }} {{ end }}
{{/* Note info shown below the main content */}} {{/* Note info shown below the main content */}}
<div class="moment-note"> <div class="moment-note">
<p class="note">{{ .Date.Format "15:04" }} {{ .Params.note }}</p> <p class="note">{{ $page.Date.Format "15:04" }} {{ $page.Params.note }}</p>
<div class="buttons" style="display: flex;">
{{ if $.site.Params.experimental.comment }}<div class="comment-btn" id="comment-btn-{{ $index }}"><i class="far fa-comment"></i></div>{{ end }}
<div class="like-btn"><i class="far fa-heart"></i></div> <div class="like-btn"><i class="far fa-heart"></i></div>
</div> </div>
</div>
{{ if $.site.Params.experimental.comment }}
<div id="row-comment-{{ $index }}" style="display: none;">
<div id="gitalk-container-{{ $index }}"></div>
</div>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
id: '{{ $page.File }}', // Ensure uniqueness and length less than 50
distractionFreeMode: false // Facebook-like distraction free mode
})
$("#comment-btn-{{ $index }}").on('click', function(){
$("#row-comment-{{ $index }}").slideToggle("slow");
gitalk.render('gitalk-container-{{ $index }}')
});
</script>
{{ end }}
</div> </div>
<hr class="seperating_line"> <hr class="seperating_line">