feature: flexible cdn config

Candinya · Jul 5, 2022 · f4e3cb8 · f4e3cb8
1 parent 0c5bc07
commit f4e3cb8
Show file tree

Hide file tree

Showing 21 changed files with 251 additions and 110 deletions.
diff --git a/.demo/_config.kratos-rebirth.yml b/.demo/_config.kratos-rebirth.yml
@@ -19,6 +19,40 @@ topMenu:
       - label: 项目链接
         url: https://github.com/Candinya/Kratos-Rebirth
 
+vendors:
+  # 常用CDN基地址:
+  # https://unpkg.com/
+  # https://cdn.jsdelivr.net/npm/
+
+  # 以下一行代码指定 npm cdn 基地址，该 CDN 应该兼容 jsdelivr 使用的路径格式
+  # npm_cdn: https://cdn.jsdelivr.net/npm/
+  packages:
+    hexo-theme-kratos-rebirth: 
+      # 以下一行代码用于对某个包单独配置 cdn 基地址，使用 null 表示不从 cdn 获取此包
+      # cdn_url: null
+      # cdn_url: https://cdn.jsdelivr.net/npm/hexo-theme-kratos-rebirth@latest/
+    aplayer:
+      # 以下一行代码指定所使用的库版本
+      # 默认情况下会使用主题开发组进行开发调试时所使用的版本（通常而言也是最适合的版本）
+      # 因此该值不建议修改
+      # 
+      # 注意：如果选择其他版本，则必须配置 npm_cdn 或 为包单独配置 cdn_url 或 修改 vendors 目录，
+      # 这是因为主题自带的库只含有默认版本，必须从 cdn 加载其他版本或由用户手动提供其他版本的相关文件
+      #
+      # 警告：随意切换版本可能造成主题无法正常工作
+      # 
+      # version: 1.10.1
+      files:
+        "dist/APlayer.min.css":
+          # 以下代码用于单独对某个文件进行映射，以便于使用不符合 jsdelivr 路径格式的CDN（或其他特殊情形）
+          # 使用 null 表示不重定向（默认行为）
+          # relocate: null
+          # relocate: https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css
+
+          # 以下代码用于指定 SRI 以增强安全性
+          # 注意，仅有部分组件支持 SRI，不支持的组件会忽略此值
+          # integrity: sha256-6Y7CJDaltoeNgk+ZftgCD9jLgmGv4xKUo8nQ0HgAwVo=
+
 friends:
   list:
   - name: "猫猫①号"

diff --git a/_config.yml b/_config.yml
@@ -6,9 +6,43 @@ snow: false
 click_animate_js: 'candy'
 enable_dark: true
 highlight_theme: night-eighties # 代码高亮主题（light | night | night-eighties | night-blue | night-bright）
-cdn: false # 请注意这里是静态资源的 CDN 来源，图片的 CDN 在下方 jsconfig.main.pic.CDN 段配置
 check_update: true
 
+vendors:
+  packages:
+    disqusjs: 
+      version: 1.2.6
+    gitalk: 
+      version: 1.7.2
+    gitment: 
+      version: 0.0.3
+    twikoo: 
+      version: 1.5.11
+    valine: 
+      version: 1.4.18
+    "@waline/client": 
+      version: 1.6.0
+    bootstrap: 
+      version: 3.3.4
+    nprogress: 
+      version: 0.2.0
+    aplayer: 
+      version: 1.10.1
+    "@fancyapps/fancybox": 
+      version: 3.5.7
+    clipboard: 
+      version: 2.0.6
+    layui-src: 
+      version: 2.5.5
+    font-awesome: 
+      version: 4.7.0
+    jquery: 
+      version: 3.6.0
+    qrcode_js: 
+      version: 1.0.0
+    mermaid: 
+      version: 9.1.1
+
 # 自定义样式
 customStyles:
   images: # 图片相关设置
@@ -163,10 +197,10 @@ search:
 ## 由于Javascript被压缩后难以有效编辑与生成，因而为了简化操作，将相关的配置项在生成文件时以独立的json文件写出，调用时使用fetch API获取。
 jsconfig:
   main:
