Um..! 4 posts in total. Keep on posting.
2022
0%
\ No newline at end of file
diff --git a/js/bookmark.js b/js/bookmark.js
new file mode 100644
index 0000000..8e3ae6a
--- /dev/null
+++ b/js/bookmark.js
@@ -0,0 +1,56 @@
+/* global CONFIG */
+
+document.addEventListener('DOMContentLoaded', () => {
+ 'use strict';
+
+ const doSaveScroll = () => {
+ localStorage.setItem('bookmark' + location.pathname, window.scrollY);
+ };
+
+ const scrollToMark = () => {
+ let top = localStorage.getItem('bookmark' + location.pathname);
+ top = parseInt(top, 10);
+ // If the page opens with a specific hash, just jump out
+ if (!isNaN(top) && location.hash === '') {
+ // Auto scroll to the position
+ window.anime({
+ targets : document.scrollingElement,
+ duration : 200,
+ easing : 'linear',
+ scrollTop: top
+ });
+ }
+ };
+ // Register everything
+ const init = function(trigger) {
+ // Create a link element
+ const link = document.querySelector('.book-mark-link');
+ // Scroll event
+ window.addEventListener('scroll', () => link.classList.toggle('book-mark-link-fixed', window.scrollY === 0), { passive: true });
+ // Register beforeunload event when the trigger is auto
+ if (trigger === 'auto') {
+ // Register beforeunload event
+ window.addEventListener('beforeunload', doSaveScroll);
+ document.addEventListener('pjax:send', doSaveScroll);
+ }
+ // Save the position by clicking the icon
+ link.addEventListener('click', () => {
+ doSaveScroll();
+ window.anime({
+ targets : link,
+ duration: 200,
+ easing : 'linear',
+ top : -30,
+ complete: () => {
+ setTimeout(() => {
+ link.style.top = '';
+ }, 400);
+ }
+ });
+ });
+ scrollToMark();
+ document.addEventListener('pjax:success', scrollToMark);
+ };
+
+ init(CONFIG.bookmark.save);
+});
diff --git a/js/comments-buttons.js b/js/comments-buttons.js
new file mode 100644
index 0000000..505c21b
--- /dev/null
+++ b/js/comments-buttons.js
@@ -0,0 +1,25 @@
+/* global CONFIG */
+
+(function() {
+ const commentButton = document.querySelectorAll('.comment-button');
+ commentButton.forEach(element => {
+ const commentClass = element.classList[2];
+ element.addEventListener('click', () => {
+ commentButton.forEach(active => active.classList.toggle('active', active === element));
+ document.querySelectorAll('.comment-position').forEach(active => active.classList.toggle('active', active.classList.contains(commentClass)));
+ if (CONFIG.comments.storage) {
+ localStorage.setItem('comments_active', commentClass);
+ }
+ });
+ });
+ let { activeClass } = CONFIG.comments;
+ if (CONFIG.comments.storage) {
+ activeClass = localStorage.getItem('comments_active') || activeClass;
+ }
+ if (activeClass) {
+ const activeButton = document.querySelector(`.comment-button.${activeClass}`);
+ if (activeButton) {
+ activeButton.click();
+ }
+ }
+})();
diff --git a/js/comments.js b/js/comments.js
new file mode 100644
index 0000000..4045e8c
--- /dev/null
+++ b/js/comments.js
@@ -0,0 +1,21 @@
+/* global CONFIG */
+
+window.addEventListener('tabs:register', () => {
+ let { activeClass } = CONFIG.comments;
+ if (CONFIG.comments.storage) {
+ activeClass = localStorage.getItem('comments_active') || activeClass;
+ }
+ if (activeClass) {
+ const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+ if (activeTab) {
+ activeTab.click();
+ }
+ }
+});
+if (CONFIG.comments.storage) {
+ window.addEventListener('tabs:click', event => {
+ if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+ const commentClass = event.target.classList[1];
+ localStorage.setItem('comments_active', commentClass);
+ });
+}
diff --git a/js/config.js b/js/config.js
new file mode 100644
index 0000000..caa0075
--- /dev/null
+++ b/js/config.js
@@ -0,0 +1,66 @@
+if (!window.NexT) window.NexT = {};
+
+(function() {
+ const className = 'next-config';
+
+ const staticConfig = {};
+ let variableConfig = {};
+
+ const parse = text => JSON.parse(text || '{}');
+
+ const update = name => {
+ const targetEle = document.querySelector(`.${className}[data-name="${name}"]`);
+ if (!targetEle) return;
+ const parsedConfig = parse(targetEle.text);
+ if (name === 'main') {
+ Object.assign(staticConfig, parsedConfig);
+ } else {
+ variableConfig[name] = parsedConfig;
+ }
+ };
+
+ update('main');
+
+ window.CONFIG = new Proxy({}, {
+ get(overrideConfig, name) {
+ let existing;
+ if (name in staticConfig) {
+ existing = staticConfig[name];
+ } else {
+ if (!(name in variableConfig)) update(name);
+ existing = variableConfig[name];
+ }
+
+ // For unset override and mixable existing
+ if (!(name in overrideConfig) && typeof existing === 'object') {
+ // Get ready to mix.
+ overrideConfig[name] = {};
+ }
+
+ if (name in overrideConfig) {
+ const override = overrideConfig[name];
+
+ // When mixable
+ if (typeof override === 'object' && typeof existing === 'object') {
+ // Mix, proxy changes to the override.
+ return new Proxy({ ...existing, ...override }, {
+ set(target, prop, value) {
+ target[prop] = value;
+ override[prop] = value;
+ return true;
+ }
+ });
+ }
+
+ return override;
+ }
+
+ // Only when not mixable and override hasn't been set.
+ return existing;
+ }
+ });
+
+ document.addEventListener('pjax:success', () => {
+ variableConfig = {};
+ });
+})();
diff --git a/js/motion.js b/js/motion.js
new file mode 100644
index 0000000..aad22db
--- /dev/null
+++ b/js/motion.js
@@ -0,0 +1,140 @@
+/* global NexT, CONFIG */
+
+NexT.motion = {};
+
+NexT.motion.integrator = {
+ queue: [],
+ init : function() {
+ this.queue = [];
+ return this;
+ },
+ add: function(fn) {
+ const sequence = fn();
+ if (CONFIG.motion.async) this.queue.push(sequence);
+ else this.queue = this.queue.concat(sequence);
+ return this;
+ },
+ bootstrap: function() {
+ if (!CONFIG.motion.async) this.queue = [this.queue];
+ this.queue.forEach(sequence => {
+ const timeline = window.anime.timeline({
+ duration: 200,
+ easing : 'linear'
+ });
+ sequence.forEach(item => {
+ if (item.deltaT) timeline.add(item, item.deltaT);
+ else timeline.add(item);
+ });
+ });
+ }
+};
+
+NexT.motion.middleWares = {
+ header: function() {
+ const sequence = [];
+
+ function getMistLineSettings(targets) {
+ sequence.push({
+ targets,
+ scaleX : [0, 1],
+ duration: 500,
+ deltaT : '-=200'
+ });
+ }
+
+ function pushToSequence(targets, sequenceQueue = false) {
+ sequence.push({
+ targets,
+ opacity: 1,
+ top : 0,
+ deltaT : sequenceQueue ? '-=200' : '-=0'
+ });
+ }
+
+ pushToSequence('.column');
+ CONFIG.scheme === 'Mist' && getMistLineSettings('.logo-line');
+ CONFIG.scheme === 'Muse' && pushToSequence('.custom-logo-image');
+ pushToSequence('.site-title');
+ pushToSequence('.site-brand-container .toggle', true);
+ pushToSequence('.site-subtitle');
+ (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && pushToSequence('.custom-logo-image');
+
+ const menuItemTransition = CONFIG.motion.transition.menu_item;
+ if (menuItemTransition) {
+ document.querySelectorAll('.menu-item').forEach(targets => {
+ sequence.push({
+ targets,
+ complete: () => targets.classList.add('animated', menuItemTransition),
+ deltaT : '-=200'
+ });
+ });
+ }
+
+ return sequence;
+ },
+
+ subMenu: function() {
+ const subMenuItem = document.querySelectorAll('.sub-menu .menu-item');
+ if (subMenuItem.length > 0) {
+ subMenuItem.forEach(element => {
+ element.classList.add('animated');
+ });
+ }
+ return [];
+ },
+
+ postList: function() {
+ const sequence = [];
+ const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
+
+ function animate(animation, elements) {
+ if (!animation) return;
+ elements.forEach(targets => {
+ sequence.push({
+ targets,
+ complete: () => targets.classList.add('animated', animation),
+ deltaT : '-=100'
+ });
+ });
+ }
+
+ document.querySelectorAll('.post-block').forEach(targets => {
+ sequence.push({
+ targets,
+ complete: () => targets.classList.add('animated', post_block),
+ deltaT : '-=100'
+ });
+ animate(coll_header, targets.querySelectorAll('.collection-header'));
+ animate(post_header, targets.querySelectorAll('.post-header'));
+ animate(post_body, targets.querySelectorAll('.post-body'));
+ });
+
+ animate(post_block, document.querySelectorAll('.pagination, .comments'));
+
+ return sequence;
+ },
+
+ sidebar: function() {
+ const sequence = [];
+ const sidebar = document.querySelectorAll('.sidebar-inner');
+ const sidebarTransition = CONFIG.motion.transition.sidebar;
+ // Only for Pisces | Gemini.
+ if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
+ sidebar.forEach(targets => {
+ sequence.push({
+ targets,
+ complete: () => targets.classList.add('animated', sidebarTransition),
+ deltaT : '-=100'
+ });
+ });
+ }
+ return sequence;
+ },
+
+ footer: function() {
+ return [{
+ targets: document.querySelector('.footer'),
+ opacity: 1
+ }];
+ }
+};
diff --git a/js/next-boot.js b/js/next-boot.js
new file mode 100644
index 0000000..1225fd2
--- /dev/null
+++ b/js/next-boot.js
@@ -0,0 +1,75 @@
+/* global NexT, CONFIG */
+
+NexT.boot = {};
+
+NexT.boot.registerEvents = function() {
+
+ NexT.utils.registerScrollPercent();
+ NexT.utils.registerCanIUseTag();
+
+ // Mobile top menu bar.
+ document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => {
+ event.currentTarget.classList.toggle('toggle-close');
+ const siteNav = document.querySelector('.site-nav');
+ if (!siteNav) return;
+ siteNav.style.setProperty('--scroll-height', siteNav.scrollHeight + 'px');
+ document.body.classList.toggle('site-nav-on');
+ });
+
+ document.querySelectorAll('.sidebar-nav li').forEach((element, index) => {
+ element.addEventListener('click', () => {
+ NexT.utils.activateSidebarPanel(index);
+ });
+ });
+
+ window.addEventListener('hashchange', () => {
+ const tHash = location.hash;
+ if (tHash !== '' && !tHash.match(/%\S{2}/)) {
+ const target = document.querySelector(`.tabs ul.nav-tabs li a[href="${tHash}"]`);
+ target && target.click();
+ }
+ });
+};
+
+NexT.boot.refresh = function() {
+
+ /**
+ * Register JS handlers by condition option.
+ * Need to add config option in Front-End at 'scripts/helpers/next-config.js' file.
+ */
+ CONFIG.prism && window.Prism.highlightAll();
+ CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img, .post-body > img', {
+ background: 'var(--content-bg-color)'
+ });
+ CONFIG.lazyload && window.lozad('.post-body img').observe();
+ CONFIG.pangu && window.pangu.spacingPage();
+
+ CONFIG.exturl && NexT.utils.registerExtURL();
+ NexT.utils.wrapTableWithBox();
+ NexT.utils.registerCopyCode();
+ NexT.utils.registerTabsTag();
+ NexT.utils.registerActiveMenuItem();
+ NexT.utils.registerLangSelect();
+ NexT.utils.registerSidebarTOC();
+ NexT.utils.registerPostReward();
+ NexT.utils.registerVideoIframe();
+};
+
+NexT.boot.motion = function() {
+ // Define Motion Sequence & Bootstrap Motion.
+ if (CONFIG.motion.enable) {
+ NexT.motion.integrator
+ .add(NexT.motion.middleWares.header)
+ .add(NexT.motion.middleWares.postList)
+ .add(NexT.motion.middleWares.sidebar)
+ .add(NexT.motion.middleWares.footer)
+ .bootstrap();
+ }
+ NexT.utils.updateSidebarPosition();
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+ NexT.boot.registerEvents();
+ NexT.boot.refresh();
+ NexT.boot.motion();
+});
diff --git a/js/pjax.js b/js/pjax.js
new file mode 100644
index 0000000..f81a6a0
--- /dev/null
+++ b/js/pjax.js
@@ -0,0 +1,50 @@
+/* global NexT, CONFIG, Pjax */
+
+const pjax = new Pjax({
+ selectors: [
+ 'head title',
+ 'script[type="application/json"]',
+ // Precede .main-inner to prevent placeholder TOC changes asap
+ '.post-toc-wrap',
+ '.main-inner',
+ '.languages',
+ '.pjax'
+ ],
+ switches: {
+ '.post-toc-wrap': function(oldWrap, newWrap) {
+ if (newWrap.querySelector('.post-toc')) {
+ Pjax.switches.outerHTML.call(this, oldWrap, newWrap);
+ } else {
+ const curTOC = oldWrap.querySelector('.post-toc');
+ if (curTOC) {
+ curTOC.classList.add('placeholder-toc');
+ }
+ this.onSwitch();
+ }
+ }
+ },
+ analytics: false,
+ cacheBust: false,
+ scrollTo : !CONFIG.bookmark.enable
+});
+
+document.addEventListener('pjax:success', () => {
+ pjax.executeScripts(document.querySelectorAll('script[data-pjax]'));
+ NexT.boot.refresh();
+ // Define Motion Sequence & Bootstrap Motion.
+ if (CONFIG.motion.enable) {
+ NexT.motion.integrator
+ .init()
+ .add(NexT.motion.middleWares.subMenu)
+ .add(NexT.motion.middleWares.postList)
+ // Add sidebar-post-related transition.
+ .add(NexT.motion.middleWares.sidebar)
+ .bootstrap();
+ }
+ if (CONFIG.sidebar.display !== 'remove') {
+ const hasTOC = document.querySelector('.post-toc:not(.placeholder-toc)');
+ document.querySelector('.sidebar-inner').classList.toggle('sidebar-nav-active', hasTOC);
+ NexT.utils.activateSidebarPanel(hasTOC ? 0 : 1);
+ NexT.utils.updateSidebarPosition();
+ }
+});
diff --git a/js/schedule.js b/js/schedule.js
new file mode 100644
index 0000000..8f0c26c
--- /dev/null
+++ b/js/schedule.js
@@ -0,0 +1,138 @@
+/* global CONFIG */
+
+// https://developers.google.com/calendar/api/v3/reference/events/list
+(function() {
+ // Initialization
+ const calendar = {
+ orderBy : 'startTime',
+ showLocation: false,
+ offsetMax : 72,
+ offsetMin : 4,
+ showDeleted : false,
+ singleEvents: true,
+ maxResults : 250
+ };
+
+ // Read config form theme config file
+ Object.assign(calendar, CONFIG.calendar);
+
+ const now = new Date();
+ const timeMax = new Date();
+ const timeMin = new Date();
+
+ timeMax.setHours(now.getHours() + calendar.offsetMax);
+ timeMin.setHours(now.getHours() - calendar.offsetMin);
+
+ // Build URL
+ const params = {
+ key : calendar.api_key,
+ orderBy : calendar.orderBy,
+ timeMax : timeMax.toISOString(),
+ timeMin : timeMin.toISOString(),
+ showDeleted : calendar.showDeleted,
+ singleEvents: calendar.singleEvents,
+ maxResults : calendar.maxResults
+ };
+
+ const request_url = new URL(`https://www.googleapis.com/calendar/v3/calendars/${calendar.calendar_id}/events`);
+ Object.entries(params).forEach(param => request_url.searchParams.append(...param));
+
+ function getRelativeTime(current, previous) {
+ const msPerMinute = 60 * 1000;
+ const msPerHour = msPerMinute * 60;
+ const msPerDay = msPerHour * 24;
+ const msPerMonth = msPerDay * 30;
+ const msPerYear = msPerDay * 365;
+
+ let elapsed = current - previous;
+ const tense = elapsed > 0 ? ' ago' : ' later';
+
+ elapsed = Math.abs(elapsed);
+
+ if (elapsed < msPerHour) {
+ return Math.round(elapsed / msPerMinute) + ' minutes' + tense;
+ } else if (elapsed < msPerDay) {
+ return Math.round(elapsed / msPerHour) + ' hours' + tense;
+ } else if (elapsed < msPerMonth) {
+ return 'about ' + Math.round(elapsed / msPerDay) + ' days' + tense;
+ } else if (elapsed < msPerYear) {
+ return 'about ' + Math.round(elapsed / msPerMonth) + ' months' + tense;
+ }
+
+ return 'about ' + Math.round(elapsed / msPerYear) + ' years' + tense;
+ }
+
+ function buildEventDOM(tense, event, start, end) {
+ const durationFormat = {
+ weekday: 'short',
+ hour : '2-digit',
+ minute : '2-digit'
+ };
+ const relativeTime = tense === 'now' ? 'NOW' : getRelativeTime(now, start);
+ const duration = start.toLocaleTimeString([], durationFormat) + ' - ' + end.toLocaleTimeString([], durationFormat);
+
+ let location = '';
+ if (calendar.showLocation && event.location) {
+ location = `${event.location}`;
+ }
+ let description = '';
+ if (event.description) {
+ description = `${event.description}`;
+ }
+
+ const eventContent = `+ ${event.summary} + ${relativeTime} +
+ ${location} + ${duration} + ${description} +'; + return; + } + // Clean the event list + eventList.innerHTML = ''; + let prevEnd = 0; // used to decide where to insert an
+ const utc = new Date().getTimezoneOffset() * 60000; + + data.items.forEach(event => { + // Parse data + const start = new Date(event.start.dateTime || (new Date(event.start.date).getTime() + utc)); + const end = new Date(event.end.dateTime || (new Date(event.end.date).getTime() + utc)); + + let tense = 'now'; + if (end < now) { + tense = 'past'; + } else if (start > now) { + tense = 'future'; + } + + if (tense === 'future' && prevEnd < now) { + eventList.insertAdjacentHTML('beforeend', '
'); + } + + eventList.insertAdjacentHTML('beforeend', buildEventDOM(tense, event, start, end)); + prevEnd = end; + }); + }); + } + + fetchData(); + const fetchDataTimer = setInterval(fetchData, 60000); + document.addEventListener('pjax:send', () => { + clearInterval(fetchDataTimer); + }); +})(); diff --git a/js/schemes/muse.js b/js/schemes/muse.js new file mode 100644 index 0000000..ba60b51 --- /dev/null +++ b/js/schemes/muse.js @@ -0,0 +1,60 @@ +/* global CONFIG */ + +document.addEventListener('DOMContentLoaded', () => { + + const isRight = CONFIG.sidebar.position === 'right'; + + const sidebarToggleMotion = { + mouse: {}, + init : function() { + window.addEventListener('mousedown', this.mousedownHandler.bind(this)); + window.addEventListener('mouseup', this.mouseupHandler.bind(this)); + document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this)); + document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this)); + window.addEventListener('sidebar:show', this.showSidebar); + window.addEventListener('sidebar:hide', this.hideSidebar); + }, + mousedownHandler: function(event) { + this.mouse.X = event.pageX; + this.mouse.Y = event.pageY; + }, + mouseupHandler: function(event) { + const deltaX = event.pageX - this.mouse.X; + const deltaY = event.pageY - this.mouse.Y; + const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main'); + // Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image. + if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) { + this.hideSidebar(); + } + }, + clickHandler: function() { + document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar(); + }, + showSidebar: function() { + document.body.classList.add('sidebar-active'); + const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft'; + document.querySelectorAll('.sidebar .animated').forEach((element, index) => { + element.style.animationDelay = (100 * index) + 'ms'; + element.classList.remove(animateAction); + setTimeout(() => { + // Trigger a DOM reflow + element.classList.add(animateAction); + }); + }); + }, + hideSidebar: function() { + document.body.classList.remove('sidebar-active'); + } + }; + if (CONFIG.sidebar.display !== 'remove') sidebarToggleMotion.init(); + + function updateFooterPosition() { + const footer = document.querySelector('.footer'); + const containerHeight = document.querySelector('.main').offsetHeight + footer.offsetHeight; + footer.classList.toggle('footer-fixed', containerHeight <= window.innerHeight); + } + + updateFooterPosition(); + window.addEventListener('resize', updateFooterPosition); + window.addEventListener('scroll', updateFooterPosition, { passive: true }); +}); diff --git a/js/third-party/addtoany.js b/js/third-party/addtoany.js new file mode 100644 index 0000000..f9009f8 --- /dev/null +++ b/js/third-party/addtoany.js @@ -0,0 +1,8 @@ +/* global NexT */ + +document.addEventListener('page:loaded', () => { + NexT.utils.getScript('https://static.addtoany.com/menu/page.js', { condition: window.a2a }) + .then(() => { + window.a2a.init(); + }); +}); diff --git a/js/third-party/analytics/baidu-analytics.js b/js/third-party/analytics/baidu-analytics.js new file mode 100644 index 0000000..c10e7d0 --- /dev/null +++ b/js/third-party/analytics/baidu-analytics.js @@ -0,0 +1,7 @@ +/* global _hmt */ + +if (!window._hmt) window._hmt = []; + +document.addEventListener('pjax:success', () => { + _hmt.push(['_trackPageview', location.pathname]); +}); diff --git a/js/third-party/analytics/google-analytics.js b/js/third-party/analytics/google-analytics.js new file mode 100644 index 0000000..2cd128f --- /dev/null +++ b/js/third-party/analytics/google-analytics.js @@ -0,0 +1,35 @@ +/* global CONFIG, dataLayer, gtag */ + +if (!CONFIG.google_analytics.only_pageview) { + if (CONFIG.hostname === location.hostname) { + window.dataLayer = window.dataLayer || []; + window.gtag = function() { + dataLayer.push(arguments); + }; + gtag('js', new Date()); + gtag('config', CONFIG.google_analytics.tracking_id); + + document.addEventListener('pjax:success', () => { + gtag('event', 'page_view', { + page_location: location.href, + page_path : location.pathname, + page_title : document.title + }); + }); + } +} else { + const sendPageView = () => { + if (CONFIG.hostname !== location.hostname) return; + const uid = localStorage.getItem('uid') || (Math.random() + '.' + Math.random()); + localStorage.setItem('uid', uid); + navigator.sendBeacon('https://www.google-analytics.com/collect', new URLSearchParams({ + v : 1, + tid: CONFIG.google_analytics.tracking_id, + cid: uid, + t : 'pageview', + dp : encodeURIComponent(location.pathname) + })); + }; + document.addEventListener('pjax:complete', sendPageView); + sendPageView(); +} diff --git a/js/third-party/analytics/growingio.js b/js/third-party/analytics/growingio.js new file mode 100644 index 0000000..0460833 --- /dev/null +++ b/js/third-party/analytics/growingio.js @@ -0,0 +1,10 @@ +/* global CONFIG, gio */ + +if (!window.gio) { + window.gio = function() { + (window.gio.q = window.gio.q || []).push(arguments); + }; +} + +gio('init', `${CONFIG.growingio_analytics}`, {}); +gio('send'); diff --git a/js/third-party/analytics/matomo.js b/js/third-party/analytics/matomo.js new file mode 100644 index 0000000..290a3e0 --- /dev/null +++ b/js/third-party/analytics/matomo.js @@ -0,0 +1,19 @@ +/* global CONFIG */ + +if (CONFIG.matomo.enable) { + window._paq = window._paq || []; + const _paq = window._paq; + + /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ + _paq.push(['trackPageView']); + _paq.push(['enableLinkTracking']); + const u = CONFIG.matomo.server_url; + _paq.push(['setTrackerUrl', u + 'matomo.php']); + _paq.push(['setSiteId', CONFIG.matomo.site_id]); + const d = document; + const g = d.createElement('script'); + const s = d.getElementsByTagName('script')[0]; + g.async = true; + g.src = u + 'matomo.js'; + s.parentNode.insertBefore(g, s); +} diff --git a/js/third-party/chat/chatra.js b/js/third-party/chat/chatra.js new file mode 100644 index 0000000..e495b8e --- /dev/null +++ b/js/third-party/chat/chatra.js @@ -0,0 +1,19 @@ +/* global CONFIG, Chatra */ + +(function() { + if (CONFIG.chatra.embed) { + window.ChatraSetup = { + mode : 'frame', + injectTo: CONFIG.chatra.embed + }; + } + + window.ChatraID = CONFIG.chatra.id; + + const chatButton = document.querySelector('.sidebar-button button'); + if (chatButton) { + chatButton.addEventListener('click', () => { + Chatra('openChat', true); + }); + } +})(); diff --git a/js/third-party/chat/tidio.js b/js/third-party/chat/tidio.js new file mode 100644 index 0000000..bffb918 --- /dev/null +++ b/js/third-party/chat/tidio.js @@ -0,0 +1,10 @@ +/* global tidioChatApi */ + +(function() { + const chatButton = document.querySelector('.sidebar-button button'); + if (chatButton) { + chatButton.addEventListener('click', () => { + tidioChatApi.open(); + }); + } +})(); diff --git a/js/third-party/comments/changyan.js b/js/third-party/comments/changyan.js new file mode 100644 index 0000000..18a1be4 --- /dev/null +++ b/js/third-party/comments/changyan.js @@ -0,0 +1,39 @@ +/* global NexT, CONFIG */ + +document.addEventListener('page:loaded', () => { + const { appid, appkey } = CONFIG.changyan; + const mainJs = 'https://cy-cdn.kuaizhan.com/upload/changyan.js'; + const countJs = `https://cy-cdn.kuaizhan.com/upload/plugins/plugins.list.count.js?clientId=${appid}`; + + // Get the number of comments + setTimeout(() => { + return NexT.utils.getScript(countJs, { + attributes: { + async: true, + id : 'cy_cmt_num' + } + }); + }, 0); + + // When scroll to comment section + if (CONFIG.page.comments && !CONFIG.page.isHome) { + NexT.utils.loadComments('#SOHUCS') + .then(() => { + return NexT.utils.getScript(mainJs, { + attributes: { + async: true + } + }); + }) + .then(() => { + window.changyan.api.config({ + appid, + conf: appkey + }); + }) + .catch(error => { + // eslint-disable-next-line no-console + console.error('Failed to load Changyan', error); + }); + } +}); diff --git a/js/third-party/comments/disqus.js b/js/third-party/comments/disqus.js new file mode 100644 index 0000000..4d1ca9e --- /dev/null +++ b/js/third-party/comments/disqus.js @@ -0,0 +1,41 @@ +/* global NexT, CONFIG, DISQUS */ + +document.addEventListener('page:loaded', () => { + + if (CONFIG.disqus.count) { + if (window.DISQUSWIDGETS) { + window.DISQUSWIDGETS.getCount({ reset: true }); + } else { + // Defer loading until the whole page loading is completed + NexT.utils.getScript(`https://${CONFIG.disqus.shortname}.disqus.com/count.js`, { + attributes: { id: 'dsq-count-scr', defer: true } + }); + } + } + + if (CONFIG.page.comments) { + // `disqus_config` should be a global variable + // See https://help.disqus.com/en/articles/1717084-javascript-configuration-variables + window.disqus_config = function() { + this.page.url = CONFIG.page.permalink; + this.page.identifier = CONFIG.page.path; + this.page.title = CONFIG.page.title; + if (CONFIG.disqus.i18n.disqus !== 'disqus') { + this.language = CONFIG.disqus.i18n.disqus; + } + }; + NexT.utils.loadComments('#disqus_thread').then(() => { + if (window.DISQUS) { + DISQUS.reset({ + reload: true, + config: window.disqus_config + }); + } else { + NexT.utils.getScript(`https://${CONFIG.disqus.shortname}.disqus.com/embed.js`, { + attributes: { dataset: { timestamp: '' + +new Date() } } + }); + } + }); + } + +}); diff --git a/js/third-party/comments/disqusjs.js b/js/third-party/comments/disqusjs.js new file mode 100644 index 0000000..d8401ee --- /dev/null +++ b/js/third-party/comments/disqusjs.js @@ -0,0 +1,23 @@ +/* global NexT, CONFIG, DisqusJS */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.page.comments) return; + + NexT.utils.loadComments('#disqus_thread') + .then(() => NexT.utils.getScript(CONFIG.disqusjs.js, { condition: window.DisqusJS })) + .then(() => { + window.dsqjs = new DisqusJS({ + api : CONFIG.disqusjs.api || 'https://disqus.com/api/', + apikey : CONFIG.disqusjs.apikey, + shortname : CONFIG.disqusjs.shortname, + url : CONFIG.page.permalink, + identifier: CONFIG.page.path, + title : CONFIG.page.title + }); + window.dsqjs.render(document.querySelector('.disqusjs-container')); + }); +}); + +document.addEventListener('pjax:send', () => { + if (window.dsqjs) window.dsqjs.destroy(); +}); diff --git a/js/third-party/comments/gitalk.js b/js/third-party/comments/gitalk.js new file mode 100644 index 0000000..08d07f4 --- /dev/null +++ b/js/third-party/comments/gitalk.js @@ -0,0 +1,24 @@ +/* global NexT, CONFIG, Gitalk */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.page.comments) return; + + NexT.utils.loadComments('.gitalk-container') + .then(() => NexT.utils.getScript(CONFIG.gitalk.js, { + condition: window.Gitalk + })) + .then(() => { + const gitalk = new Gitalk({ + clientID : CONFIG.gitalk.client_id, + clientSecret : CONFIG.gitalk.client_secret, + repo : CONFIG.gitalk.repo, + owner : CONFIG.gitalk.github_id, + admin : [CONFIG.gitalk.admin_user], + id : CONFIG.gitalk.path_md5, + proxy : CONFIG.gitalk.proxy, + language : CONFIG.gitalk.language || window.navigator.language, + distractionFreeMode: CONFIG.gitalk.distraction_free_mode + }); + gitalk.render(document.querySelector('.gitalk-container')); + }); +}); diff --git a/js/third-party/comments/isso.js b/js/third-party/comments/isso.js new file mode 100644 index 0000000..2c70601 --- /dev/null +++ b/js/third-party/comments/isso.js @@ -0,0 +1,15 @@ +/* global NexT, CONFIG */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.page.comments) return; + + NexT.utils.loadComments('#isso-thread') + .then(() => NexT.utils.getScript(`${CONFIG.isso}js/embed.min.js`, { + attributes: { + dataset: { + isso: `${CONFIG.isso}` + } + }, + parentNode: document.querySelector('#isso-thread') + })); +}); diff --git a/js/third-party/comments/livere.js b/js/third-party/comments/livere.js new file mode 100644 index 0000000..c4bcd2e --- /dev/null +++ b/js/third-party/comments/livere.js @@ -0,0 +1,19 @@ +/* global NexT, CONFIG, LivereTower */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.page.comments) return; + + NexT.utils.loadComments('#lv-container').then(() => { + window.livereOptions = { + refer: CONFIG.page.path.replace(/index\.html$/, '') + }; + + if (typeof LivereTower === 'function') return; + + NexT.utils.getScript('https://cdn-city.livere.com/js/embed.dist.js', { + attributes: { + async: true + } + }); + }); +}); diff --git a/js/third-party/comments/utterances.js b/js/third-party/comments/utterances.js new file mode 100644 index 0000000..332ee05 --- /dev/null +++ b/js/third-party/comments/utterances.js @@ -0,0 +1,17 @@ +/* global NexT, CONFIG */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.page.comments) return; + + NexT.utils.loadComments('.utterances-container') + .then(() => NexT.utils.getScript('https://utteranc.es/client.js', { + attributes: { + async : true, + crossOrigin : 'anonymous', + 'repo' : CONFIG.utterances.repo, + 'issue-term': CONFIG.utterances.issue_term, + 'theme' : CONFIG.utterances.theme + }, + parentNode: document.querySelector('.utterances-container') + })); +}); diff --git a/js/third-party/fancybox.js b/js/third-party/fancybox.js new file mode 100644 index 0000000..178db4b --- /dev/null +++ b/js/third-party/fancybox.js @@ -0,0 +1,35 @@ +/* global Fancybox */ + +document.addEventListener('page:loaded', () => { + + /** + * Wrap images with fancybox. + */ + document.querySelectorAll('.post-body :not(a) > img, .post-body > img').forEach(image => { + const imageLink = image.dataset.src || image.src; + const imageWrapLink = document.createElement('a'); + imageWrapLink.classList.add('fancybox'); + imageWrapLink.href = imageLink; + imageWrapLink.setAttribute('itemscope', ''); + imageWrapLink.setAttribute('itemtype', 'http://schema.org/ImageObject'); + imageWrapLink.setAttribute('itemprop', 'url'); + + let dataFancybox = 'default'; + if (image.closest('.post-gallery') !== null) { + dataFancybox = 'gallery'; + } else if (image.closest('.group-picture') !== null) { + dataFancybox = 'group'; + } + imageWrapLink.dataset.fancybox = dataFancybox; + + const imageTitle = image.title || image.alt; + if (imageTitle) { + imageWrapLink.title = imageTitle; + // Make sure img captions will show correctly in fancybox + imageWrapLink.dataset.caption = imageTitle; + } + image.wrap(imageWrapLink); + }); + + Fancybox.bind('[data-fancybox]'); +}); diff --git a/js/third-party/math/katex.js b/js/third-party/math/katex.js new file mode 100644 index 0000000..ad745b1 --- /dev/null +++ b/js/third-party/math/katex.js @@ -0,0 +1,7 @@ +/* global NexT, CONFIG */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.enableMath) return; + + NexT.utils.getScript(CONFIG.katex.copy_tex_js).catch(() => {}); +}); diff --git a/js/third-party/math/mathjax.js b/js/third-party/math/mathjax.js new file mode 100644 index 0000000..fe4d448 --- /dev/null +++ b/js/third-party/math/mathjax.js @@ -0,0 +1,36 @@ +/* global NexT, CONFIG, MathJax */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.enableMath) return; + + if (typeof MathJax === 'undefined') { + window.MathJax = { + tex: { + inlineMath: { '[+]': [['$', '$']] }, + tags : CONFIG.mathjax.tags + }, + options: { + renderActions: { + insertedScript: [200, () => { + document.querySelectorAll('mjx-container').forEach(node => { + const target = node.parentNode; + if (target.nodeName.toLowerCase() === 'li') { + target.parentNode.classList.add('has-jax'); + } + }); + }, '', false] + } + } + }; + NexT.utils.getScript(CONFIG.mathjax.js, { + attributes: { + defer: true + } + }); + } else { + MathJax.startup.document.state(0); + MathJax.typesetClear(); + MathJax.texReset(); + MathJax.typesetPromise(); + } +}); diff --git a/js/third-party/pace.js b/js/third-party/pace.js new file mode 100644 index 0000000..c22d59f --- /dev/null +++ b/js/third-party/pace.js @@ -0,0 +1,7 @@ +/* global Pace */ + +Pace.options.restartOnPushState = false; + +document.addEventListener('pjax:send', () => { + Pace.restart(); +}); diff --git a/js/third-party/quicklink.js b/js/third-party/quicklink.js new file mode 100644 index 0000000..2543ad1 --- /dev/null +++ b/js/third-party/quicklink.js @@ -0,0 +1,37 @@ +/* global CONFIG, quicklink */ + +(function() { + if (typeof CONFIG.quicklink.ignores === 'string') { + const ignoresStr = `[${CONFIG.quicklink.ignores}]`; + CONFIG.quicklink.ignores = JSON.parse(ignoresStr); + } + + let resetFn = null; + + const onRefresh = () => { + if (resetFn) resetFn(); + if (!CONFIG.quicklink.enable) return; + + let ignoresArr = CONFIG.quicklink.ignores || []; + if (!Array.isArray(ignoresArr)) { + ignoresArr = [ignoresArr]; + } + + resetFn = quicklink.listen({ + timeout : CONFIG.quicklink.timeout, + priority: CONFIG.quicklink.priority, + ignores : [ + uri => uri.includes('#'), + uri => uri === CONFIG.quicklink.url, + ...ignoresArr + ] + }); + }; + + if (CONFIG.quicklink.delay) { + window.addEventListener('load', onRefresh); + document.addEventListener('pjax:success', onRefresh); + } else { + document.addEventListener('page:loaded', onRefresh); + } +})(); diff --git a/js/third-party/search/algolia-search.js b/js/third-party/search/algolia-search.js new file mode 100644 index 0000000..12a554c --- /dev/null +++ b/js/third-party/search/algolia-search.js @@ -0,0 +1,130 @@ +/* global instantsearch, algoliasearch, CONFIG, pjax */ + +document.addEventListener('DOMContentLoaded', () => { + const { indexName, appID, apiKey, hits } = CONFIG.algolia; + + const search = instantsearch({ + indexName, + searchClient : algoliasearch(appID, apiKey), + searchFunction: helper => { + if (document.querySelector('.search-input').value) { + helper.search(); + } + } + }); + + if (typeof pjax === 'object') { + search.on('render', () => { + pjax.refresh(document.querySelector('.algolia-hits')); + }); + } + + // Registering Widgets + search.addWidgets([ + instantsearch.widgets.configure({ + hitsPerPage: hits.per_page || 10 + }), + + instantsearch.widgets.searchBox({ + container : '.search-input-container', + placeholder : CONFIG.i18n.placeholder, + // Hide default icons of algolia search + showReset : false, + showSubmit : false, + showLoadingIndicator: false, + cssClasses : { + input: 'search-input' + } + }), + + instantsearch.widgets.stats({ + container: '.algolia-stats', + templates: { + text: data => { + const stats = CONFIG.i18n.hits_time + .replace('${hits}', data.nbHits) + .replace('${time}', data.processingTimeMS); + return `${stats} +
`;
+ }
+ },
+ cssClasses: {
+ text: 'search-stats'
+ }
+ }),
+
+ instantsearch.widgets.hits({
+ container : '.algolia-hits',
+ escapeHTML: false,
+ templates : {
+ item: data => {
+ const { title, excerpt, excerptStrip, contentStripTruncate } = data._highlightResult;
+ let result = `${title.value}`;
+ const content = excerpt || excerptStrip || contentStripTruncate;
+ if (content && content.value) {
+ const div = document.createElement('div');
+ div.innerHTML = content.value;
+ result += `${div.textContent.substring(0, 100)}...
`; + } + return result; + }, + empty: data => { + return `
+ ${CONFIG.i18n.empty.replace('${query}', data.query)}
+
`;
+ }
+ },
+ cssClasses: {
+ list: 'search-result-list'
+ }
+ }),
+
+ instantsearch.widgets.pagination({
+ container: '.algolia-pagination',
+ scrollTo : false,
+ showFirst: false,
+ showLast : false,
+ templates: {
+ first : '',
+ last : '',
+ previous: '',
+ next : ''
+ },
+ cssClasses: {
+ list : ['pagination', 'algolia-pagination'],
+ item : 'pagination-item',
+ link : 'page-number',
+ selectedItem: 'current',
+ disabledItem: 'disabled-item'
+ }
+ })
+ ]);
+
+ search.start();
+
+ // Handle and trigger popup window
+ document.querySelectorAll('.popup-trigger').forEach(element => {
+ element.addEventListener('click', () => {
+ document.body.classList.add('search-active');
+ setTimeout(() => document.querySelector('.search-input').focus(), 500);
+ });
+ });
+
+ // Monitor main search box
+ const onPopupClose = () => {
+ document.body.classList.remove('search-active');
+ };
+
+ document.querySelector('.search-pop-overlay').addEventListener('click', event => {
+ if (event.target === document.querySelector('.search-pop-overlay')) {
+ onPopupClose();
+ }
+ });
+ document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose);
+ document.addEventListener('pjax:success', onPopupClose);
+ window.addEventListener('keyup', event => {
+ if (event.key === 'Escape') {
+ onPopupClose();
+ }
+ });
+});
diff --git a/js/third-party/search/local-search.js b/js/third-party/search/local-search.js
new file mode 100644
index 0000000..92a264d
--- /dev/null
+++ b/js/third-party/search/local-search.js
@@ -0,0 +1,99 @@
+/* global CONFIG, pjax, LocalSearch */
+
+document.addEventListener('DOMContentLoaded', () => {
+ if (!CONFIG.path) {
+ // Search DB path
+ console.warn('`hexo-generator-searchdb` plugin is not installed!');
+ return;
+ }
+ const localSearch = new LocalSearch({
+ path : CONFIG.path,
+ top_n_per_article: CONFIG.localsearch.top_n_per_article,
+ unescape : CONFIG.localsearch.unescape
+ });
+
+ const input = document.querySelector('.search-input');
+
+ const inputEventFunction = () => {
+ if (!localSearch.isfetched) return;
+ const searchText = input.value.trim().toLowerCase();
+ const keywords = searchText.split(/[-\s]+/);
+ const container = document.querySelector('.search-result-container');
+ let resultItems = [];
+ if (searchText.length > 0) {
+ // Perform local searching
+ resultItems = localSearch.getResultItems(keywords);
+ }
+ if (keywords.length === 1 && keywords[0] === '') {
+ container.classList.add('no-result');
+ container.innerHTML = '';
+ } else if (resultItems.length === 0) {
+ container.classList.add('no-result');
+ container.innerHTML = '';
+ } else {
+ resultItems.sort((left, right) => {
+ if (left.includedCount !== right.includedCount) {
+ return right.includedCount - left.includedCount;
+ } else if (left.hitCount !== right.hitCount) {
+ return right.hitCount - left.hitCount;
+ }
+ return right.id - left.id;
+ });
+ const stats = CONFIG.i18n.hits.replace('${hits}', resultItems.length);
+
+ container.classList.remove('no-result');
+ container.innerHTML = `${stats}
+ +
- ${resultItems.map(result => result.item).join('')}
');
+ const button = target.querySelector('.copy-btn');
+ button.addEventListener('click', () => {
+ const lines = element.querySelector('.code') || element.querySelector('code');
+ const code = lines.innerText;
+ if (navigator.clipboard) {
+ // https://caniuse.com/mdn-api_clipboard_writetext
+ navigator.clipboard.writeText(code).then(() => {
+ button.querySelector('i').className = 'fa fa-check-circle fa-fw';
+ }, () => {
+ button.querySelector('i').className = 'fa fa-times-circle fa-fw';
+ });
+ } else {
+ const ta = document.createElement('textarea');
+ ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
+ ta.style.position = 'absolute';
+ ta.style.opacity = '0';
+ ta.readOnly = true;
+ ta.value = code;
+ document.body.append(ta);
+ ta.select();
+ ta.setSelectionRange(0, code.length);
+ ta.readOnly = false;
+ const result = document.execCommand('copy');
+ button.querySelector('i').className = result ? 'fa fa-check-circle fa-fw' : 'fa fa-times-circle fa-fw';
+ ta.blur(); // For iOS
+ button.blur();
+ document.body.removeChild(ta);
+ }
+ });
+ element.addEventListener('mouseleave', () => {
+ setTimeout(() => {
+ button.querySelector('i').className = 'fa fa-copy fa-fw';
+ }, 300);
+ });
+ });
+ },
+
+ wrapTableWithBox: function() {
+ document.querySelectorAll('table').forEach(element => {
+ const box = document.createElement('div');
+ box.className = 'table-container';
+ element.wrap(box);
+ });
+ },
+
+ registerVideoIframe: function() {
+ document.querySelectorAll('iframe').forEach(element => {
+ const supported = [
+ 'www.youtube.com',
+ 'player.vimeo.com',
+ 'player.youku.com',
+ 'player.bilibili.com',
+ 'www.tudou.com'
+ ].some(host => element.src.includes(host));
+ if (supported && !element.parentNode.matches('.video-container')) {
+ const box = document.createElement('div');
+ box.className = 'video-container';
+ element.wrap(box);
+ const width = Number(element.width);
+ const height = Number(element.height);
+ if (width && height) {
+ box.style.paddingTop = (height / width * 100) + '%';
+ }
+ }
+ });
+ },
+
+ updateActiveNav: function() {
+ if (!Array.isArray(NexT.utils.sections)) return;
+ let index = NexT.utils.sections.findIndex(element => {
+ return element && element.getBoundingClientRect().top > 10;
+ });
+ if (index === -1) {
+ index = NexT.utils.sections.length - 1;
+ } else if (index > 0) {
+ index--;
+ }
+ this.activateNavByIndex(index);
+ },
+
+ registerScrollPercent: function() {
+ const backToTop = document.querySelector('.back-to-top');
+ const readingProgressBar = document.querySelector('.reading-progress-bar');
+ // For init back to top in sidebar if page was scrolled after page refresh.
+ window.addEventListener('scroll', () => {
+ if (backToTop || readingProgressBar) {
+ const contentHeight = document.body.scrollHeight - window.innerHeight;
+ const scrollPercent = contentHeight > 0 ? Math.min(100 * window.scrollY / contentHeight, 100) : 0;
+ if (backToTop) {
+ backToTop.classList.toggle('back-to-top-on', Math.round(scrollPercent) >= 5);
+ backToTop.querySelector('span').innerText = Math.round(scrollPercent) + '%';
+ }
+ if (readingProgressBar) {
+ readingProgressBar.style.setProperty('--progress', scrollPercent.toFixed(2) + '%');
+ }
+ }
+ this.updateActiveNav();
+ }, { passive: true });
+
+ backToTop && backToTop.addEventListener('click', () => {
+ window.anime({
+ targets : document.scrollingElement,
+ duration : 500,
+ easing : 'linear',
+ scrollTop: 0
+ });
+ });
+ },
+
+ /**
+ * Tabs tag listener (without twitter bootstrap).
+ */
+ registerTabsTag: function() {
+ // Binding `nav-tabs` & `tab-content` by real time permalink changing.
+ document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
+ element.addEventListener('click', event => {
+ event.preventDefault();
+ // Prevent selected tab to select again.
+ if (element.classList.contains('active')) return;
+ const nav = element.parentNode;
+ // Get the height of `tab-pane` which is activated before, and set it as the height of `tab-content` with extra margin / paddings.
+ const tabContent = nav.nextElementSibling;
+ tabContent.style.overflow = 'hidden';
+ tabContent.style.transition = 'height 1s';
+ // Comment system selection tab does not contain .active class.
+ const activeTab = tabContent.querySelector('.active') || tabContent.firstElementChild;
+ // Hight might be `auto`.
+ const prevHeight = parseInt(window.getComputedStyle(activeTab).height.replace('px', ''), 10) || 0;
+ const paddingTop = parseInt(window.getComputedStyle(activeTab).paddingTop.replace('px', ''), 10);
+ const marginBottom = parseInt(window.getComputedStyle(activeTab.firstElementChild).marginBottom.replace('px', ''), 10);
+ tabContent.style.height = prevHeight + paddingTop + marginBottom + 'px';
+ // Add & Remove active class on `nav-tabs` & `tab-content`.
+ [...nav.children].forEach(target => {
+ target.classList.toggle('active', target === element);
+ });
+ // https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
+ const tActive = document.getElementById(element.querySelector('a').getAttribute('href').replace('#', ''));
+ [...tActive.parentNode.children].forEach(target => {
+ target.classList.toggle('active', target === tActive);
+ });
+ // Trigger event
+ tActive.dispatchEvent(new Event('tabs:click', {
+ bubbles: true
+ }));
+ // Get the height of `tab-pane` which is activated now.
+ const hasScrollBar = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
+ const currHeight = parseInt(window.getComputedStyle(tabContent.querySelector('.active')).height.replace('px', ''), 10);
+ // Reset the height of `tab-content` and see the animation.
+ tabContent.style.height = currHeight + paddingTop + marginBottom + 'px';
+ // Change the height of `tab-content` may cause scrollbar show / disappear, which may result in the change of the `tab-pane`'s height
+ setTimeout(() => {
+ if ((document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)) !== hasScrollBar) {
+ tabContent.style.transition = 'height 0.3s linear';
+ // After the animation, we need reset the height of `tab-content` again.
+ const currHeightAfterScrollBarChange = parseInt(window.getComputedStyle(tabContent.querySelector('.active')).height.replace('px', ''), 10);
+ tabContent.style.height = currHeightAfterScrollBarChange + paddingTop + marginBottom + 'px';
+ }
+ // Remove all the inline styles, and let the height be adaptive again.
+ setTimeout(() => {
+ tabContent.style.transition = '';
+ tabContent.style.height = '';
+ }, 250);
+ }, 1000);
+ if (!CONFIG.stickytabs) return;
+ const offset = nav.parentNode.getBoundingClientRect().top + window.scrollY + 10;
+ window.anime({
+ targets : document.scrollingElement,
+ duration : 500,
+ easing : 'linear',
+ scrollTop: offset
+ });
+ });
+ });
+
+ window.dispatchEvent(new Event('tabs:register'));
+ },
+
+ registerCanIUseTag: function() {
+ // Get responsive height passed from iframe.
+ window.addEventListener('message', ({ data }) => {
+ if (typeof data === 'string' && data.includes('ciu_embed')) {
+ const featureID = data.split(':')[1];
+ const height = data.split(':')[2];
+ document.querySelector(`iframe[data-feature=${featureID}]`).style.height = parseInt(height, 10) + 5 + 'px';
+ }
+ }, false);
+ },
+
+ registerActiveMenuItem: function() {
+ document.querySelectorAll('.menu-item a[href]').forEach(target => {
+ const isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', '');
+ const isSubPath = !CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname);
+ target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath));
+ });
+ },
+
+ registerLangSelect: function() {
+ const selects = document.querySelectorAll('.lang-select');
+ selects.forEach(sel => {
+ sel.value = CONFIG.page.lang;
+ sel.addEventListener('change', () => {
+ const target = sel.options[sel.selectedIndex];
+ document.querySelectorAll('.lang-select-label span').forEach(span => {
+ span.innerText = target.text;
+ });
+ // Disable Pjax to force refresh translation of menu item
+ window.location.href = target.dataset.href;
+ });
+ });
+ },
+
+ registerSidebarTOC: function() {
+ this.sections = [...document.querySelectorAll('.post-toc:not(.placeholder-toc) li a.nav-link')].map(element => {
+ const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', ''));
+ // TOC item animation navigate.
+ element.addEventListener('click', event => {
+ event.preventDefault();
+ const offset = target.getBoundingClientRect().top + window.scrollY;
+ window.anime({
+ targets : document.scrollingElement,
+ duration : 500,
+ easing : 'linear',
+ scrollTop: offset,
+ complete : () => {
+ history.pushState(null, document.title, element.href);
+ }
+ });
+ });
+ return target;
+ });
+ this.updateActiveNav();
+ },
+
+ registerPostReward: function() {
+ const button = document.querySelector('.reward-container button');
+ if (!button) return;
+ button.addEventListener('click', () => {
+ document.querySelector('.post-reward').classList.toggle('active');
+ });
+ },
+
+ activateNavByIndex: function(index) {
+ const nav = document.querySelector('.post-toc:not(.placeholder-toc) .nav');
+ if (!nav) return;
+
+ const navItemList = nav.querySelectorAll('.nav-item');
+ const target = navItemList[index];
+ if (!target || target.classList.contains('active-current')) return;
+
+ const singleHeight = navItemList[navItemList.length - 1].offsetHeight;
+
+ nav.querySelectorAll('.active').forEach(navItem => {
+ navItem.classList.remove('active', 'active-current');
+ });
+ target.classList.add('active', 'active-current');
+
+ let activateEle = target.querySelector('.nav-child') || target.parentElement;
+ let navChildHeight = 0;
+
+ while (nav.contains(activateEle)) {
+ if (activateEle.classList.contains('nav-item')) {
+ activateEle.classList.add('active');
+ } else { // .nav-child or .nav
+ // scrollHeight isn't reliable for transitioning child items.
+ // The last nav-item in a list has a margin-bottom of 5px.
+ navChildHeight += (singleHeight * activateEle.childElementCount) + 5;
+ activateEle.style.setProperty('--height', `${navChildHeight}px`);
+ }
+ activateEle = activateEle.parentElement;
+ }
+
+ // Scrolling to center active TOC element if TOC content is taller then viewport.
+ const tocElement = document.querySelector(CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini' ? '.sidebar-panel-container' : '.sidebar');
+ if (!document.querySelector('.sidebar-toc-active')) return;
+ window.anime({
+ targets : tocElement,
+ duration : 200,
+ easing : 'linear',
+ scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top
+ });
+ },
+
+ updateSidebarPosition: function() {
+ if (window.innerWidth < 1200 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
+ // Expand sidebar on post detail page by default, when post has a toc.
+ const hasTOC = document.querySelector('.post-toc:not(.placeholder-toc)');
+ let display = CONFIG.page.sidebar;
+ if (typeof display !== 'boolean') {
+ // There's no definition sidebar in the page front-matter.
+ display = CONFIG.sidebar.display === 'always' || (CONFIG.sidebar.display === 'post' && hasTOC);
+ }
+ if (display) {
+ window.dispatchEvent(new Event('sidebar:show'));
+ }
+ },
+
+ activateSidebarPanel: function(index) {
+ const sidebar = document.querySelector('.sidebar-inner');
+ const activeClassNames = ['sidebar-toc-active', 'sidebar-overview-active'];
+ if (sidebar.classList.contains(activeClassNames[index])) return;
+
+ const panelContainer = sidebar.querySelector('.sidebar-panel-container');
+ const tocPanel = panelContainer.firstElementChild;
+ const overviewPanel = panelContainer.lastElementChild;
+
+ let postTOCHeight = tocPanel.scrollHeight;
+ // For TOC activation, try to use the animated TOC height
+ if (index === 0) {
+ const nav = tocPanel.querySelector('.nav');
+ if (nav) {
+ postTOCHeight = parseInt(nav.style.getPropertyValue('--height'), 10);
+ }
+ }
+ const panelHeights = [
+ postTOCHeight,
+ overviewPanel.scrollHeight
+ ];
+ panelContainer.style.setProperty('--inactive-panel-height', `${panelHeights[1 - index]}px`);
+ panelContainer.style.setProperty('--active-panel-height', `${panelHeights[index]}px`);
+
+ sidebar.classList.replace(activeClassNames[1 - index], activeClassNames[index]);
+ },
+
+ getScript: function(src, options = {}, legacyCondition) {
+ if (typeof options === 'function') {
+ return this.getScript(src, {
+ condition: legacyCondition
+ }).then(options);
+ }
+ const {
+ condition = false,
+ attributes: {
+ id = '',
+ async = false,
+ defer = false,
+ crossOrigin = '',
+ dataset = {},
+ ...otherAttributes
+ } = {},
+ parentNode = null
+ } = options;
+ return new Promise((resolve, reject) => {
+ if (condition) {
+ resolve();
+ } else {
+ const script = document.createElement('script');
+
+ if (id) script.id = id;
+ if (crossOrigin) script.crossOrigin = crossOrigin;
+ script.async = async;
+ script.defer = defer;
+ Object.assign(script.dataset, dataset);
+ Object.entries(otherAttributes).forEach(([name, value]) => {
+ script.setAttribute(name, String(value));
+ });
+
+ script.onload = resolve;
+ script.onerror = reject;
+
+ if (typeof src === 'object') {
+ const { url, integrity } = src;
+ script.src = url;
+ if (integrity) {
+ script.integrity = integrity;
+ script.crossOrigin = 'anonymous';
+ }
+ } else {
+ script.src = src;
+ }
+ (parentNode || document.head).appendChild(script);
+ }
+ });
+ },
+
+ loadComments: function(selector, legacyCallback) {
+ if (legacyCallback) {
+ return this.loadComments(selector).then(legacyCallback);
+ }
+ return new Promise(resolve => {
+ const element = document.querySelector(selector);
+ if (!CONFIG.comments.lazyload || !element) {
+ resolve();
+ return;
+ }
+ const intersectionObserver = new IntersectionObserver((entries, observer) => {
+ const entry = entries[0];
+ if (!entry.isIntersecting) return;
+
+ resolve();
+ observer.disconnect();
+ });
+ intersectionObserver.observe(element);
+ });
+ }
+};
diff --git a/rss2.xml b/rss2.xml
new file mode 100644
index 0000000..6385a58
--- /dev/null
+++ b/rss2.xml
@@ -0,0 +1,130 @@
+
+
在前端开发中可以使用闭包实现一个简单的单例模式，将一些配置内容或者一些其他内容放在一个单例中使用其他内容访问。
我们将通过闭包实现一个配置信息的管理，首先我们写一个简单的闭包代码：
1 | const createConfig = (() { |
但是我们要实现一个单例模式，就要在再次返回instance前做判断，如果没有 instance 要对他进行赋值。
1 | const createConfig = (() => { |
这样就是一个简单的单例模式的代码。
我们不知想要一个简单的单例模式，也想要一个可以设置删除的单例模式，我就的config 就不应该是一个简单的配置对象，而是一个对象其中包含简单的配置对象。
1 | const createConfig = (() => { |
将 对象
{6: 46, 8: 23, 14: 5, 10: 3}按照值的顺序排列。
由于做开始他说的一个数组，说这个题的时候我以为是类数组对象，结果是是如上的对象，排序嘛，（不考虑时间复杂度和空间复杂度的话）基本上没什么难度， 但是一直有一个疑惑在脑中，Object 不是无序的吗？
本文主要探讨不同的 Object 定义方式（或者说声明方式）是否影响”Object 顺序“，”Object 顺序“是什么样的，以及常见处理”Object顺序“的方式。
首先再次之前我的认为是”对象是无序的，数组是有序的，如果处理对象的顺序的话，还是使用数组对象[{key, value}]的方式“ 。
在 ECMA-262_3rd_edition_december_1999 中有提到：
4.3.3 Object
An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.
也就是在 ES3 中是 Objiect 是乱序的，但是在 ES6 中逐渐开始在 Object 的中开始添加 Object 部分放的顺序之说。
不同浏览器在处理 for...in 时的解析顺序时不同的，在 Chrome 和 Opera 中遵循的是 ECMA-262 第五版本规范，而在 Firefox 和 Safari遵循的是 ECMA-262 第三版本规范。
在通常情况下，如果要处理对象的排序，我建议使用数组处理，也就是将对象处理为 [{ key, value }] 这样的的数组形式，按照数组排序，因为我还是觉得对象是无序的，尽管他是按照一定的顺序排序的，但为了避免在不同的浏览器中的排序不同还是将他作为数组处理比较好。
参考文献
]]>个人需需要将 Obsidian 的 markdown 文档放置在一个私有仓库，将 Hexo Template 放置在共有仓库，github pages 也放在另一个仓库，当然 Hexo Template 可以和 Github Pages 放在相同的仓库中，如果Hexo Template也需要分离的话在将其分离。
静态博客框架仓库和部署仓库分离的好处是如果更换静态博客框架例如Gatsby，VuePress的话，可以不需要修改部署仓库只需要新建新的静态博客框架仓库，调整Obsidian 仓库的 Actions 就可以。
分离的坏处就是需要有一个额外的仓库管理静态博客框架，当然个人觉得好处大于坏处。
在 Obsidian 仓库，和 Hexo 仓库分别设置了两个 Actions，Obsidian 的仓库 Actions 是主 Actions，Hexo 的 Actions 只是为了触发主 Actions。
也可以将主 Actions 放在 Hexo 上，甚至应该放到静态博客框架仓库里面，如果要更换静态博客框架，肯定需要重新修改主 Actions ，而且是大幅修改，而 Obsidian Actions 只需要修改触发的主 Actions 就可以，减少了不必要的 Obsidian 仓库的变动，如果没有仓库洁癖这些问题都是小问题。
本网站的部署 Actions 整体思路大致如下（ Local 代表本地仓库）：
sequenceDiagramparticipant Local as Localparticipant Obsidian as Obsidianparticipant Hexo as Hexo Templateparticipant Github as Github Pagesopt 推送 Obsidian 触发 Local->>Obsidian:推送 Obsidian->>Obsidian: 触发endopt 推送 Hexo template 触发 Local->>Hexo: 推送 par Hexo Actions Hexo->>Obsidian: 触发 endendpar Obsidian ActionsHexo->>Obsidian: 拉取Obsidian->>Obsidian:生成静态文件Obsidian->>Github:推送end]]>
!important>内联样式>ID选择器>类选择器>类型选择器
相信很多人对CSS优先级的理解也是这样的，但是一篇文章(CSS选择器的优先级（精讲版） (biancheng.net))上面书写了关于CSS 选择器优先级的计算规则的内容，使我开始对CSS优先级进行重新研究。
根据W3C给出关于选择器特异性(specificity，国内一般称优先级)的解释，选择器分为ABC三个等级，其中A为ID选择器，B包括类选择器、属性选择器和伪类，C包括类型选择器和伪元素，当然还存在一个通用选择器，但是通用选择器一般忽略。
| 等级 | 包含选择器 |
|---|---|
| A | 计算选择器中 ID 选择器的数量 |
| B | 计算选择器中类选择器、属性选择器和伪类的数量 |
| C | 计算选择器中类型选择器和伪元素的数量 |
优先级的计算，从A级开始到C级结束，如果到C级是两个选择器的优先级还是相等的那么有限选择靠后的选择器。
重复简单选择器
CSS选择器允许重复出现简单选择器，并且简单选择器的重复出现会增加优先级。
1 | .class.class{ |
也就是说如上代码中第一个选择器重复出现了.class选择器，第二个选择器只出现了一个.class选择器，这两种写法都是正确的，并且第一个选择器.class.class的优先级大于第二个选择器.class，所以结果是背景颜色将呈现红色。
| 选择器 | 优先级 (A, B, C) |
|---|---|
| .class.class | (0, 2, 0) |
| .class | (0, 1, 0) |
在低版本CSS中可能简单重复选择器会被忽略，如在ie8中重复id或被忽略，在ie5中重复的class或被忽略。
拒绝IE，从我做起！
特殊选择器
一些伪类和其他选择器中存在一些特殊的选择器，因此单独定义了这些特殊选择器的特异性。
- 选择器
:is()、:not()、:has()的优先级是选择器列表中最具有复杂性的选择器的优先级取代。 - 选择器
:nth-child()、:nth-last-child()的优先级是伪类本身的优先级（计为一个伪类选择器，也就是计为B），再加上选择器列表中最具复杂性的选择器的优先级。 - 选择器
:where()伪类的优先级被零代替，也就是没有优先级，再优先级计算中不做数。 - 通用选择符以及其他选择符在优先级中不计数。
优先级计算
| 选择器 | 优先级 (A, B, C) |
|---|---|
| .class | (0, 1, 0) |
| #Red | (1, 0, 0) |
| .container :is(.container>#Red, .container>.class) | (1, 2, 0) |
| .container #Red.class:nth-child(1) | (1, 3, 0) |
| :is(.container>.class.class) | (0, 3, 0) |
| #Red:is(.container>.class) | (1, 2, 0) |
| .container div:nth-child(1) | (0, 2, 1) |
| :is(#Red.class) | (1, 1, 0) |
| #Red.class | (1, 1, 0) |
| #Red.class:nth-child(1) | (1, 2, 0) |
| #Red#Red | (2, 0, 0) |
specificity求和
在一些其他文档中将讲A、B、C分别比作100,10,1 进行求和，是不准确的，如果按照这样做那么10个class是不是相当于一个id，显然不是。
在CSS Level 1、Selectors Level 3中也有这样的描述。
在主流浏览器中高等级高于低等级是即使ABC求和相同也不会优先使用后声明的CSS。
造成这样的原因是权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。也可以理解选择器的权值不能进位，或者理解为选择器权值ABC单独计算比较。
关于!important
MDN指出“使用 !important 是一个坏习惯，应该尽量避免”，并给出了使用!important 的情况：
- 一定要优先考虑使用样式规则的优先级来解决问题而不是
!important - 只有在需要覆盖全站或外部 CSS 的特定页面中使用
!important - 永远不要在你的插件中使用
!important - 永远不要在全站范围的 CSS 代码中使用
!important
以及替代 !important的方法:
- 更好地利用 CSS 级联属性
- 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。
- 对于（2）的一种特殊情况，当您无其他要指定的内容时，请复制简单的选择器以增加特异性。
推荐阅读优先级 - CSS（层叠样式表） | MDN (mozilla.org)，了解更多!important的使用意见。
其他 CSS 优先规则
CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。
CSS 优先规则2： “直接样式”比”祖先样式”优先级高。
CSS 优先规则3： 优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。
CSS 优先规则4： 计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照”就近原则”来判断。
CSS 优先规则5： 属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。
注意: 文档树中元素的接近度（Proximity of elements）对优先级没有影响。
参考文献
]]>在前端开发中可以使用闭包实现一个简单的单例模式，将一些配置内容或者一些其他内容放在一个单例中使用其他内容访问。
我们将通过闭包实现一个配置信息的管理，首先我们写一个简单的闭包代码：
1 | const createConfig = (() { |
但是我们要实现一个单例模式，就要在再次返回instance前做判断，如果没有 instance 要对他进行赋值。
1 | const createConfig = (() => { |
这样就是一个简单的单例模式的代码。
我们不知想要一个简单的单例模式，也想要一个可以设置删除的单例模式，我就的config 就不应该是一个简单的配置对象，而是一个对象其中包含简单的配置对象。
1 | const createConfig = (() => { |
将 对象
{6: 46, 8: 23, 14: 5, 10: 3}按照值的顺序排列。
由于做开始他说的一个数组，说这个题的时候我以为是类数组对象，结果是是如上的对象，排序嘛，（不考虑时间复杂度和空间复杂度的话）基本上没什么难度， 但是一直有一个疑惑在脑中，Object 不是无序的吗？
本文主要探讨不同的 Object 定义方式（或者说声明方式）是否影响”Object 顺序“，”Object 顺序“是什么样的，以及常见处理”Object顺序“的方式。
首先再次之前我的认为是”对象是无序的，数组是有序的，如果处理对象的顺序的话，还是使用数组对象[{key, value}]的方式“ 。
在 ECMA-262_3rd_edition_december_1999 中有提到：
4.3.3 Object
An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.
也就是在 ES3 中是 Objiect 是乱序的，但是在 ES6 中逐渐开始在 Object 的中开始添加 Object 部分放的顺序之说。
不同浏览器在处理 for...in 时的解析顺序时不同的，在 Chrome 和 Opera 中遵循的是 ECMA-262 第五版本规范，而在 Firefox 和 Safari遵循的是 ECMA-262 第三版本规范。
在通常情况下，如果要处理对象的排序，我建议使用数组处理，也就是将对象处理为 [{ key, value }] 这样的的数组形式，按照数组排序，因为我还是觉得对象是无序的，尽管他是按照一定的顺序排序的，但为了避免在不同的浏览器中的排序不同还是将他作为数组处理比较好。
参考文献
]]>个人需需要将 Obsidian 的 markdown 文档放置在一个私有仓库，将 Hexo Template 放置在共有仓库，github pages 也放在另一个仓库，当然 Hexo Template 可以和 Github Pages 放在相同的仓库中，如果Hexo Template也需要分离的话在将其分离。
静态博客框架仓库和部署仓库分离的好处是如果更换静态博客框架例如Gatsby，VuePress的话，可以不需要修改部署仓库只需要新建新的静态博客框架仓库，调整Obsidian 仓库的 Actions 就可以。
分离的坏处就是需要有一个额外的仓库管理静态博客框架，当然个人觉得好处大于坏处。
在 Obsidian 仓库，和 Hexo 仓库分别设置了两个 Actions，Obsidian 的仓库 Actions 是主 Actions，Hexo 的 Actions 只是为了触发主 Actions。
也可以将主 Actions 放在 Hexo 上，甚至应该放到静态博客框架仓库里面，如果要更换静态博客框架，肯定需要重新修改主 Actions ，而且是大幅修改，而 Obsidian Actions 只需要修改触发的主 Actions 就可以，减少了不必要的 Obsidian 仓库的变动，如果没有仓库洁癖这些问题都是小问题。
本网站的部署 Actions 整体思路大致如下（ Local 代表本地仓库）：
sequenceDiagramparticipant Local as Localparticipant Obsidian as Obsidianparticipant Hexo as Hexo Templateparticipant Github as Github Pagesopt 推送 Obsidian 触发 Local->>Obsidian:推送 Obsidian->>Obsidian: 触发endopt 推送 Hexo template 触发 Local->>Hexo: 推送 par Hexo Actions Hexo->>Obsidian: 触发 endendpar Obsidian ActionsHexo->>Obsidian: 拉取Obsidian->>Obsidian:生成静态文件Obsidian->>Github:推送end]]>
!important>内联样式>ID选择器>类选择器>类型选择器
相信很多人对CSS优先级的理解也是这样的，但是一篇文章(CSS选择器的优先级（精讲版） (biancheng.net))上面书写了关于CSS 选择器优先级的计算规则的内容，使我开始对CSS优先级进行重新研究。
根据W3C给出关于选择器特异性(specificity，国内一般称优先级)的解释，选择器分为ABC三个等级，其中A为ID选择器，B包括类选择器、属性选择器和伪类，C包括类型选择器和伪元素，当然还存在一个通用选择器，但是通用选择器一般忽略。
| 等级 | 包含选择器 |
|---|---|
| A | 计算选择器中 ID 选择器的数量 |
| B | 计算选择器中类选择器、属性选择器和伪类的数量 |
| C | 计算选择器中类型选择器和伪元素的数量 |
优先级的计算，从A级开始到C级结束，如果到C级是两个选择器的优先级还是相等的那么有限选择靠后的选择器。
重复简单选择器
CSS选择器允许重复出现简单选择器，并且简单选择器的重复出现会增加优先级。
1 | .class.class{ |
也就是说如上代码中第一个选择器重复出现了.class选择器，第二个选择器只出现了一个.class选择器，这两种写法都是正确的，并且第一个选择器.class.class的优先级大于第二个选择器.class，所以结果是背景颜色将呈现红色。
| 选择器 | 优先级 (A, B, C) |
|---|---|
| .class.class | (0, 2, 0) |
| .class | (0, 1, 0) |
在低版本CSS中可能简单重复选择器会被忽略，如在ie8中重复id或被忽略，在ie5中重复的class或被忽略。
拒绝IE，从我做起！
特殊选择器
一些伪类和其他选择器中存在一些特殊的选择器，因此单独定义了这些特殊选择器的特异性。
- 选择器
:is()、:not()、:has()的优先级是选择器列表中最具有复杂性的选择器的优先级取代。 - 选择器
:nth-child()、:nth-last-child()的优先级是伪类本身的优先级（计为一个伪类选择器，也就是计为B），再加上选择器列表中最具复杂性的选择器的优先级。 - 选择器
:where()伪类的优先级被零代替，也就是没有优先级，再优先级计算中不做数。 - 通用选择符以及其他选择符在优先级中不计数。
优先级计算
| 选择器 | 优先级 (A, B, C) |
|---|---|
| .class | (0, 1, 0) |
| #Red | (1, 0, 0) |
| .container :is(.container>#Red, .container>.class) | (1, 2, 0) |
| .container #Red.class:nth-child(1) | (1, 3, 0) |
| :is(.container>.class.class) | (0, 3, 0) |
| #Red:is(.container>.class) | (1, 2, 0) |
| .container div:nth-child(1) | (0, 2, 1) |
| :is(#Red.class) | (1, 1, 0) |
| #Red.class | (1, 1, 0) |
| #Red.class:nth-child(1) | (1, 2, 0) |
| #Red#Red | (2, 0, 0) |
specificity求和
在一些其他文档中将讲A、B、C分别比作100,10,1 进行求和，是不准确的，如果按照这样做那么10个class是不是相当于一个id，显然不是。
在CSS Level 1、Selectors Level 3中也有这样的描述。
在主流浏览器中高等级高于低等级是即使ABC求和相同也不会优先使用后声明的CSS。
造成这样的原因是权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。也可以理解选择器的权值不能进位，或者理解为选择器权值ABC单独计算比较。
关于!important
MDN指出“使用 !important 是一个坏习惯，应该尽量避免”，并给出了使用!important 的情况：
- 一定要优先考虑使用样式规则的优先级来解决问题而不是
!important - 只有在需要覆盖全站或外部 CSS 的特定页面中使用
!important - 永远不要在你的插件中使用
!important - 永远不要在全站范围的 CSS 代码中使用
!important
以及替代 !important的方法:
- 更好地利用 CSS 级联属性
- 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。
- 对于（2）的一种特殊情况，当您无其他要指定的内容时，请复制简单的选择器以增加特异性。
推荐阅读优先级 - CSS（层叠样式表） | MDN (mozilla.org)，了解更多!important的使用意见。
其他 CSS 优先规则
CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。
CSS 优先规则2： “直接样式”比”祖先样式”优先级高。
CSS 优先规则3： 优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。
CSS 优先规则4： 计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照”就近原则”来判断。
CSS 优先规则5： 属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。
注意: 文档树中元素的接近度（Proximity of elements）对优先级没有影响。
参考文献
]]> 0%
\ No newline at end of file
diff --git a/tags/DevOps/index.html b/tags/DevOps/index.html
new file mode 100644
index 0000000..396654a
--- /dev/null
+++ b/tags/DevOps/index.html
@@ -0,0 +1 @@
+ 0%
\ No newline at end of file
diff --git a/tags/Github-Actions/index.html b/tags/Github-Actions/index.html
new file mode 100644
index 0000000..5db9e16
--- /dev/null
+++ b/tags/Github-Actions/index.html
@@ -0,0 +1 @@
+ 0%
\ No newline at end of file
diff --git "a/tags/WEB-\346\240\207\345\207\206/index.html" "b/tags/WEB-\346\240\207\345\207\206/index.html"
new file mode 100644
index 0000000..ea8709a
--- /dev/null
+++ "b/tags/WEB-\346\240\207\345\207\206/index.html"
@@ -0,0 +1 @@
+ 0%
\ No newline at end of file
diff --git "a/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.html" "b/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.html"
new file mode 100644
index 0000000..2535958
--- /dev/null
+++ "b/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.html"
@@ -0,0 +1 @@
+ 0%
\ No newline at end of file