XuxuGood
GitHub
parent
59b7047672
commit
c364229281
|
|
@ -100,7 +100,11 @@ comments:
|
|||
- 6783037F2DF30EAB99F9FC256157D875
|
||||
friends: #md5加密后的小伙伴邮箱
|
||||
- 6783037F2DF30EAB99F9FC256157D875
|
||||
|
||||
# Twikoo
|
||||
# https://twikoo.js.org/
|
||||
twikoo:
|
||||
js: https://cdn.jsdelivr.net/npm/twikoo@1.4.0/dist/twikoo.all.min.js # 建议锁定版本
|
||||
envId: https://xxx # vercel函数
|
||||
|
||||
######## Footer ########
|
||||
footer:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<%
|
||||
function layoutDiv() {
|
||||
var el = '';
|
||||
el += '<div id="twikoo_container"';
|
||||
let cfg = {};
|
||||
if (page.comment_id) {
|
||||
cfg['comment_id'] = page.comment_id;
|
||||
}
|
||||
for (let key of Object.keys(cfg)) {
|
||||
if (cfg[key]) {
|
||||
el += ' ' + key + '="' + cfg[key] + '"';
|
||||
}
|
||||
}
|
||||
el += '><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg></div>';
|
||||
return el;
|
||||
}
|
||||
%>
|
||||
|
||||
<%- layoutDiv() %>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
function load_twikoo() {
|
||||
if (!document.querySelectorAll("#twikoo_container")[0]) return;
|
||||
stellar.loadScript('<%- theme.comments.twikoo.js %>', {defer: true}).then(function () {
|
||||
const el = document.getElementById("twikoo_container");
|
||||
var path = el.getAttribute('comment_id');
|
||||
if (!path) {
|
||||
path = decodeURI(window.location.pathname);
|
||||
}
|
||||
twikoo.init(Object.assign(<%- JSON.stringify(theme.comments.twikoo) %>, {
|
||||
el: '#twikoo_container',
|
||||
path: path,
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
load_twikoo();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
.cmt-body.twikoo
|
||||
--twikoo-lighttext: #ef794f;
|
||||
--twikoo-secondtext: #909094;
|
||||
--twikoo-emoji-background: #f8f8f8;
|
||||
--twikoo-theme: #409eff;
|
||||
margin-top: 1.5rem
|
||||
|
||||
.tk-content
|
||||
.vemoji, .tk-owo-emotion
|
||||
width: unset;
|
||||
border-radius: 0;
|
||||
max-height: 24px;
|
||||
max-width: 100px;
|
||||
|
||||
img
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
border-radius: 8px;
|
||||
|
||||
.OwO
|
||||
.OwO-body
|
||||
background: var(--twikoo-emoji-background) !important;
|
||||
color: var(--text-p1) !important;
|
||||
|
||||
.OwO-items
|
||||
.OwO-item
|
||||
img
|
||||
max-height: 26px;
|
||||
width: unset;
|
||||
|
||||
.twikoo
|
||||
.el-input-group__append, .el-input-group__prepend,
|
||||
.el-input__inner, .el-textarea__inner,
|
||||
.el-button:not(.el-button--primary):not(.el-button--text),
|
||||
.tk-comments-count,
|
||||
.tk-content,
|
||||
.tk-preview-container
|
||||
color: var(--text-p1) !important;
|
||||
|
||||
.el-button:not(.el-button--primary):not(.el-button--text):active,
|
||||
.el-button:not(.el-button--primary):not(.el-button--text):focus,
|
||||
.el-button:not(.el-button--primary):not(.el-button--text):hover
|
||||
color: var(--twikoo-theme) !important;
|
||||
|
||||
.tk-action-icon svg
|
||||
color: var(--text-p1) !important;
|
||||
|
||||
b, strong
|
||||
color: var(--twikoo-lighttext);
|
||||
|
||||
a
|
||||
cursor: pointer
|
||||
|
||||
.tk-time, .tk-extras
|
||||
color: var(--twikoo-secondtext);
|
||||
|
||||
.tk-expand
|
||||
width: auto
|
||||
border: none
|
||||
padding: 6px 2rem
|
||||
border-radius: 4px
|
||||
background: var(--block)
|
||||
color: var(--text-p1)
|
||||
line-height: 2
|
||||
font-size: 14px
|
||||
font-weight: 500
|
||||
trans()
|
||||
|
||||
&:hover
|
||||
background: var(--block-hover)
|
||||
|
||||
.tk-comment
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 1rem
|
||||
border: 1px dashed var(--block-border);
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
background: var(--card);
|
||||
|
||||
&:hover
|
||||
border-color: var(--twikoo-theme);
|
||||
|
||||
.tk-main .tk-comment
|
||||
margin-top: 1rem !important;
|
||||
margin-bottom: 0;
|
||||
|
||||
.tk-submit
|
||||
padding: 1rem 1rem 0 1rem;
|
||||
border-radius: 4px;
|
||||
background: var(--card);
|
||||
|
||||
.tk-tag
|
||||
vertical-align: 0.1em !important;
|
||||
|
||||
.tk-comments-title .tk-comments-count
|
||||
margin-top: 15px;
|
||||
color: var(--text-p1);
|
||||
|
||||
span:nth-child(1)
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
|
||||
span:nth-child(2)
|
||||
font-size: 1rem;
|
||||
|
||||
.tk-comments-no
|
||||
color: var(--text-p1);
|
||||
|
||||
if hexo-config('style.darkmode') == 'auto'
|
||||
@media (prefers-color-scheme: dark)
|
||||
.cmt-body.twikoo
|
||||
--twikoo-lighttext: #f2b94b;
|
||||
--twikoo-secondtext: #a1a2b8;
|
||||
--twikoo-emoji-background: darken($dark-block, 1);
|
||||
--twikoo-theme: #409eff;
|
||||
Loading…
Reference in New Issue