Separate inline scripts and styles into single files (#226)

2026-01-18 18:33:42 +00:00 · 2021-04-01 15:44:51 +08:00 · 2021-04-01 15:44:51 +08:00 · 6b23d42930
commit 6b23d42930
parent 59d3ae71fc
21 changed files with 164 additions and 117 deletions
--- a/layout/_layout.njk
+++ b/layout/_layout.njk
@ -3,9 +3,12 @@
 <head>
  {{ partial('_partials/head/head.njk', {}, {cache: theme.cache.enable}) }}
  {%- include '_partials/head/head-unique.njk' -%}
+  {{- next_js('load-config.js', true) }}
  <title>{% block title %}{% endblock %}</title>
  {{ partial('_third-party/analytics/index.njk', {}, {cache: theme.cache.enable}) }}
-  {{ partial('_scripts/noscript.njk', {}, {cache: theme.cache.enable}) }}
+  <noscript>
+    <link rel="stylesheet" href="{{ url_for(theme.css) }}/noscript.css">
+  </noscript>
 </head>

 <body itemscope itemtype="http://schema.org/WebPage"{% if theme.motion.enable %} class="use-motion"{% endif %}>
--- a/layout/_partials/comments.njk
+++ b/layout/_partials/comments.njk
@ -14,31 +14,7 @@
          {{ partial(inject_item.layout, inject_item.locals, inject_item.options) }}
        </div>
      {%- endfor %}
-      <script{{ pjax }}>
-        (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();
-            }
-          }
-        })();
-      </script>
+      {{- next_js('comments-buttons.js', true) }}
    {%- elif theme.comments.style == 'tabs' %}
      <div class="tabs tabs-comment">
        <ul class="nav-tabs">
@ -58,24 +34,4 @@
  {%- endif %}
 {%- endif %}

-<script>
-  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);
-    });
-  }
-</script>
+{{- next_js('comments.js') }}
--- a/layout/_partials/footer.njk
+++ b/layout/_partials/footer.njk
@ -2,7 +2,7 @@
  <div class="beian">
    {{- next_url('https://beian.miit.gov.cn', theme.footer.beian.icp + ' ') }}
    {%- if theme.footer.beian.gongan_icon_url %}
-      <img src="{{ url_for(theme.footer.beian.gongan_icon_url) }}" style="display: inline-block;">
+      <img src="{{ url_for(theme.footer.beian.gongan_icon_url) }}">
    {%- endif %}
    {%- if theme.footer.beian.gongan_id and theme.footer.beian.gongan_num %}
      {{- next_url('http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=' + theme.footer.beian.gongan_id, theme.footer.beian.gongan_num + ' ') }}
@ -51,7 +51,7 @@
 {%- if theme.busuanzi_count.enable %}
 <div class="busuanzi-count">
  {%- if theme.busuanzi_count.total_visitors %}
-    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
+    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="{{ theme.busuanzi_count.total_visitors_icon }}"></i>
      </span>
@ -62,7 +62,7 @@
  {%- endif %}

  {%- if theme.busuanzi_count.total_views %}
-    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
+    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="{{ theme.busuanzi_count.total_views_icon }}"></i>
      </span>
--- a/layout/_partials/head/head-unique.njk
+++ b/layout/_partials/head/head-unique.njk
@ -8,14 +8,18 @@
 <link rel="canonical" href="{{ canonical }}">

 {# Exports some front-matter variables to Front-End #}
-<script{{ pjax }} class="page-configurations">
-  // https://hexo.io/docs/variables.html
-  CONFIG.page = {
-    sidebar: {{ page.sidebar | safedump }},
-    isHome : {{ is_home() }},
-    isPost : {{ is_post() }},
-    lang   : '{{ page.lang }}'
-  };
-</script>
+{# https://hexo.io/docs/variables.html #}
+<meta name="hexo-config-page" content="{{
+  {
+    sidebar: page.sidebar or '',
+    isHome : is_home(),
+    isPost : is_post(),
+    lang   : page.lang
+  } | safedump | escape
+}}">
+<meta name="hexo-config-calendar" content="{{
+  theme.calendar | safedump | escape
+    if page.type === 'schedule' and not page.title
+}}">

 {{- next_inject('head') }}
--- a/layout/_partials/head/head.njk
+++ b/layout/_partials/head/head.njk
@ -53,4 +53,4 @@
  <script src="{{ theme.vendors.nprogress_js }}"></script>
 {%- endif %}

-{{ next_config() }}
+<meta name="hexo-config" content="{{ next_config() | safedump | escape }}">
--- a/layout/_partials/page/schedule.njk
+++ b/layout/_partials/page/schedule.njk
@ -1,6 +1,3 @@
 <div class="event-list">
 </div>