-    pic:
-      random_amount: 20 # 表示从1~20
-      filename: "images/thumb/thumb_{no}.webp" # 相对于主题根目录，表示文件名的格式, {no} 用以指代随机的编号。
-                                              # 如果包含 // 表示使用指定域名的绝对路径（例如第三方图床服务等），那么会忽略 CDN 选项
+    cover:
+      randomAmount: 20 # 表示从1~20
+      baseUrl: null # 使用默认值（不单独配置），将跟随 vendors 中的相关设定选择是否使用 cdn
+      filenameTemplate: "thumb_{no}.webp" 
     createTime: "2018/05/06 17:03:12"
     donateBtn: "支持我~"
     scanNotice: "扫一扫，好不好？"

diff --git a/layout/_comments/disqusjs.ejs b/layout/_comments/disqusjs.ejs
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="<%- url_npm_cdn('disqusjs@1.2.6/dist/disqusjs.css') %>">
+<%- css_npm_cdn('disqusjs', 'dist/disqusjs.css') %>
 <div id="disqus_thread" class="post-comments lazy-load<% if (theme.posts.comments?.enableBGImage) { %> bg-image<% } %>"></div>
 <script>
     var load_comm = () => {
@@ -16,7 +16,7 @@
             });
         }
         if (typeof DisqusJS === 'undefined') {
-            const src = '<%- url_npm_cdn("disqusjs@1.3.0/dist/disqus.js") %>';
+            const src = '<%- url_npm_cdn("disqusjs", "dist/disqus.js") %>';
             $.getScript(src, init);
         } else {
             init();

diff --git a/layout/_comments/gitalk.ejs b/layout/_comments/gitalk.ejs
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="<%- url_npm_cdn('gitalk@1.7.2/dist/gitalk.css') %>">
+<%- css_npm_cdn('gitalk', 'dist/gitalk.css') %>
 <div id="gitalk-container" class="post-comments lazy-load<% if (theme.posts.comments?.enableBGImage) { %> bg-image<% } %>" style="padding-left:2rem; padding-right:2rem;"></div>
 <script>
     var load_comm = () => {
@@ -12,7 +12,7 @@
             gitalk.render('gitalk-container');
         }
         if (typeof Gitalk === 'undefined') {
-            const src = '<%- url_npm_cdn("gitalk@1.7.2/dist/gitalk.min.js") %>';
+            const src = '<%- url_npm_cdn("gitalk", "dist/gitalk.min.js") %>';
             $.getScript(src, init);
         } else {
             init();

diff --git a/layout/_comments/gitment.ejs b/layout/_comments/gitment.ejs
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="<%- url_npm_cdn('gitment@0.0.3/style/default.css') %>">
+<%- css_npm_cdn('gitment', 'style/default.css') %>
 <div id="gitment-container" class="post-comments lazy-load<% if (theme.posts.comments?.enableBGImage) { %> bg-image<% } %>"></div>
 <script>
     var load_comm = () => {
@@ -11,7 +11,7 @@
             gitment.render('gitment-container');
         }
         if (typeof Gitment === 'undefined') {
-            const src = '<%- url_npm_cdn("gitment@0.0.3/dist/gitment.browser.js") %>';
+            const src = '<%- url_npm_cdn("gitment", "dist/gitment.browser.js") %>';
             $.getScript(src, init);
         } else {
             init();

diff --git a/layout/_comments/twikoo.ejs b/layout/_comments/twikoo.ejs
@@ -7,7 +7,7 @@
             twikoo.init({ envId: '<%- theme.twikoo.env_id %>', el: '#tcomment' });
         }
         if (typeof twikoo === 'undefined') {
-            const src = '<%- url_npm_cdn("twikoo@1.5.11/dist/twikoo.all.min.js") %>';
+            const src = '<%- url_npm_cdn("twikoo", "dist/twikoo.all.min.js") %>';
             $.getScript(src, init);
         } else {
             init();

diff --git a/layout/_comments/valine.ejs b/layout/_comments/valine.ejs
@@ -12,7 +12,7 @@
             });
         }
         if (typeof Valine === 'undefined') {
-            const src = '<%- url_npm_cdn("valine@1.4.18/dist/Valine.min.js") %>';
+            const src = '<%- url_npm_cdn("valine", "dist/Valine.min.js") %>';
             $.getScript(src, init);
         } else {
             init();

diff --git a/layout/_comments/waline.ejs b/layout/_comments/waline.ejs
@@ -8,7 +8,7 @@
             }, JSON.parse('<%- JSON.stringify(theme.waline) %>')));
         }
         if (typeof Waline === 'undefined') {
-            const src = '<%- url_npm_cdn("@waline/client@1.6.0/dist/Waline.min.js") %>';
+            const src = '<%- url_npm_cdn("@waline/client", "dist/Waline.min.js") %>';
             $.getScript(src, init);
         } else {
             init();

diff --git a/layout/_pages/404.ejs b/layout/_pages/404.ejs
@@ -43,7 +43,7 @@
 <div class="page404">
     <div class="kratos-hentry kratos-post-inner clearfix">
         <div class="col-md-7">
-            <img src="<%- url_cdn('images/404.webp') %>" loading="eager" decoding="auto" />
+            <img src="<%- url_theme_cdn('images/404.webp') %>" loading="eager" decoding="auto" />
         </div>
         <div class="col-md-5 text-center errtxt">
             <h3>这个页面搬家啦</h3>

diff --git a/layout/_pages/search-page.ejs b/layout/_pages/search-page.ejs
@@ -39,4 +39,4 @@
 </div>
 
 <script>var searchDataFile = "<%- config.root + (theme.search.path || 'search.json') %>";</script>
-<script defer src="<%- url_cdn('js/local-search.min.js') %>"></script>
+<%- js_theme_cdn('js/local-search.min.js', {defer: true}) %>
diff --git a/layout/_partial/after-footer.ejs b/layout/_partial/after-footer.ejs
@@ -1,5 +1,5 @@
-<script defer src="<%- url_npm_cdn('bootstrap@3.3.4/dist/js/bootstrap.min.js') %>"></script>
-<script defer src="<%- url_npm_cdn('nprogress@0.2.0/nprogress.js') %>"></script>
+<%- js_npm_cdn('bootstrap', 'dist/js/bootstrap.min.js', {defer: true}) %>
+<%- js_npm_cdn('nprogress', 'nprogress.js', {defer: true}) %>
 <script>
     if (!window.kr) {
         window.kr = {};
@@ -10,25 +10,25 @@
 <% if(theme.snow){ %>
     <div>
         <canvas id="snow"></canvas>
-        <script async type="text/javascript" src="<%- url_cdn('js/snow.min.js') %>"></script>
+        <%- js_theme_cdn('js/snow.min.js', {async: true}) %>
     </div>
 <% } %>
 <% if (theme.click_animate_js) { %>
-    <script async src="<%- theme.click_animate_js.includes('//') ? theme.click_animate_js : url_cdn('js/' + theme.click_animate_js + '.min.js') %>"></script>
+    <script async src="<%- theme.click_animate_js.includes('//') ? theme.click_animate_js : url_theme_cdn('js/' + theme.click_animate_js + '.min.js') %>"></script>
 <% } %>
 
 <% if (theme.aplayer.enabled) { %>
-    <script defer src="<%- url_npm_cdn('aplayer@1.10.1/dist/APlayer.min.js') %>"></script>
+    <%- js_npm_cdn('aplayer', 'dist/APlayer.min.js', {defer: true}) %>
     <%- partial('../_tools/player') %>
 <% }%>
 <% if (page.type !== '404' && theme.fancybox){ %>
-    <script defer src="<%- url_npm_cdn('@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js') %>"></script>
+    <%- js_npm_cdn('@fancyapps/fancybox', 'dist/jquery.fancybox.min.js', {defer: true}) %>
 <% } %>
-<script defer src="<%- url_npm_cdn('clipboard@2.0.6/dist/clipboard.min.js') %>"></script>
-<script defer src="<%- url_cdn('js/kratosr.min.js') %>"></script>
-<script defer src="<%- url_cdn('js/pjax.min.js') %>"></script>
+<%- js_npm_cdn('clipboard', 'dist/clipboard.min.js', {defer: true}) %>
+<%- js_theme_cdn('js/kratosr.min.js', {defer: true}) %>
+<%- js_theme_cdn('js/pjax.min.js', {defer: true}) %>
 <% if (page.type !== '404' && theme.posts.donate) { %>
-    <script defer src="<%- url_npm_cdn('layui-src@2.5.5/dist/layui.all.js') %>"></script>
+    <%- js_npm_cdn('layui-src', 'dist/layui.all.js', {defer: true}) %>
 <% } %>
 <%- theme.site_analytics %>
 

diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
@@ -54,30 +54,30 @@
     <% } %>
   <% } %>
   <!-- 样式表文件 -->
