✨ 增加打印样式

fluid-dev · Jun 28, 2023 · 3abe246 · 3abe246
1 parent b67a247
commit 3abe246
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 5 deletions.
diff --git a/layout/_partials/header.ejs b/layout/_partials/header.ejs
@@ -2,7 +2,7 @@
 var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height)
 %>
 
-<div class="header-inner" style="height: <%= banner_img_height %>vh;">
+<div class="header-inner print-hide" style="height: <%= banner_img_height %>vh;">
   <%- partial('_partials/header/navigation') %>
   <%- partial('_partials/header/banner') %>
 </div>
diff --git a/layout/_partials/post/copyright.ejs b/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>

diff --git a/layout/_partials/post/meta-bottom.ejs b/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>
   <% } %>

diff --git a/layout/layout.ejs b/layout/layout.ejs
@@ -40,7 +40,7 @@ var colorSchema = theme.dark_mode && theme.dark_mode.enable && theme.dark_mode.d
 
     <% if (theme.scroll_top_arrow.enable) { %>
       <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
-        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
+        <i class="iconfont icon-arrowup print-hide" aria-hidden="true"></i>
       </a>
     <% } %>
 

diff --git a/layout/post.ejs b/layout/post.ejs
@@ -15,7 +15,8 @@ page.banner_mask_alpha = page.banner_mask_alpha || theme.post.banner_mask_alpha
         <div id="board">
           <article class="post-content mx-auto">
             <!-- SEO header -->
-            <h1 style="display: none"><%= page.subtitle || page.title %></h1>
+            <h1 class="print-show" id="seo-header"><%= page.subtitle || page.title %></h1>
+            <hr class="print-show">
             <% 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) { %>

diff --git a/source/css/_pages/_base/print.styl b/source/css/_pages/_base/print.styl
@@ -0,0 +1,15 @@
+@media print
+  a:not([href^='#']):not([href^='javascript:']):not(.print-no-link)::after
+    content ' (' attr(href) ')'
+    font-size 80%
+    color #57606a
+
+  .print-hide
+    display: none !important
+
+@media not print
+  .print-show
+    display none
+
+  #seo-header
+    display none
diff --git a/source/css/_pages/_post/post-page.styl b/source/css/_pages/_post/post-page.styl
@@ -125,6 +125,13 @@
     -webkit-transform translateX(0)
     transform translateX(0)
 
+#seo-header
+  height auto;
+  color: var(--post-heading-color);
+  font-weight: bold;
+  margin-bottom: 0.75em;
+  margin-top: 2em;
+
 .custom, #comments
   margin-top 2rem