-<script{{ pjax }}>
-  CONFIG.calendar = {{ theme.calendar | safedump }};
-</script>
 {{- next_js('schedule.js', true) }}
--- a/layout/_partials/post/post-meta.njk
+++ b/layout/_partials/post/post-meta.njk
@ -72,7 +72,7 @@
  {%- endif %}

  {%- if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.post_views %}
-    <span class="post-meta-item" title="{{ __('post.views') }}" id="busuanzi_container_page_pv" style="display: none;">
+    <span class="post-meta-item" title="{{ __('post.views') }}" id="busuanzi_container_page_pv">
      <span class="post-meta-item-icon">
        <i class="{{ theme.busuanzi_count.post_views_icon }}"></i>
      </span>
--- a/layout/_scripts/index.njk
+++ b/layout/_scripts/index.njk
@ -14,5 +14,5 @@
  {{- next_js('bookmark.js') }}
 {%- endif %}
 {%- if theme.pjax %}
-  {%- include 'pjax.njk' -%}
+  {{- next_js('pjax.js') }}
 {%- endif %}
--- a/layout/_scripts/noscript.njk
+++ b/layout/_scripts/noscript.njk
@ -1,34 +0,0 @@
-<noscript>
-  <style>
-  body { margin-top: 2rem; }
-
-  .use-motion .menu-item,
-  .use-motion .sidebar,
-  .use-motion .post-block,
-  .use-motion .pagination,
-  .use-motion .comments,
-  .use-motion .post-header,
-  .use-motion .post-body,
-  .use-motion .collection-header {
-    visibility: visible;
-  }
-
-  .use-motion .header,
-  .use-motion .site-brand-container .toggle,
-  .use-motion .footer { opacity: initial; }
-
-  .use-motion .site-title,
-  .use-motion .site-subtitle,
-  .use-motion .custom-logo-image {
-    opacity: initial;
-    top: initial;
-  }
-
-  .use-motion .logo-line {
-    transform: scaleX(1);
-  }
-
-  .search-pop-overlay, .sidebar-nav { display: none; }
-  .sidebar-panel { display: block; }
-  </style>
-</noscript>
--- a/scripts/filters/minify.js
+++ b/scripts/filters/minify.js
@ -26,6 +26,14 @@ hexo.extend.filter.register('after_generate', () => {
    hexo.route.remove('js/local-search.js');
  }

+  if (!theme.pjax) {
+    hexo.route.remove('js/pjax.js');
+  }
+
+  if (theme.comments.style !== 'buttons') {
+    hexo.route.remove('js/comments-buttons.js');
+  }
+
  if (theme.scheme === 'Pisces' || theme.scheme === 'Gemini') {
    hexo.route.remove('js/schemes/muse.js');
  }
--- a/scripts/helpers/next-config.js
+++ b/scripts/helpers/next-config.js
@ -5,7 +5,7 @@
 const { parse } = require('url');

 /**
- * Export theme config to js
+ * Export theme config
 */
 hexo.extend.helper.register('next_config', function() {
  const { config, theme, url_for, __ } = this;
@ -45,8 +45,5 @@ hexo.extend.helper.register('next_config', function() {
    exportConfig.path = url_for(config.search.path);
    exportConfig.localsearch = theme.local_search;
  }
-  return `<script class="hexo-configurations">
-    var NexT = window.NexT || {};
-    var CONFIG = ${JSON.stringify(exportConfig)};
-  </script>`;
+  return exportConfig;
 });
--- a/scripts/tags/link-grid.js
+++ b/scripts/tags/link-grid.js
@ -9,7 +9,7 @@ module.exports = function([image = '/images/avatar.gif', delimiter = '|', commen
    const item = line.split(delimiter).map(arg => arg.trim());
    if (item[0][0] === comment) return '';
    return `<div class="link-grid-container">
-<div class="link-grid-image" style="background-image: url(${item[3] || image});"></div>
+<object class="link-grid-image" data="${item[3] || image}"></object>
 <p>${item[0]}</p><p>${item[2] || item[1]}</p>
 <a href="${item[1]}"></a>
 </div>`;
--- a/source/css/_common/components/post/post-header.styl
+++ b/source/css/_common/components/post/post-header.styl
@ -109,3 +109,9 @@
    display: none;
  }
 }
+
+if (hexo-config('busuanzi_count.enable') and hexo-config('busuanzi_count.post_views')) {
+  #busuanzi_container_page_pv {
+    display: none;
+  }
+}
--- a/source/css/_common/outline/footer/index.styl
+++ b/source/css/_common/outline/footer/index.styl
@ -74,3 +74,25 @@
    animation: icon-animate 1.33s ease-in-out infinite;
  }
 }