-  <link rel="stylesheet" id="kratos-css" href="<%- url_cdn('css/kratosr.min.css') %>" type="text/css" media="all">
+  <%- css_theme_cdn('css/kratosr.min.css', {id: "kratos-css", media:"all"}) %>
   <% if (theme.enable_dark) { %>
-    <link rel="stylesheet" id="darkmode-css" href="<%- url_cdn('css/kr-color-dark.min.css') %>" type="text/css" media="(prefers-color-scheme: dark)">
-    <script src="<%- url_cdn('js/kr-dark.min.js') %>"></script>
+    <%- css_theme_cdn('css/kr-color-dark.min.css', {id: "darkmode-css", media:"(prefers-color-scheme: dark)"}) %>
+    <%- js_theme_cdn('js/kr-dark.min.js') %>
   <% } %>
   <% if (config.highlight && config.highlight.enable && theme.highlight_theme) { %>
-    <link rel="stylesheet" id="highlight-css" href="<%- url_cdn(`css/highlight/${theme.highlight_theme || 'night-eighties'}.min.css`) %>" type="text/css" media="all">
+    <%- css_theme_cdn(`css/highlight/${theme.highlight_theme || 'night-eighties'}.min.css`, {id: "highlight-css", media:"all"}) %>
   <% } %>
   <% if (config.prismjs && config.prismjs.enable) { %>
-    <link rel="stylesheet" id="prismjs-css" href="<%- url_cdn('css/prismjs.min.css') %>" type="text/css" media="all">
+    <%- css_theme_cdn('css/prismjs.min.css', {id: "prismjs-css", media:"all"}) %>
   <% } %>
