refactor: 移除storage和注入型proto函数 [publish dev]

README.md

@@ -9,6 +9,7 @@
 - [ ] 引入新的 Inject 类技术 (长期)
 - [ ] 引入新的工作流程
 - [ ] 引入 CI 自动测试
+- [ ] 进行组件化重构 & 引入 Vue
 - [ ] 重构 player (暂时移除)
 - [ ] 优化 menu 配置格式
 - [ ] 优化和异步化 Smart Bundle 技术

UsageRestrictions.md

@@ -16,7 +16,7 @@
 ## 处理方式
 如果您违反了上述使用限制和AGPLv3的任何规定，ShokaX 项目组保留采取以下措施之一或多个的权利：
 - 发出警告通知并要求立即纠正违规行为；(根据`AGPLv3 八`)
-- 暂停或终止您对 ShokaX 及其子项目的使用权限并取消GPLv3授予您的权利；(根据`AGPLv3 八`)
+- 暂停或终止您对 ShokaX 及其子项目的使用权限并取消AGPLv3授予您的权利；(根据`AGPLv3 八`)
 - 取消您获取 ShokaX 社区支持和进行协作的权利；(社区管理)
 - 追究法律责任，包括要求赔偿因违规行为给 ShokaX 项目组造成的损失。(依照相关法律而定)
 

_config.yml

@@ -343,9 +343,6 @@ search:
   hits:
     per_page: 10
 
-# Dependencies: https://github.com/amehime/hexo-renderer-multi-markdown-it
-pangu: false
-
 #! ---------------------------------------------------------------
 #! DO NOT EDIT THE FOLLOWING `vendors` SETTINGS
 #! UNLESS YOU KNOW WHAT YOU ARE DOING

source/js/_app/components/comments.ts

