asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Added post sharing options.

Browse source 
Also added a license statement at the bottom of the posts.
This commit is contained in:
Cotes Chung 2020-02-17 03:01:48 +08:00
parent 2ad56cf249
commit 840eab9566
11 changed files with 219 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
_data/share.yml Normal file
View file

@ -0,0 +1,29 @@
# Sharing options at the bottom of the post.
# Icons from <https://fontawesome.com/>
#
# v2.1
# https://github.com/cotes2020/jekyll-theme-chirpy
# © 2020 Cotes Chung
# MIT Licensed
label: "Share"
platforms:
-
type: Twitter
icon: "fab fa-twitter"
link: "https://twitter.com/intent/tweet?text=TITLE&url=URL"
-
type: Facebook
icon: "fab fa-facebook-square"
link: "https://www.facebook.com/sharer/sharer.php?title=TITLE&u=URL"
-
type: Telegram
icon: "fab fa-telegram"
link: "https://telegram.me/share?text=TITLE&url=URL"
# Uncomment below if you need to.
# -
# type: Weibo
# icon: "fab fa-weibo"
# link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"

28
_includes/post-nav.html Normal file
View file

@ -0,0 +1,28 @@
<!--
Navigation buttons at the bottom of the post.
v2.1
https://github.com/cotes2020/jekyll-theme-chirpy
© 2020 Cotes Chung
MIT License
-->
<div class="post-navigation d-flex justify-content-between">
{% if page.previous.url %}
<a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
<p>{{ page.previous.title }}</p>
{% else %}
<a href="javascript:;" class="btn btn-outline-primary disabled">
<p>-</p>
{% endif %}
</a>
{% if page.next.url %}
<a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
<p>{{ page.next.title }}</p>
{% else %}
<a href="javascript:;" class="btn btn-outline-primary disabled">
<p>-</p>
{% endif %}
</a>
</div>

28
_includes/post-sharing.html Normal file
View file

@ -0,0 +1,28 @@
<!--
Post sharing snippet
v2.1
https://github.com/cotes2020/jekyll-theme-chirpy
© 2019 Cotes Chung
Published under the MIT License
-->
<div class="share-wrapper">
<span class="share-label ml-1 mr-1">{{ site.data.share.label }}</span>
<span class="share-icon">
{% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
{% assign url = page.url | relative_url | prepend: site.url %}
{% for share in site.data.share.platforms %}
{% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
<a href="{{ link }}" data-toggle="tooltip" data-placement="top"
title="{{ share.type }}" target="_blank">
<i class="fa-fw {{ share.icon }} mr-1"></i>
</a>
{% endfor %}
<i class="fa-fw fas fa-link mr-1 small" onclick="copyLink()"
data-toggle="tooltip" data-placement="top" title="Copy link"></i>
</span>
</div>

2
_includes/related-posts.html
View file

@ -43,7 +43,7 @@
{% assign score_list = score_list | sort | reverse %}
{% assign count = 0 %}
<div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2">
<h3 class="pt-2 mt-1 mb-4" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
<h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
<div class="card-deck mb-4">
{% for score_item in score_list %}
{% assign data = score_item | split: ":" %}

52
_layouts/post.html
View file

@ -66,10 +66,11 @@ layout: default
{% endif %}
</div>
<div class="post-tail text-muted">
<div class="post-tail-wrapper text-muted">
<!-- Tags -->
{% if page.tags.size > 0 %}
<div class="mb-4">
<div class="pt-5">
{% for tag in page.tags %}
<a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase | url_encode }}/"
class="post-tag no-text-decoration" >
@ -78,9 +79,31 @@ layout: default
{% endfor %}
</div>
{% endif %}
<div class="post-tail-bottom
d-flex justify-content-between align-items-center pt-5 pb-2">
{% if site.data.license.type %}
<div class="license-wrapper">
<span class="license-text ml-1 mr-1">This post is licensed under
<a href="{{ site.data.license.link }}">
{{ site.data.license.type }}
{% for icon in site.data.license.icons %}
<i class="{{ icon }}"></i>
{% endfor %}
</a>
</span>
</div>
{% endif %}
{% include post-sharing.html %}
</div><!-- .post-tail-bottom -->
</div><!-- div.post-tail -->
</div> <!-- .post -->
</div> <!-- #post-wrapper -->
{% include panel.html %}
@ -91,31 +114,14 @@ layout: default
<div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
{% include related-posts.html %}
<div class="post-navigation d-flex justify-content-between">
{% if page.previous.url %}
<a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
<p>{{ page.previous.title }}</p>
{% else %}
<a href="javascript:;" class="btn btn-outline-primary disabled">
<p>-</p>
{% endif %}
</a>
{% include post-nav.html %}
{% if page.next.url %}
<a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
<p>{{ page.next.title }}</p>
{% else %}
<a href="javascript:;" class="btn btn-outline-primary disabled">
<p>-</p>
{% if site.disqus.comments and page.comments %}
{% include disqus.html %}
{% endif %}
</a>
</div> <!-- div.post-navigation -->
{% if site.disqus.comments and page.comments %}
{% include disqus.html %}
{% endif %}
</div> <!-- .pl-1 pr-1 -->