-  <link rel="stylesheet" id="fontawe-css" href="<%- url_npm_cdn('font-awesome@4.7.0/css/font-awesome.min.css') %>" type="text/css" media="all">
-  <link rel="stylesheet" id="nprogress-css" href="<%- url_npm_cdn('nprogress@0.2.0/nprogress.css') %>" type="text/css" media="all">
+  <%- css_npm_cdn('font-awesome', 'css/font-awesome.min.css', {id:"fontawe-css", media:"all"}) %>
+  <%- css_npm_cdn('nprogress', 'nprogress.css', {id:"nprogress-css", media:"all"}) %>
   <% const commentProvider = theme.posts.comments?.provider ?? theme.posts.comments; %>
   <% if (theme.aplayer.enabled) { %>
-    <link rel="stylesheet" href="<%- url_npm_cdn('aplayer@1.10.1/dist/APlayer.min.css') %>">
+    <%- css_npm_cdn('aplayer', 'dist/APlayer.min.css') %>
   <% }%>
   <% if (theme.fancybox){ %>
-    <link rel="stylesheet" href="<%- url_npm_cdn('@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css') %>">
+    <%- css_npm_cdn('@fancyapps/fancybox', 'dist/jquery.fancybox.min.css') %>
   <% } %>
   <!-- 不得不预先加载的一些JS文件 -->