+
+if (hexo-config('footer.beian.enable') && hexo-config('footer.beian.gongan_icon_url')) {
+  .beian img {
+    display: inline-block;
+  }
+}
+
+if (hexo-config('busuanzi_count.enable')) {
+  .busuanzi-count {
+    if (hexo-config('busuanzi_count.total_visitors')) {
+      #busuanzi_container_site_uv {
+        display: none;
+      }
+    }
+
+    if (hexo-config('busuanzi_count.total_views')) {
+      #busuanzi_container_site_pv {
+        display: none;
+      }
+    }
+  }
+}
--- a/source/css/_common/scaffolding/tags/link-grid.styl
+++ b/source/css/_common/scaffolding/tags/link-grid.styl
@ -32,9 +32,6 @@
    }

    .link-grid-image {
-      background-clip: content-box;
-      background-origin: content-box;
-      background-size: cover;
      border: 1px solid $grey-lighter;
      border-radius: 50%;
      box-sizing: border-box;
--- a/source/css/noscript.styl
+++ b/source/css/noscript.styl
@ -0,0 +1,30 @@
+body { margin-top: 2rem; }
+
+.use-motion .menu-item,
+.use-motion .sidebar,
+.use-motion .post-block,
+.use-motion .pagination,
+.use-motion .comments,
+.use-motion .post-header,
+.use-motion .post-body,
+.use-motion .collection-header {
+  visibility: visible;
+}
+
+.use-motion .header,
+.use-motion .site-brand-container .toggle,
+.use-motion .footer { opacity: initial; }
+
+.use-motion .site-title,
+.use-motion .site-subtitle,
+.use-motion .custom-logo-image {
+  opacity: initial;
+  top: initial;
+}
+
+.use-motion .logo-line {
+  transform: scaleX(1);
+}
+
+.search-pop-overlay, .sidebar-nav { display: none; }
+.sidebar-panel { display: block; }
--- a/source/js/comments-buttons.js
+++ b/source/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();
+    }
+  }
+})();
--- a/source/js/comments.js
+++ b/source/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);
+  });
+}
--- a/source/js/load-config.js
+++ b/source/js/load-config.js
@ -0,0 +1,15 @@
+if (!window.NexT) window.NexT = {};
+
+if (!window.CONFIG) {
+  window.CONFIG = JSON.parse(
+    document.querySelector('meta[name="hexo-config"]').content || '{}'
+  );
+}
+
+(() => {
+  document.querySelectorAll('meta[name^="hexo-config-"]')
+    .forEach(configMeta => {
+      const key = configMeta.name.slice('hexo-config-'.length);
+      window.CONFIG[key] = JSON.parse(configMeta.content || '{}');
+    });
+})();
--- a/layout/_scripts/pjax.njk
+++ b/layout/_scripts/pjax.njk
@ -1,17 +1,18 @@
-<script>
-var pjax = new Pjax({
+/* global NexT, CONFIG, Pjax */
+
+const pjax = new Pjax({
  selectors: [
    'head title',
-    '.page-configurations',
+    'head meta[name^="hexo-config-"]',
    '.main-inner',
    '.post-toc-wrap',
    '.languages',
    '.pjax'
  ],
-  analytics: false,
-  cacheBust: false,
+  analytics        : false,
+  cacheBust        : false,
  scrollRestoration: false,
-  scrollTo: !CONFIG.bookmark.enable
+  scrollTo         : !CONFIG.bookmark.enable
 });

 document.addEventListener('pjax:success', () => {
@ -30,4 +31,3 @@ document.addEventListener('pjax:success', () => {
  document.querySelector(hasTOC ? '.sidebar-nav-toc' : '.sidebar-nav-overview').click();
  NexT.utils.updateSidebarPosition();
 });
-</script>
--- a/test/tags/link-grid.js
+++ b/test/tags/link-grid.js
@ -3,11 +3,11 @@
 require('chai').should();

 const result = `<div class="link-grid"><div class="link-grid-container">
-<div class="link-grid-image" style="background-image: url(/images/sample.png);"></div>
+<object class="link-grid-image" data="/images/sample.png"></object>
 <p>Theme NexT</p><p>Stay Simple. Stay NexT.</p>
 <a href="https://theme-next.js.org/"></a>
 </div><div class="link-grid-container">
-<div class="link-grid-image" style="background-image: url(/images/sample.png);"></div>
+<object class="link-grid-image" data="/images/sample.png"></object>
 <p>Theme NexT</p><p>Stay Simple. Stay NexT.</p>
 <a href="https://theme-next.js.org/"></a>
 </div></div>`;