feat(comments): DisqusJS integration (#307)
* add comment provider: DisqusJS * Simplify `if` condition, and format code * Load disqusjs.scss only when it's enabled * Use `let` instead of `var` Co-authored-by: sspirits <admin@lv5.moe> Co-authored-by: Jimmy Cai <github@jimmycai.com>
This commit is contained in:
SSpirits
GitHub
parent
90b6baccc1
commit
9f734a0647
394
assets/scss/partials/comments/disqusjs.scss
Normal file
394
assets/scss/partials/comments/disqusjs.scss
Normal file
@ -0,0 +1,394 @@
|
|||||||
|
.disqus-container {
|
||||||
|
background-color: var(--card-background);
|
||||||
|
border-radius: var(--card-border-radius);
|
||||||
|
box-shadow: var(--shadow-l1);
|
||||||
|
padding: var(--card-padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs * {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #076dd0
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-hide {
|
||||||
|
display: none!important
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: .5
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs #dsqjs-msg {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-size: 14px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs #dsqjs-msg .dsqjs-msg-btn {
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-bullet {
|
||||||
|
line-height: 1.4;
|
||||||
|
margin: 0 2px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-bullet:after {
|
||||||
|
color: #c2c6cc;
|
||||||
|
content: "·";
|
||||||
|
font-weight: 700
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-clearfix:after,#dsqjs .dsqjs-clearfix:before {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
line-height: 0;
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-nav {
|
||||||
|
position: relative;
|
||||||
|
margin: 0 0 20px;
|
||||||
|
border-bottom: 2px solid #e7e9ee
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs ol,#dsqjs ul {
|
||||||
|
list-style: none;
|
||||||
|
list-style-type: none
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-no-comment {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
word-wrap: break-word;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #2a2e2e;
|
||||||
|
margin-bottom: 6px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-nav-tab {
|
||||||
|
float: left;
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 12px 8px;
|
||||||
|
color: #656c7a;
|
||||||
|
display: block;
|
||||||
|
margin: 0 15px 0 0;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
position: relative;
|
||||||
|
transition: all .2s ease-in-out
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-nav-tab:last-child {
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-tab-active {
|
||||||
|
color: #2a2e2e
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-tab-active>span:after {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #076dd0!important;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -5px;
|
||||||
|
left: 0;
|
||||||
|
right: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-list .dsqjs-post-item {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 16px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-list .dsqjs-post-avatar {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
position: relative;
|
||||||
|
background: #dbdfe4;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
border-radius: 4px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-list .dsqjs-post-avatar img {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
display: block;
|
||||||
|
border-radius: 4px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-list .dsqjs-post-header {
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 3px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-list .dsqjs-post-header .dsqjs-post-author {
|
||||||
|
color: #656c7a;
|
||||||
|
font-weight: 700
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-list .dsqjs-post-header .dsqjs-admin-badge {
|
||||||
|
color: #fff;
|
||||||
|
background: #687a86;
|
||||||
|
padding: 1px 3px;
|
||||||
|
margin-left: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
left: 1px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-list .dsqjs-post-header .dsqjs-meta {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #656c7a
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-body {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.5;
|
||||||
|
word-wrap: break-word;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #2a2e2e
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-body code {
|
||||||
|
padding: .2em .4em;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 85%;
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: inherit;
|
||||||
|
border-radius: 3px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-body pre {
|
||||||
|
padding: .5em;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 85%;
|
||||||
|
line-height: 1.45;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
margin: .5em 0
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-body blockquote {
|
||||||
|
padding: 0 .8em;
|
||||||
|
margin: .5em 0;
|
||||||
|
color: #6a737d;
|
||||||
|
border-left: .25em solid #dfe2e5
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-body p:last-child {
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-list.dsqjs-children>li {
|
||||||
|
margin-left: 30px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-list.dsqjs-children .dsqjs-post-avatar img {
|
||||||
|
width: 38px;
|
||||||
|
height: 38px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-load-more {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
padding: 11px 14px;
|
||||||
|
margin: 0 0 24px;
|
||||||
|
background: #687a86;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-load-more:hover {
|
||||||
|
opacity: .8
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs footer {
|
||||||
|
text-align: right;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
border-top: 2px solid #e7e9ee;
|
||||||
|
margin-top: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #555
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-disqus-logo {
|
||||||
|
background-image: url(https://c.disquscdn.com/next/embed/assets/img/sprite.654110a9206fd22f08cca0798e34a65e.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: inline-block;
|
||||||
|
background-size: 86px 40.5px;
|
||||||
|
height: 16.5px;
|
||||||
|
width: 86px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-order {
|
||||||
|
display: flex;
|
||||||
|
float: right;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 12px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-order-radio {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-order-radio:checked+.dsqjs-order-label {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #888
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-order-label {
|
||||||
|
display: block;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0 5px;
|
||||||
|
background-color: #dcdcdc;
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs p.dsqjs-has-more {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
margin-left: 48px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 15px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs p.dsqjs-has-more a.dsqjs-has-more-btn {
|
||||||
|
color: #656c7a;
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
#dsqjs .dsqjs-post-list.dsqjs-children>li {
|
||||||
|
margin-left:48px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-list .dsqjs-post-avatar {
|
||||||
|
margin-right: 12px
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-list .dsqjs-post-item {
|
||||||
|
margin-bottom: 20px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
#dsqjs .dsqjs-post-list.dsqjs-children>li {
|
||||||
|
margin-left:60px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-scheme="light"] {
|
||||||
|
#dsqjs .dsqjs-disqus-logo {
|
||||||
|
background-position: 0 -7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-scheme="dark"] {
|
||||||
|
#dsqjs {
|
||||||
|
--t-s: rgba(255,255,255,0.9);
|
||||||
|
--alt: #3e4b5e;
|
||||||
|
--link-hover: #47a2e0;
|
||||||
|
--hover-bg: #3e4b5e;
|
||||||
|
--tag: #3e4b5e;
|
||||||
|
--border: #435266;
|
||||||
|
--pre: #3c495b;
|
||||||
|
--c-bg: #2f3947;
|
||||||
|
--code: #c3c7cb;
|
||||||
|
--kbd: #4e5f77;
|
||||||
|
--hl: #abb2bf;
|
||||||
|
--hlc: #808895;
|
||||||
|
--hlk: #c678dd;
|
||||||
|
--hln: #e06c75;
|
||||||
|
--hll: #56b6c2;
|
||||||
|
--hls: #98c379;
|
||||||
|
--hlt: #e6c07b;
|
||||||
|
--hlv: #d19a66;
|
||||||
|
--bg: #181c27;
|
||||||
|
--main: #252d38;
|
||||||
|
--t: rgba(255,255,255,0.86);
|
||||||
|
--t-l: rgba(255,255,255,0.66);
|
||||||
|
--logo: #fff;
|
||||||
|
--link: #38a3fd;
|
||||||
|
--title: rgba(255,255,255,0.92);
|
||||||
|
--fab: #364151;
|
||||||
|
--shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#disqus_thread {
|
||||||
|
color: var(--body-text-color)
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs #dsqjs-msg {
|
||||||
|
color: var(--t)
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs a {
|
||||||
|
color:var(--link)
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs a:focus,#dsqjs a:hover {
|
||||||
|
color: var(--link-hover)
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-disqus-logo {
|
||||||
|
background-position: 0 -24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-nav,#dsqjs footer {
|
||||||
|
border-color: var(--hlc)
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-load-more,#dsqjs .dsqjs-load-more:hover,#dsqjs .dsqjs-nav-tab,#dsqjs .dsqjs-no-comment,#dsqjs .dsqjs-post-content {
|
||||||
|
color: var(--t)
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-order-label {
|
||||||
|
background-color: var(--hlc)
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-order-radio:checked+.dsqjs-order-label {
|
||||||
|
background-color: var(--kbd)
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-tab-active>span:after {
|
||||||
|
background-color: #2e9fff
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-footer,#dsqjs .dsqjs-meta {
|
||||||
|
color: var(--t-l)
|
||||||
|
}
|
||||||
|
|
||||||
|
#dsqjs .dsqjs-post-body blockquote {
|
||||||
|
border-color: var(--border)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -53,6 +53,13 @@ params:
|
|||||||
enabled: true
|
enabled: true
|
||||||
provider: disqus
|
provider: disqus
|
||||||
|
|
||||||
|
disqusjs:
|
||||||
|
shortname:
|
||||||
|
apiUrl:
|
||||||
|
apiKey:
|
||||||
|
admin:
|
||||||
|
adminLabel:
|
||||||
|
|
||||||
utterances:
|
utterances:
|
||||||
repo:
|
repo:
|
||||||
issueTerm: pathname
|
issueTerm: pathname
|
||||||
|
|||||||
61
layouts/partials/comments/provider/disqusjs.html
Normal file
61
layouts/partials/comments/provider/disqusjs.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
{{- $pc := .Site.Config.Privacy.Disqus -}}
|
||||||
|
{{- $disqusjs := .Site.Params.Comments.disqusjs -}}
|
||||||
|
{{- if and (not $pc.Disable) (and $disqusjs.Shortname $disqusjs.ApiKey) -}}
|
||||||
|
|
||||||
|
{{- $style := resources.Get "scss/partials/comments/disqusjs.scss" | resources.ToCSS | minify -}}
|
||||||
|
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
|
||||||
|
|
||||||
|
<div class="disqus-container">
|
||||||
|
<div id="disqus_thread"></div>
|
||||||
|
<script type="application/javascript">
|
||||||
|
let disqusjs;
|
||||||
|
function loadDisqusJS() {
|
||||||
|
disqusjs = new DisqusJS({
|
||||||
|
shortname: {{ $disqusjs.Shortname }},
|
||||||
|
siteName: {{ .Site.Title }},
|
||||||
|
apikey: {{ $disqusjs.ApiKey }},
|
||||||
|
{{ with $disqusjs.ApiUrl }}api: {{ . }},{{ end }}
|
||||||
|
{{ with $disqusjs.Admin }}admin: {{ . }},{{ end }}
|
||||||
|
{{ with $disqusjs.AdminLabel }}adminLabel: {{ . }}{{ end }}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function lazyLoadDisqusJS() {
|
||||||
|
if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
|
||||||
|
document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let d = document.createElement('script');
|
||||||
|
d.src = 'https://cdn.jsdelivr.net/npm/disqusjs@1.3/dist/disqus.js';
|
||||||
|
d.async = false;
|
||||||
|
document.body.appendChild(d);
|
||||||
|
d.onload = () => {
|
||||||
|
loadDisqusJS();
|
||||||
|
window.addEventListener('onColorSchemeChange', (e) => {
|
||||||
|
if (disqusjs) {
|
||||||
|
loadDisqusJS();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let runningOnBrowser = typeof window !== "undefined";
|
||||||
|
let isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent);
|
||||||
|
let supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
|
||||||
|
|
||||||
|
if (!isBot && supportsIntersectionObserver) {
|
||||||
|
let disqus_observer = new IntersectionObserver(function(entries) {
|
||||||
|
if (entries[0].isIntersecting) {
|
||||||
|
lazyLoadDisqusJS();
|
||||||
|
disqus_observer.disconnect();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
disqus_observer.observe(document.getElementById('disqus_thread'));
|
||||||
|
} else {
|
||||||
|
lazyLoadDisqusJS();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
||||||
|
</div>
|
||||||
|
{{- end -}}
|
||||||
Loading…
Reference in New Issue
Block a user