@@ -23,7 +23,6 @@ export const walineComment = function () {
 }
 
 export const walinePageview = function () {
-  // TODO waline 上游此模块存在问题
   pageviewCount({
     serverURL: CONFIG.waline.serverURL,
     path: window.location.pathname
@@ -37,7 +36,6 @@ export const walineRecentComments = async function () {
     serverURL: CONFIG.waline.serverURL.replace(/\/+$/, ''),
     count: 10
   })
-  // TODO 疑似 waline API 返回格式与文档不一致，需要确认是否为上游问题
   // @ts-ignore
   comments.data.forEach(function (item) {
     let cText = (item.orig.length > 50) ? item.orig.substring(0, 50) + '...' : item.orig

source/js/_app/components/sidebar.ts

@@ -3,14 +3,12 @@
 import { CONFIG, Container, diffY, menuToggle, showContents, sideBar } from '../globals/globalVars'
 import { clipBoard } from '../globals/tools'
 import { pageScroll, transition } from '../library/anime'
-import { $dom } from '../library/dom'
-import initProto, { getHeight, setDisplay } from '../library/proto'
+import { getHeight, setDisplay } from '../library/proto'
 
-initProto()
 export const sideBarToggleHandle = (event:Event, force?:number) => {
-  if (sideBar.hasClass('on')) {
-    sideBar.removeClass('on')
-    menuToggle.removeClass('close')
+  if (sideBar.classList.contains('on')) {
+    sideBar.classList.remove('on')
+    menuToggle.classList.remove('close')
     if (force) {
       // @ts-ignore
       // noinspection JSConstantReassignment
@@ -25,8 +23,8 @@ export const sideBarToggleHandle = (event:Event, force?:number) => {
       sideBar.style = ''
     } else {
       transition(sideBar, 'slideRightIn', () => {
-        sideBar.addClass('on')
-        menuToggle.addClass('close')
+        sideBar.classList.add('on')
+        menuToggle.classList.add('close')
       })
     }
   }
@@ -61,29 +59,29 @@ export const sideBarTab = () => {
     const text = document.createTextNode(element.getAttribute('data-title'))
     span.appendChild(text)
     tab.appendChild(span)
-    tab.addClass(item + ' item')
+    tab.classList.add(item + ' item')
 
     if (active) {
-      element.addClass(active)
-      tab.addClass(active)
+      element.classList.add(active)
+      tab.classList.add(active)
     } else {
-      element.removeClass('active')
+      element.classList.remove('active')
     }
     tab.addEventListener('click', (event) => {
       const target = event.currentTarget as HTMLElement
-      if (target.hasClass('active')) return
+      if (target.classList.contains('active')) return
 
-      sideBar.find('.tab .item').forEach((element) => {
-        element.removeClass('active')
+      sideBar.querySelectorAll('.tab .item').forEach((element) => {
+        element.classList.remove('active')
       })
 
-      sideBar.find('.panel').forEach((element) => {
-        element.removeClass('active')
+      sideBar.querySelectorAll('.panel').forEach((element) => {
+        element.classList.remove('active')
       })
 
-      sideBar.querySelector('.panel.' + target.className.replace(' item', '')).addClass('active')
+      sideBar.querySelector('.panel.' + target.className.replace(' item', '')).classList.add('active')
 
-      target.addClass('active')
+      target.classList.add('active')
     })
 
     list.appendChild(tab)
@@ -104,39 +102,39 @@ export const sidebarTOC = () => {
 
     if (!target) return
 
-    if (target.hasClass('current')) {
+    if (target.classList.contains('current')) {
       return
     }
 
-    $dom.each('.toc .active', (element) => {
-      element && element.removeClass('active current')
+    document.querySelectorAll('.toc .active').forEach((element) => {
+      element && element.classList.remove('active current')
     })
 
     sections.forEach((element) => {
-      element && element.removeClass('active')
+      element && element.classList.remove('active')
     })
 
-    target.addClass('active current')
-    sections[index] && sections[index].addClass('active')
+    target.classList.add('active current')
+    sections[index] && sections[index].classList.add('active')
 
     let parent = <Element> target.parentNode
 
     while (!parent.matches('.contents')) {
       if (parent.matches('li')) {
-        parent.addClass('active')
+        parent.classList.add('active')
         const t = document.getElementById(decodeURIComponent(parent.querySelector('a.toc-link').getAttribute('href').replace('#', '')))
         if (t) {
-          t.addClass('active')
+          t.classList.add('active')
         }
       }
       parent = <Element> parent.parentNode
     }
     // Scrolling to center active TOC element if TOC content is taller than viewport.
-    if (getComputedStyle(sideBar).display !== 'none' && tocElement.hasClass('active')) {
+    if (getComputedStyle(sideBar).display !== 'none' && tocElement.classList.contains('active')) {
       pageScroll((tocElement as HTMLElement), target.offsetTop - ((tocElement as HTMLElement).offsetHeight / 4))
     }
   }
-  const navItems = $dom.all('.contents li')
+  const navItems = document.querySelectorAll<HTMLElement>('.contents li')
 
   if (navItems.length < 1) {
     return
@@ -222,18 +220,19 @@ export const goToCommentHandle = () => {
 }
 
 export const menuActive = () => {
-  $dom.each('.menu .item:not(.title)', (element) => {
+  document.querySelectorAll('.menu .item:not(.title)').forEach((element) => {
     const target = <HTMLAnchorElement> element.querySelector('a[href]')
-    const parentItem = element.parentNode.parentNode
+    const parentItem = element.parentNode.parentNode as HTMLElement
     if (!target) return
     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)
     const active = !target.onclick && target.hostname === location.hostname && (isSamePath || isSubPath)
-    element.toggleClass('active', active)
-    if (element.parentNode.querySelector('.active') && parentItem.hasClass('dropdown')) {
-      parentItem.removeClass('active').addClass('expand')
+    element.classList.toggle('active', active)
+    if (element.parentNode.querySelector('.active') && parentItem.classList.contains('dropdown')) {
+      parentItem.classList.remove('active')
+      parentItem.classList.add('expand')
     } else {
-      parentItem.removeClass('expand')
+      parentItem.classList.remove('expand')
     }
   })
 }

source/js/_app/globals/globalVars.ts

@@ -1,7 +1,4 @@
-import initProto from '../library/proto'
-
 export const CONFIG = shokax_CONFIG
-initProto()
 export const statics = CONFIG.statics.indexOf('//') > 0 ? CONFIG.statics : CONFIG.root
 export const scrollAction: { x: number, y: number } = { x: 0, y: 0 }
 export let diffY = 0

source/js/_app/globals/handles.ts

@@ -63,12 +63,12 @@ export const scrollHandle = () => {
   }
 
   // 控制导航栏的显示隐藏
-  siteNav.toggleClass('show', SHOW)
+  siteNav.classList.toggle('show', SHOW)
   // 控制网站 logo 的显示隐藏
-  toolBtn.toggleClass('affix', startScroll)
+  toolBtn.classList.toggle('affix', startScroll)
   // 控制侧边栏的显示隐藏，当滚动高度大于 headerHight 且窗口宽度大于 991px 时显示
-  siteBrand.toggleClass('affix', startScroll)
-  sideBar.toggleClass('affix', window.scrollY > headerHight && document.body.offsetWidth >= 991)
+  siteBrand.classList.toggle('affix', startScroll)
+  sideBar.classList.toggle('affix', window.scrollY > headerHight && document.body.offsetWidth >= 991)
   // 初始化滚动时导航栏的显示方向
   if (typeof scrollAction.y === 'undefined') {
     scrollAction.y = window.scrollY
@@ -77,11 +77,11 @@ export const scrollHandle = () => {
 
   // 控制滑动时导航栏显示
   if (diffY < 0) {
-    siteNav.removeClass('up')
-    siteNav.toggleClass('down', SHOW)
+    siteNav.classList.remove('up')
+    siteNav.classList.toggle('down', SHOW)
   } else if (diffY > 0) {
-    siteNav.removeClass('down')
-    siteNav.toggleClass('up', SHOW)
+    siteNav.classList.remove('down')
+    siteNav.classList.toggle('up', SHOW)
   } else { /* empty */ }
   scrollAction.y = window.scrollY
   // 计算滚动百分比
@@ -91,7 +91,7 @@ export const scrollHandle = () => {
     backToTop.querySelector('span').innerText = scrollPercent
   }
   // 更新百分比进度条的宽度
-  if (document.getElementById('sidebar').hasClass('affix') || document.getElementById('sidebar').hasClass('on')) {
+  if (document.getElementById('sidebar').classList.contains('affix') || document.getElementById('sidebar').classList.contains('on')) {
     setWidth(document.querySelector('.percent'), scrollPercent)
   }
 }

source/js/_app/globals/themeColor.ts

@@ -1,4 +1,3 @@
-import { $storage } from '../library/storage'
 import { CONFIG, HTML } from './globalVars'
 
 /**
@@ -8,12 +7,12 @@ export const changeTheme = (type?: string) => {
   const btn = document.querySelector('.theme .ic')
   if (type === 'dark') {
     HTML.setAttribute('data-theme', type)
-    btn.removeClass('i-sun')
-    btn.addClass('i-moon')
+    btn.classList.remove('i-sun')
+    btn.classList.add('i-moon')
   } else {
     HTML.removeAttribute('data-theme')
-    btn.removeClass('i-moon')
-    btn.addClass('i-sun')
+    btn.classList.remove('i-moon')
+    btn.classList.add('i-sun')
   }
 }
 
@@ -52,7 +51,7 @@ export const themeColorListener = () => {
     }
   })
 
-  const t = $storage.get('theme')
+  const t = localStorage.getItem('theme')
   if (t) {
     changeTheme(t)
   } else {

source/js/_app/globals/thirdparty.ts

@@ -9,7 +9,7 @@ export const Loader = {
   lock: false,
   show () {
     clearTimeout(this.timer)
-    document.body.removeClass('loaded')
+    document.body.classList.remove('loaded')
     loadCat.setAttribute('style', 'display:block')
     Loader.lock = false
   },
@@ -26,7 +26,7 @@ export const Loader = {
     if (CONFIG.loader.start) {
       transition(loadCat, 0)
     }
-    document.body.addClass('loaded')
+    document.body.classList.add('loaded')
     Loader.lock = true
   }
 }

source/js/_app/globals/tools.ts

@@ -1,6 +1,4 @@
 import { pageScroll } from '../library/anime'
-import { $dom } from '../library/dom'
-import { $storage } from '../library/storage'
 import { BODY, CONFIG, LOCAL_HASH, LOCAL_URL, scrollAction, setLocalHash } from './globalVars'
 import { createChild } from '../library/proto'
 
@@ -16,7 +14,7 @@ export const showtip = (msg: string): void | never => {
   })
 
   setTimeout(() => {
-    tipbox.addClass('hide')
+    tipbox.classList.add('hide')
     setTimeout(() => {
       BODY.removeChild(tipbox)
     }, 300)
@@ -27,7 +25,7 @@ export const pagePosition = () => {
   // 判断配置项是否开启了自动记录滚动位置
   if (CONFIG.auto_scroll) {
     // 将当前页面的滚动位置存入本地缓存
-    $storage.set(LOCAL_URL, String(scrollAction.y))
+    localStorage.setItem(LOCAL_URL, String(scrollAction.y))
   }
 }
 
@@ -37,14 +35,14 @@ export const positionInit = (comment?: boolean) => {
 
   let target = null
   if (LOCAL_HASH) {
-    $storage.del(LOCAL_URL)
+    localStorage.removeItem(LOCAL_URL)
     return
   }
 
   if (anchor) {
     target = document.querySelector(decodeURI(anchor))
   } else {
-    target = CONFIG.auto_scroll ? parseInt($storage.get(LOCAL_URL)) : 0
+    target = CONFIG.auto_scroll ? parseInt(localStorage.getItem(LOCAL_URL)) : 0
   }
 
   if (target) {