-  <script src="<%- url_npm_cdn('jquery@3.6.0/dist/jquery.min.js') %>"></script>
+  <%- js_npm_cdn('jquery', 'dist/jquery.min.js') %>
   <% if (theme.posts.share) { %>
-    <script src="<%- url_npm_cdn('qrcode_js@1.0.0/qrcode.min.js') %>"></script>
+    <%- js_npm_cdn('qrcode_js', 'qrcode.min.js') %>
   <% } %>
   <% if (theme.customStyles) { %>
   <style>

diff --git a/layout/_plugins/mermaid.ejs b/layout/_plugins/mermaid.ejs
@@ -7,7 +7,7 @@
         mermaid.init(undefined, ".mermaid");
     };
     if (typeof mermaid == 'undefined') {
-        const src = '<%- url_npm_cdn(`mermaid@9.1.1/dist/mermaid.min.js`) %>';
+        const src = '<%- url_npm_cdn(`mermaid", "dist/mermaid.min.js`) %>';
         $.getScript(src, init);
     }
     // Set PJAX callback function

diff --git a/layout/_tools/player.ejs b/layout/_tools/player.ejs
@@ -1,5 +1,5 @@
 <% if (theme.aplayer.meting) { %>
-    <script defer src="<%- url_npm_cdn('meting@2.0.1/dist/Meting.min.js') %>"></script>
+    <%- js_npm_cdn('meting', 'dist/Meting.min.js', {defer: true}) %>
     <meting-js
         server="<%= theme.aplayer.meting.server %>"
         type="<%= theme.aplayer.meting.type %>"

diff --git a/scripts/cdn-optimize-helpers.js b/scripts/cdn-optimize-helpers.js
@@ -1,6 +1,13 @@
 // 使用CDN提供静态资源，改写URL
 hexo.once('generateBefore', () => {
     const cdn = require('./lib/cdn');
-    hexo.extend.helper.register('url_cdn', cdn.url_cdn.bind(null, hexo));
+    hexo.extend.helper.register('file_info_theme_cdn', cdn.file_info_theme_cdn.bind(null, hexo));
+    hexo.extend.helper.register('url_theme_cdn', cdn.url_theme_cdn.bind(null, hexo));
+    hexo.extend.helper.register('js_theme_cdn', cdn.js_theme_cdn.bind(null, hexo));
+    hexo.extend.helper.register('css_theme_cdn', cdn.css_theme_cdn.bind(null, hexo));
+
+    hexo.extend.helper.register('file_info_npm_cdn', cdn.file_info_npm_cdn.bind(null, hexo));
     hexo.extend.helper.register('url_npm_cdn', cdn.url_npm_cdn.bind(null, hexo));
+    hexo.extend.helper.register('js_npm_cdn', cdn.js_npm_cdn.bind(null, hexo));
+    hexo.extend.helper.register('css_npm_cdn', cdn.css_npm_cdn.bind(null, hexo));
 });
diff --git a/scripts/friends.js b/scripts/friends.js
@@ -8,7 +8,7 @@ hexo.once('generateBefore', () => {
         return;
     }
 
-    const defaultAvatar = cdn.url_cdn(hexo, "images/avatar.webp");
+    const defaultAvatar = cdn.url_theme_cdn(hexo, "images/avatar.webp");
     const flist = friends.list.map(friend => ({
         name: friend.name,
         link: friend.link,

diff --git a/scripts/genconfig.js b/scripts/genconfig.js
@@ -2,13 +2,21 @@
 
 hexo.once('generateBefore', () => {
 
-    hexo.extend.generator.register('configMain', function(locals){
+    hexo.extend.generator.register('configMain', function(){
+        const cdn = require('./lib/cdn');
+        var configMain = hexo.theme.config.jsconfig.main;
+        const defaultCoverBaseUrl = cdn.url_theme_cdn(hexo, "source/images/thumb/");
+        configMain.site_root = hexo.config.root
+        if (!configMain.cover){
+            configMain.cover = {
+                "baseUrl": defaultCoverBaseUrl
+            }
+        } else if (configMain.cover.baseUrl === undefined) {
+            configMain.cover.baseUrl = defaultCoverBaseUrl
+        }
         return {
             path: 'config/main.json',
-            data: JSON.stringify(Object.assign({
-                site_root: hexo.config.root,
-                picCDN: hexo.theme.config.cdn,
-            }, hexo.theme.config.jsconfig.main))
+            data: JSON.stringify(configMain)
         };
     });
     // hexo.extend.generator.register('configSnow', function(locals){