1
assets/css/_dark/dark-main.scss
View file

@ -45,6 +45,7 @@
--tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */
--tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
--footnote-target-bg: rgb(63, 81, 181);
--btn-sharing: #6c757d;
hr {
border-color: var(--main-border);

6
assets/css/main.scss
View file

@ -720,6 +720,7 @@ p>a, span>a,
.post a:hover code,
footer a:hover,
#post-wrapper .post-content a:hover,
.license-wrapper .license-text a:hover,
#page .post-content a:hover,
#access-lastmod a:hover {
color: #d2603a;
@ -798,11 +799,14 @@ table tbody td {
background: var(--tag-bg, rgba(0, 0, 0, 0.075));
border-radius: .34rem;
padding: 0 .4rem;
margin: 0 .1rem;
color: #818182;
line-height: 1.6rem;
}
.post-tag:not(:first-child) {
margin-left: .2rem;
}
.tag:hover,
.post-tag:hover {
background: var(--tag-hover, rgb(222, 226, 230));

77
assets/css/post.scss
View file

@ -21,7 +21,7 @@
transform: translateX(-50%);
}
.post-tail {
.post-tail-wrapper {
margin-top: 3.5rem;
border-bottom: 1px double var(--main-border, #e9ecef);
font-size: 0.85rem;
@ -196,6 +196,80 @@
min-height: 2rem;
}
.post-tail-bottom a {
color: inherit;
}
.share-wrapper a:hover,
.share-wrapper i:hover {
text-decoration: none;
color: var(--link-color, #2a408e)!important;
}
.share-wrapper {
vertical-align: middle;
user-select: none;
}
.share-label {
font-family: 'Oswald', sans-serif;
}
.share-label::after {
content: ":";
}
.share-wrapper .share-icon {
font-size: 1.2rem;
}
.share-wrapper .share-icon .fab.fa-twitter {
color: var(--btn-sharing, rgba(29,161,242,1.00));
}
.share-wrapper .share-icon .fab.fa-facebook-square {
color: var(--btn-sharing, rgb(66, 95, 156));
}
.share-wrapper .share-icon .fab.fa-telegram {
color: var(--btn-sharing, rgb(39, 159, 217));
}
.share-wrapper .share-icon .fab.fa-weibo {
color: var(--btn-sharing, rgb(229, 20, 43));
}
.share-wrapper .fas.fa-link {
color: var(--btn-sharing, rgb(171, 171, 171));
}
.license-wrapper .license-text>a {
font-weight: 600;
}
.license-wrapper {
line-height: 1.2rem;
}
.license-wrapper i {
font-weight: 400;
}
.license-wrapper span:last-child {
font-size: .85rem;
}
@media all and (max-width: 576px) {
.post-tail-bottom {
-ms-flex-wrap: wrap!important;
flex-wrap: wrap!important;
}
.post-tail-bottom>div:first-child {
margin-bottom: 1rem;
}
}
@media all and (max-width: 768px) {
.post img {
max-width: calc(100% + 1rem);
@ -241,6 +315,7 @@
margin-left: -.5rem;
margin-right: -.5rem;
}
}
/*

19
assets/js/_src/_commons/copy-link.js Normal file
View file

@ -0,0 +1,19 @@
/*
* Copy current page url to clipboard.
* v2.1
* https://github.com/cotes2020/jekyll-theme-chirpy
* © 2020 Cotes Chung
* MIT License
*/
function copyLink() {
var url = window.location.href;
var $temp = $("<input>");
$("body").append($temp);
$temp.val(url).select();
document.execCommand("copy");
$temp.remove();
alert("Link copied successfully!");
}

1
assets/js/dist/_commons/copy-link.min.js vendored Normal file
View file

@ -0,0 +1 @@
function copyLink(){var a=window.location.href;var b=$("<input>");$("body").append(b);b.val(a).select();document.execCommand("copy");b.remove();alert("Link copied successfully!")};

3
assets/js/dist/commons.js vendored
View file

@ -9,4 +9,5 @@
{% include_relative _commons/sidebar.min.js %}
{% include_relative _commons/topbar-switch.min.js %}
{% include_relative _commons/topbar-title.min.js %}
{% include_relative _commons/tooltip.min.js %}
{% include_relative _commons/tooltip.min.js %}
{% include_relative _commons/copy-link.min.js %}