refactor: CSS架构拆分 [publish dev]

README.md

@@ -2,22 +2,22 @@
 此分支为 ShokaX 0.5 实验性变更分支，确保0.5开发期间0.4的维护不受影响
 
 计划更改：
-- 移除 pjax
-- 移除 quicklink
-- 移除 assetUrl 为基的动态 Vendor 机制
-- 移除 ShokaX Inject
-- 引入新的 Inject 类技术 (长期)
-- 引入新的工作流程
-- 引入 CI 自动测试
-- 重构 player (暂时移除)
-- 优化 menu 配置格式
-- 优化和异步化 Smart Bundle 技术
-- 优化 CSS 结构和加载
-- 修复/重置 fancybox
-- 修复模板长期遗留问题
-- 修复 images 遗留问题
-- 规范化配置文件
-- 规范化文档
+- [x] 移除 pjax
+- [x] 移除 quicklink
+- [x] 移除 assetUrl 为基的动态 Vendor 机制
+- [ ] 移除 ShokaX Inject
+- [ ] 引入新的 Inject 类技术 (长期)
+- [ ] 引入新的工作流程
+- [ ] 引入 CI 自动测试
+- [ ] 重构 player (暂时移除)
+- [ ] 优化 menu 配置格式
+- [ ] 优化和异步化 Smart Bundle 技术
+- [ ] 优化 CSS 结构和加载
+- [x] 修复/重置 fancybox
+- [ ] 修复模板长期遗留问题
+- [ ] 修复 images 遗留问题
+- [ ] 规范化配置文件
+- [ ] 规范化文档
 
 ## 📚子项目
 - [ShokaX docs](https://github.com/theme-shoka-x/shokaX-docs) ShokaX 主题文档 (正在编写中，欢迎加入！)

layout/_partials/head/head.pug

@@ -41,7 +41,6 @@ each dnsLink in dnslinks
 - var fontConfig = theme.font?.loadFromGoogle
 if fontConfig
     != _vendor_font()
-!= _css('app.css')
 != preloadjs()
 != load_async_css()
 
@@ -50,7 +49,6 @@ link(rel="stylesheet" media="none" onload="this.media='all'" href="https://s4.zs
 link(rel="stylesheet" media="none" onload="this.media='all'" href="https://s4.zstatic.net/ajax/libs/justifiedGallery/3.8.1/css/justifiedGallery.min.css")
 link(rel="stylesheet" media="none" onload="this.media='all'" href="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/katex.min.css")
 //link(rel="stylesheet" media="none" onload="this.media='all'" href="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/katex.min.css")
-!= _css('mermaid.css')
 if theme.experiments.cloudflarePatch
     != _js('cf-patch.js')
 

layout/_partials/layout.pug

@@ -20,6 +20,7 @@ html(lang=page.language?page.language:config.language, style=theme.grayMode ? 'f
 
         != partial('_partials/head/head_com.pug')
         != shokax_inject('head')
+        block head
         title
             block title
                 != `${alternate?alternate + " = ":""}${title}${subtitle?" = "+subtitle:""}`

layout/archive.pug

@@ -1,5 +1,8 @@
 extends _partials/layout.pug
 
+block head
+    != _css('page.css')
+
 block title
     if is_month()
         != `${page.year}${__('symbol.year')}/${page.month}${__('symbol.month')}`

layout/category.pug

@@ -1,5 +1,8 @@
 extends ./_partials/layout.pug
 
+block head
+    != _css('page.css')
+
 block title
     != `${__('title.category')}${__('symbol.colon')}${page.category}`
 

layout/index.pug

@@ -3,6 +3,9 @@ include _mixin/card.pug
 include _mixin/postmeta.pug
 include _mixin/segment.pug
 
+block head
+    != _css('page.css')
+
 block content
     div(class="index wrap")
         if page.current === 1

layout/page.pug

@@ -2,6 +2,9 @@ extends _partials/layout.pug
 include _mixin/sidebar.pug
 include _mixin/comment.pug
 
+block head
+    != _css('post.css')
+
 block title
     if page.type === 'categories'
         != __('title.all') + __('title.category')

layout/post.pug

@@ -3,6 +3,10 @@ include _mixin/sidebar.pug
 include _mixin/comment.pug
 include _mixin/postmeta.pug
 
+block head
+    != _css('post.css')
+    != _css('mermaid.css')
+
 block title
     - var page_title = page.title
     if page.categories && page.categories.length

layout/tag.pug

@@ -1,5 +1,8 @@
 extends ./_partials/layout.pug
 
+block head
+    != _css('page.css')
+
 block title
     != `${__('title.tag')}${__('symbol.colon')}${page.tag}`
 

package.json

@@ -17,7 +17,6 @@
         "@types/js-yaml": "^4.0.9",
         "@types/katex": "^0.16.7",
         "@types/node": "^22.8.6",
-        "@types/quicklink": "^2.3.4",
         "@typescript-eslint/eslint-plugin": "^8.12.2",
         "@typescript-eslint/parser": "^8.12.2",
         "eslint": "^9.13.0",

source/css/app.styl

@@ -20,22 +20,9 @@ if $_iconfont = hexo-config('style.iconfont')
 else
   @import "_iconfont";
 
-// Scaffolding
-@import "_common/scaffolding";
-
-// Layout
-@import "_common/outline";
-
-// Components
-@import "_common/components";
-
 if $custom = hexo-config('style.custom')
   @import $custom;
 
-if hexo-config('injects.style')
-  for $inject_style in hexo-config('injects.style')
-    @import $inject_style;
-
 if $optimize = hexo-config('experiments.optimizeLongPosts')
   @import "optimize.styl"
 

source/css/page.styl

@@ -0,0 +1,3 @@
+@import "scaffolding"
+
+@import "_common/components/pages"

source/css/post.styl

@@ -0,0 +1,5 @@
+@import "scaffolding"
+
+@import "_common/components/post"
+@import "_common/components/highlight"
+@import "_common/components/tags"

source/css/scaffolding.styl

@@ -0,0 +1,5 @@
+@import "app"
+
+@import "_common/scaffolding"
+@import "_common/outline"
+@import "_common/components/third-party"