-
Notifications
You must be signed in to change notification settings - Fork 0
/
single.html
121 lines (112 loc) · 3.99 KB
/
single.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
{{ define "head" }}
<meta name="description" content="{{ .Params.description }}">
<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/single.css">
<!-- fontawesome -->
<script defer src="{{ .Site.Params.staticPath }}/fontawesome-6/all-6.5.1.js"></script>
{{ end }}
{{ define "title" }}
{{.Title }} | {{ .Site.Title }}
{{ end }}
{{ define "main" }}
<section id="single">
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-12 col-md-12 col-lg-9">
<div class="pr-lg-4">
<div class="title mb-5">
<h1 class="text-center mb-4">{{ .Title }}</h1>
<div class="text-center">
{{ .Params.author }}
<small>|</small>
{{ .Date.Format "Jan 2, 2006" }}
<small>|</small>
{{ partial "reading-time.html" . }}
</div>
</div>
{{ if .Params.image }}
<div class="featured-image">
<img class="img-fluid" src="{{ .Params.image }}" alt="{{ .Title }}">
</div>
{{ end }}
<article class="page-content p-2">
{{ .Content | emojify }}
</article>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="sticky-sidebar">
{{ if .Params.toc | default true}}
<aside class="toc">
<h5>
Table Of Contents
</h5>
<div class="toc-content">
{{.TableOfContents}}
</div>
</aside>
{{ end }}
{{ if .Params.tags }}
<aside class="tags">
<h5>Tags</h5>
<ul class="tags-ul list-unstyled list-inline">
{{range .Params.tags}}
<li class="list-inline-item"><a href="{{`tags` | absURL}}/{{.| urlize}}" target="_blank">{{.}}</a></li>
{{end}}
</ul>
</aside>
{{end}}
{{ if .Params.socialShare | default true }}
<aside class="social">
<h5>Social</h5>
<div class="social-content">
<ul class="list-inline">
<li class="list-inline-item text-center">
<a target="_blank" href="https://twitter.com/share?text={{ .Title }}&url={{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
<!-- <i class="fab fa-twitter"></i> -->
<i class="fa-brands fa-square-twitter"></i>
</a>
</li>
<li class="list-inline-item text-center">
<a target="_blank" href="https://api.whatsapp.com/send?text={{ .Title }}: {{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
<!-- <i class="fab fa-whatsapp"></i> -->
<i class="fa-brands fa-square-whatsapp"></i>
</a>
</li>
<li class="list-inline-item text-center">
<a target="_blank" href="mailto:?subject={{ .Title }}&body=Check out this site {{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
<i class="fa fa-envelope"></i>
</a>
</li>
</ul>
</div>
</aside>
{{ end }}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-9 p-4">
{{ template "_internal/disqus.html" . }}
</div>
</div>
</div>
<button class="p-2 px-3" onclick="topFunction()" id="topScroll">
<i class="fas fa-angle-up"></i>
</button>
</section>
<script>
var topScroll = document.getElementById("topScroll");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
topScroll.style.display = "block";
} else {
topScroll.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
{{ end }}