✨ 增加打印样式

Author: Bluemangoo

layout/_partials/post/copyright.ejs

@@ -40,7 +40,7 @@
             <% if (['BY', 'BY-SA', 'BY-ND', 'BY-NC', 'BY-NC-SA', 'BY-NC-ND'].indexOf(license) !== -1) { %>
               <% var items = license.split('-') %>
               <% for (var idx = 0; idx < items.length; idx++) { %>
-                <a target="_blank" href="https://creativecommons.org/licenses/<%= license.toLowerCase() %>/4.0/">
+                <a class="print-no-link" target="_blank" href="https://creativecommons.org/licenses/<%= license.toLowerCase() %>/4.0/">
                   <span class="hint--top hint--rounded" aria-label="<%- __('post.copyright.' + items[idx]) %>">
                     <i class="iconfont icon-<%= items[idx].toLowerCase() %>"></i>
                   </span>

layout/_partials/post/meta-bottom.ejs

@@ -9,7 +9,7 @@
     <div class="post-meta">
       <i class="iconfont icon-tags"></i>
       <% page.tags.each(function(tag) { %>
-        <a href="<%= url_for(tag.path) %>">#<%- tag.name %></a>
+        <a href="<%= url_for(tag.path) %>" class="print-no-link">#<%- tag.name %></a>
       <% }) %>
     </div>
   <% } %>

layout/post.ejs

@@ -14,8 +14,7 @@ page.banner_mask_alpha = page.banner_mask_alpha || theme.post.banner_mask_alpha
       <div class="container nopadding-x-md" id="board-ctn">
         <div id="board">
           <article class="post-content mx-auto">
-            <!-- SEO header -->
-            <h1 style="display: none"><%= page.subtitle || page.title %></h1>
+            <h1 id="seo-header"><%= page.subtitle || page.title %></h1>
             <% if (theme.post.updated.enable && theme.post.updated && compare_date(page.date, page.updated)) { %>
               <p class="note note-<%= theme.post.updated.note_class || 'info' %>">
                 <% if (theme.post.updated.relative) { %>

source/css/_pages/_base/color-schema.styl

@@ -59,12 +59,13 @@ dark-colors()
     transition background-color .2s ease-in-out
 
 if (hexo-config("dark_mode.enable"))
-  @media (prefers-color-scheme: dark)
+  @media not print and (prefers-color-scheme: dark)
     :root
       --color-mode "dark"
 
     :root:not([data-user-color-scheme])
       dark-colors()
 
-  [data-user-color-scheme="dark"]
-    dark-colors()
+  @media not print
+    [data-user-color-scheme="dark"]
+      dark-colors()

source/css/_pages/_base/print.styl

@@ -0,0 +1,38 @@
+@media print
+  header, footer, .side-col, #scroll-top-button, .post-prevnext, #comments
+    display none !important
+
+  .markdown-body
+    a:not([href^='#']):not([href^='javascript:']):not(.print-no-link)::after
+      content ' (' attr(href) ')'
+      font-size 0.8rem
+      color var(--post-text-color)
+      opacity 0.8
+
+    & > h1, h2
+      border-bottom-color transparent !important
+
+    & > h1, h2, h3, h4, h5, h6
+      margin-top 1.25em !important
+      margin-bottom 0.25em !important
+
+    [data-anchorjs-icon]::after
+      display none
+
+    figure.highlight
+      table, tbody, tr, td.code, td.code pre
+        width 100% !important
+        display block !important
+
+      pre > code
+        white-space pre-wrap
+
+      .gutter, .code-widget
+        display none !important
+
+  .post-metas a
+    text-decoration none
+
+@media not print
+  #seo-header
+    display none

source/css/_pages/_post/post-page.styl

@@ -125,6 +125,16 @@
     -webkit-transform translateX(0)
     transform translateX(0)
 
+#seo-header
+  color var(--post-heading-color)
+  font-weight bold
+  margin-top 0.5em
+  margin-bottom 0.75em
+  border-bottom-color var(--line-color)
+  border-bottom-style solid
+  border-bottom-width 2px
+  line-height 1.5
+
 .custom, #comments
   margin-top 2rem