Add share buttons below post

This commit is contained in:
BBaoVanC 2022-04-30 21:23:45 -05:00
parent effd3a265b
commit 72ebcf134a
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
3 changed files with 78 additions and 1 deletions

View File

@ -274,6 +274,29 @@
} }
/* Social media share buttons */
.share-buttons {
background: var(--background-2);
margin: 25px 0;
padding: 8px 0;
border-radius: 8px;
display: flex;
gap: 8px;
justify-content: center;
}
.share-buttons a {
background-color: var(--background-4);
padding: 4px;
border-radius: 8px;
}
.share-buttons svg {
width: 32px;
height: 32px;
}
/* Back to top */ /* Back to top */
#back-to-top { #back-to-top {
position: fixed; position: fixed;

View File

@ -32,6 +32,8 @@
{{ .Content }} {{ .Content }}
</div> </div>
{{ partial "series-box.html" . }}
{{ if or .NextInSection .PrevInSection }} {{ if or .NextInSection .PrevInSection }}
<div class="prevnext"> <div class="prevnext">
{{ with .NextInSection }} {{ with .NextInSection }}
@ -62,7 +64,9 @@
</div> </div>
{{ end }} {{ end }}
{{ partial "series-box.html" . }} {{ if .Site.Params.shareButtons }}
{{ partial "share.html" . }}
{{ end }}
{{ $related := .Site.RegularPages.Related . | first 10 }} {{ $related := .Site.RegularPages.Related . | first 10 }}
{{ with $related }} {{ with $related }}

View File

@ -0,0 +1,50 @@
<div class="share-buttons">
{{ if .Site.Params.shareButtons.twitter }}
<a class="twitter-share"
target="_blank"
rel="noopener"
href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}&via=bbaovanc">
{{- partial "icon.html" "twitter" -}}
</a>
{{ end }}
{{ if .Site.Params.shareButtons.facebook }}
<a class="facebook-share"
target="_blank"
rel="noopener"
href="https://www.facebook.com/sharer.php?u={{ .Permalink }}">
{{- partial "icon.html" "facebook" -}}
</a>
{{ end }}
{{ if .Site.Params.shareButtons.linkedin }}
<a class="linkedin-share"
target="_blank"
rel="noopener"
href="https://www.linkedin.com/sharing/share-offsite/?url={{ .Permalink }}">
{{- partial "icon.html" "linkedin" -}}
</a>
{{ end }}
{{ if .Site.Params.shareButtons.reddit }}
<a class="reddit-share"
target="_blank"
rel="noopener"
href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}">
{{- partial "icon.html" "reddit" -}}
</a>
{{ end }}
{{/* Telegram icon doesn't have `viewbox` set, which breaks the sizing.
https://stackoverflow.com/q/72073399/19003757
https://github.com/michaelampr/jam/issues/39
{{ if .Site.Params.shareButtons.telegram }}
<a class="telegram-share"
target="_blank"
rel="noopener"
href="https://t.me/share/url?url={{ .Permalink }}&text={{ .Title }}">
{{- partial "icon.html" "telegram" -}}
</a>
{{ end }}
*/}}
</div>