valine 按需加载
This commit is contained in:
xaoxuu
parent
8f414e1fc4
commit
60958245ce
|
|
@ -30,7 +30,7 @@ sidebar:
|
|||
# Recent update
|
||||
recent:
|
||||
layout: recent
|
||||
rss: /atom.xml # npm i hexo-generator-feed
|
||||
rss: # /atom.xml # npm i hexo-generator-feed
|
||||
limit: 5 # Count of posts
|
||||
# TOC (valid only in layout:post/wiki)
|
||||
toc:
|
||||
|
|
|
|||
|
|
@ -1,41 +1,48 @@
|
|||
<%- js(theme.comments.valine.js) %>
|
||||
<script>
|
||||
function emoji(path, idx, ext) {
|
||||
return path + "/" + path + "-" + idx + "." + ext;
|
||||
}
|
||||
var emojiMaps = {};
|
||||
for (var i = 1; i <= 54; i++) {
|
||||
emojiMaps['tieba-' + i] = emoji('tieba', i, 'png');
|
||||
}
|
||||
for (var i = 1; i <= 101; i++) {
|
||||
emojiMaps['qq-' + i] = emoji('qq', i, 'gif');
|
||||
}
|
||||
for (var i = 1; i <= 116; i++) {
|
||||
emojiMaps['aru-' + i] = emoji('aru', i, 'gif');
|
||||
}
|
||||
for (var i = 1; i <= 125; i++) {
|
||||
emojiMaps['twemoji-' + i] = emoji('twemoji', i, 'png');
|
||||
}
|
||||
for (var i = 1; i <= 4; i++) {
|
||||
emojiMaps['weibo-' + i] = emoji('weibo', i, 'png');
|
||||
function getEmojiMaps() {
|
||||
function emoji(path, idx, ext) {
|
||||
return path + "/" + path + "-" + idx + "." + ext;
|
||||
}
|
||||
var emojiMaps = {};
|
||||
for (var i = 1; i <= 54; i++) {
|
||||
emojiMaps['tieba-' + i] = emoji('tieba', i, 'png');
|
||||
}
|
||||
for (var i = 1; i <= 101; i++) {
|
||||
emojiMaps['qq-' + i] = emoji('qq', i, 'gif');
|
||||
}
|
||||
for (var i = 1; i <= 116; i++) {
|
||||
emojiMaps['aru-' + i] = emoji('aru', i, 'gif');
|
||||
}
|
||||
for (var i = 1; i <= 125; i++) {
|
||||
emojiMaps['twemoji-' + i] = emoji('twemoji', i, 'png');
|
||||
}
|
||||
for (var i = 1; i <= 4; i++) {
|
||||
emojiMaps['weibo-' + i] = emoji('weibo', i, 'png');
|
||||
}
|
||||
return emojiMaps;
|
||||
}
|
||||
function load_comment(){
|
||||
if(!document.getElementById("valine_container"))return;
|
||||
const el = document.getElementById("valine_container");
|
||||
var path = el.getAttribute('comment_id');
|
||||
const placeholder = "<%= theme.comments.valine.placeholder %>";
|
||||
if (!path) {
|
||||
path = decodeURI(window.location.pathname);
|
||||
}
|
||||
var valine = new Valine();
|
||||
valine.init(Object.assign(<%- JSON.stringify(theme.comments.valine) %>, {
|
||||
el: '#valine_container',
|
||||
path: path,
|
||||
placeholder: placeholder,
|
||||
emojiCDN: 'https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/valine/',
|
||||
emojiMaps: emojiMaps,
|
||||
}));
|
||||
|
||||
stellar.loadScript('<%- theme.comments.valine.js %>', {defer:true}).then(function () {
|
||||
const el = document.getElementById("valine_container");
|
||||
var path = el.getAttribute('comment_id');
|
||||
const placeholder = "<%= theme.comments.valine.placeholder %>";
|
||||
if (!path) {
|
||||
path = decodeURI(window.location.pathname);
|
||||
}
|
||||
var valine = new Valine();
|
||||
valine.init(Object.assign(<%- JSON.stringify(theme.comments.valine) %>, {
|
||||
el: '#valine_container',
|
||||
path: path,
|
||||
placeholder: placeholder,
|
||||
emojiCDN: 'https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/valine/',
|
||||
emojiMaps: getEmojiMaps(),
|
||||
}));
|
||||
});
|
||||
}
|
||||
load_comment();
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
console.log('DOM fully loaded and parsed');
|
||||
load_comment();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,95 @@
|
|||
<script type="text/javascript">
|
||||
stellar = {};
|
||||
stellar = {
|
||||
// 懒加载 css https://github.com/filamentgroup/loadCSS
|
||||
loadCSS: (href, before, media, attributes) => {
|
||||
var doc = window.document;
|
||||
var ss = doc.createElement("link");
|
||||
var ref;
|
||||
if (before) {
|
||||
ref = before;
|
||||
} else {
|
||||
var refs = (doc.body || doc.getElementsByTagName("head")[0]).childNodes;
|
||||
ref = refs[refs.length - 1];
|
||||
}
|
||||
var sheets = doc.styleSheets;
|
||||
if (attributes) {
|
||||
for (var attributeName in attributes) {
|
||||
if (attributes.hasOwnProperty(attributeName)) {
|
||||
ss.setAttribute(attributeName, attributes[attributeName]);
|
||||
}
|
||||
}
|
||||
}
|
||||
ss.rel = "stylesheet";
|
||||
ss.href = href;
|
||||
ss.media = "only x";
|
||||
function ready(cb) {
|
||||
if (doc.body) {
|
||||
return cb();
|
||||
}
|
||||
setTimeout(function () {
|
||||
ready(cb);
|
||||
});
|
||||
}
|
||||
ready(function () {
|
||||
ref.parentNode.insertBefore(ss, before ? ref : ref.nextSibling);
|
||||
});
|
||||
var onloadcssdefined = function (cb) {
|
||||
var resolvedHref = ss.href;
|
||||
var i = sheets.length;
|
||||
while (i--) {
|
||||
if (sheets[i].href === resolvedHref) {
|
||||
return cb();
|
||||
}
|
||||
}
|
||||
setTimeout(function () {
|
||||
onloadcssdefined(cb);
|
||||
});
|
||||
};
|
||||
function loadCB() {
|
||||
if (ss.addEventListener) {
|
||||
ss.removeEventListener("load", loadCB);
|
||||
}
|
||||
ss.media = media || "all";
|
||||
}
|
||||
if (ss.addEventListener) {
|
||||
ss.addEventListener("load", loadCB);
|
||||
}
|
||||
ss.onloadcssdefined = onloadcssdefined;
|
||||
onloadcssdefined(loadCB);
|
||||
return ss;
|
||||
},
|
||||
|
||||
// 从 butterfly 和 volantis 获得灵感
|
||||
loadScript: (src, opt) => new Promise((resolve, reject) => {
|
||||
var script = document.createElement('script')
|
||||
script.src = src
|
||||
if (opt) {
|
||||
for (let key of Object.keys(opt)) {
|
||||
script[key] = opt[key]
|
||||
}
|
||||
} else {
|
||||
// 默认异步，如果需要同步，第二个参数传入 {} 即可
|
||||
script.async = true
|
||||
}
|
||||
script.onerror = reject
|
||||
script.onload = script.onreadystatechange = function() {
|
||||
const loadState = this.readyState
|
||||
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
|
||||
script.onload = script.onreadystatechange = null
|
||||
resolve()
|
||||
}
|
||||
document.head.appendChild(script)
|
||||
}),
|
||||
|
||||
// https://github.com/jerryc127/hexo-theme-butterfly
|
||||
jQuery: (fn) => {
|
||||
if (typeof jQuery === 'undefined') {
|
||||
stellar.loadScript(stellar.plugins.jQuery).then(fn)
|
||||
} else {
|
||||
fn()
|
||||
}
|
||||
}
|
||||
};
|
||||
stellar.github = 'https://github.com/xaoxuu/hexo-theme-stellar/tree/<%- theme.stellar.version %>';
|
||||
stellar.config = {
|
||||
date_suffix: {
|
||||
|
|
|
|||
|
|
@ -80,24 +80,48 @@
|
|||
padding: 8px 2rem
|
||||
.vcards
|
||||
margin-top: 0.5rem
|
||||
.vcard
|
||||
display: flex
|
||||
position: relative
|
||||
.vimg
|
||||
width: 36px
|
||||
height: 36px
|
||||
.vh
|
||||
margin-left: -46px
|
||||
padding-bottom: 0
|
||||
width: 100%
|
||||
.vhead
|
||||
line-height: 1.2
|
||||
.vnick
|
||||
margin-left: 44px
|
||||
line-height: inherit
|
||||
font-size: $fs-14
|
||||
.vtime
|
||||
margin-left: 44px
|
||||
font-size: $fs-12
|
||||
font-weight: 500
|
||||
.vat
|
||||
font-size: $fs-12
|
||||
>.vcard
|
||||
border-radius: $border-block
|
||||
background: var(--card)
|
||||
border: 1px dashed var(--block-border)
|
||||
padding: 1rem
|
||||
margin-bottom: 1rem
|
||||
.vh
|
||||
border-bottom: none
|
||||
.vquote
|
||||
border-left: none
|
||||
>.vh
|
||||
border-bottom: none
|
||||
>.vquote
|
||||
border-left: none
|
||||
padding-left: 0
|
||||
>.vcard
|
||||
border-top: 1px dashed var(--block-border)
|
||||
.vimg
|
||||
border: 1px solid white
|
||||
padding: 0
|
||||
background: var(--block)
|
||||
.vhead
|
||||
span
|
||||
&.vnick
|
||||
color: var(--text-p3)
|
||||
color: var(--text-p2)
|
||||
cursor: default
|
||||
a
|
||||
&.vnick
|
||||
|
|
@ -106,9 +130,6 @@
|
|||
&:hover
|
||||
color: $color-hover
|
||||
.vsys
|
||||
margin: 2px
|
||||
padding: 1px 8px
|
||||
background-color: var(--block)
|
||||
display: none
|
||||
.vmeta
|
||||
.vat
|
||||
|
|
@ -124,6 +145,7 @@
|
|||
|
||||
.vcontent
|
||||
padding-top: 0
|
||||
margin-top: .75em
|
||||
blockquote
|
||||
padding-top: 1rem
|
||||
padding-bottom: 1rem
|
||||
|
|
|
|||
|
|
@ -37,96 +37,6 @@ const util = {
|
|||
return result
|
||||
},
|
||||
|
||||
// 懒加载 css https://github.com/filamentgroup/loadCSS
|
||||
loadCSS: (href, before, media, attributes) => {
|
||||
var doc = window.document;
|
||||
var ss = doc.createElement("link");
|
||||
var ref;
|
||||
if (before) {
|
||||
ref = before;
|
||||
} else {
|
||||
var refs = (doc.body || doc.getElementsByTagName("head")[0]).childNodes;
|
||||
ref = refs[refs.length - 1];
|
||||
}
|
||||
var sheets = doc.styleSheets;
|
||||
if (attributes) {
|
||||
for (var attributeName in attributes) {
|
||||
if (attributes.hasOwnProperty(attributeName)) {
|
||||
ss.setAttribute(attributeName, attributes[attributeName]);
|
||||
}
|
||||
}
|
||||
}
|
||||
ss.rel = "stylesheet";
|
||||
ss.href = href;
|
||||
ss.media = "only x";
|
||||
function ready(cb) {
|
||||
if (doc.body) {
|
||||
return cb();
|
||||
}
|
||||
setTimeout(function () {
|
||||
ready(cb);
|
||||
});
|
||||
}
|
||||
ready(function () {
|
||||
ref.parentNode.insertBefore(ss, before ? ref : ref.nextSibling);
|
||||
});
|
||||
var onloadcssdefined = function (cb) {
|
||||
var resolvedHref = ss.href;
|
||||
var i = sheets.length;
|
||||
while (i--) {
|
||||
if (sheets[i].href === resolvedHref) {
|
||||
return cb();
|
||||
}
|
||||
}
|
||||
setTimeout(function () {
|
||||
onloadcssdefined(cb);
|
||||
});
|
||||
};
|
||||
function loadCB() {
|
||||
if (ss.addEventListener) {
|
||||
ss.removeEventListener("load", loadCB);
|
||||
}
|
||||
ss.media = media || "all";
|
||||
}
|
||||
if (ss.addEventListener) {
|
||||
ss.addEventListener("load", loadCB);
|
||||
}
|
||||
ss.onloadcssdefined = onloadcssdefined;
|
||||
onloadcssdefined(loadCB);
|
||||
return ss;
|
||||
},
|
||||
|
||||
// 从 butterfly 和 volantis 获得灵感
|
||||
loadScript: (src, opt) => new Promise((resolve, reject) => {
|
||||
var script = document.createElement('script')
|
||||
script.src = src
|
||||
if (opt) {
|
||||
for (let key of Object.keys(opt)) {
|
||||
script[key] = opt[key]
|
||||
}
|
||||
} else {
|
||||
// 默认异步，如果需要同步，第二个参数传入 {} 即可
|
||||
script.async = true
|
||||
}
|
||||
script.onerror = reject
|
||||
script.onload = script.onreadystatechange = function() {
|
||||
const loadState = this.readyState
|
||||
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
|
||||
script.onload = script.onreadystatechange = null
|
||||
resolve()
|
||||
}
|
||||
document.head.appendChild(script)
|
||||
}),
|
||||
|
||||
// https://github.com/jerryc127/hexo-theme-butterfly
|
||||
jQuery: (fn) => {
|
||||
if (typeof jQuery === 'undefined') {
|
||||
util.loadScript(stellar.plugins.jQuery).then(fn)
|
||||
} else {
|
||||
fn()
|
||||
}
|
||||
},
|
||||
|
||||
copy: (id, msg) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
|
|
@ -178,7 +88,7 @@ const sidebar = {
|
|||
|
||||
const init = {
|
||||
toc: () => {
|
||||
util.jQuery(() => {
|
||||
stellar.jQuery(() => {
|
||||
const scrollOffset = 32;
|
||||
var segs = [];
|
||||
$("article.md :header").each(function (idx, node) {
|
||||
|
|
@ -212,7 +122,7 @@ const init = {
|
|||
})
|
||||
},
|
||||
sidebar: () => {
|
||||
util.jQuery(() => {
|
||||
stellar.jQuery(() => {
|
||||
$("#toc a.toc-link").click(function(e) {
|
||||
l_body.classList.remove("sidebar");
|
||||
});
|
||||
|
|
@ -271,7 +181,7 @@ init.registerTabsTag()
|
|||
|
||||
// scrollreveal
|
||||
if (stellar.plugins.scrollreveal) {
|
||||
util.loadScript(stellar.plugins.scrollreveal.js).then(function () {
|
||||
stellar.loadScript(stellar.plugins.scrollreveal.js).then(function () {
|
||||
ScrollReveal().reveal("body .reveal", {
|
||||
distance: stellar.plugins.scrollreveal.distance,
|
||||
duration: stellar.plugins.scrollreveal.duration,
|
||||
|
|
@ -284,7 +194,7 @@ if (stellar.plugins.scrollreveal) {
|
|||
|
||||
// lazyload
|
||||
if (stellar.plugins.lazyload) {
|
||||
util.loadScript(stellar.plugins.lazyload.js, {defer:true})
|
||||
stellar.loadScript(stellar.plugins.lazyload.js, {defer:true})
|
||||
// https://www.npmjs.com/package/vanilla-lazyload
|
||||
// Set the options globally
|
||||
// to make LazyLoad self-initialize
|
||||
|
|
@ -309,16 +219,16 @@ if (stellar.plugins.lazyload) {
|
|||
if (stellar.plugins.sitesjs) {
|
||||
const issues_api = document.getElementById('sites-api');
|
||||
if (issues_api != undefined) {
|
||||
util.jQuery( () => {
|
||||
util.loadScript(stellar.plugins.sitesjs, {defer:true})
|
||||
stellar.jQuery( () => {
|
||||
stellar.loadScript(stellar.plugins.sitesjs, {defer:true})
|
||||
})
|
||||
}
|
||||
}
|
||||
if (stellar.plugins.friendsjs) {
|
||||
const issues_api = document.getElementById('friends-api');
|
||||
if (issues_api != undefined) {
|
||||
util.jQuery( () => {
|
||||
util.loadScript(stellar.plugins.friendsjs, {defer:true})
|
||||
stellar.jQuery( () => {
|
||||
stellar.loadScript(stellar.plugins.friendsjs, {defer:true})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -327,8 +237,8 @@ if (stellar.plugins.friendsjs) {
|
|||
if (stellar.plugins.swiper) {
|
||||
const swiper_api = document.getElementById('swiper-api');
|
||||
if (swiper_api != undefined) {
|
||||
util.loadCSS(stellar.plugins.swiper.css);
|
||||
util.loadScript(stellar.plugins.swiper.js, {defer:true}).then(function () {
|
||||
stellar.loadCSS(stellar.plugins.swiper.css);
|
||||
stellar.loadScript(stellar.plugins.swiper.js, {defer:true}).then(function () {
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
slidesPerView: 'auto',
|
||||
spaceBetween: 8,
|
||||
|
|
@ -350,7 +260,7 @@ if (stellar.plugins.swiper) {
|
|||
// preload
|
||||
if (stellar.plugins.preload) {
|
||||
if (stellar.plugins.preload.service == 'instant_page') {
|
||||
util.loadScript(stellar.plugins.preload.instant_page, {
|
||||
stellar.loadScript(stellar.plugins.preload.instant_page, {
|
||||
defer: true,
|
||||
type: 'module',
|
||||
integrity: 'sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1'
|
||||
|
|
@ -362,7 +272,7 @@ if (stellar.plugins.preload) {
|
|||
maxRPS: 5,
|
||||
hoverDelay: 25
|
||||
};
|
||||
util.loadScript(stellar.plugins.preload.flying_pages, {defer:true})
|
||||
stellar.loadScript(stellar.plugins.preload.flying_pages, {defer:true})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue