对 Jacman 主题的一些个性化修改

文章目录

1. 1. banner 图片上的文字加阴影
2. 2. 屏蔽内置的分享
3. 3. 表格加边框

本博客基于 Jacman 这个主题，这篇文章记录一下所做的一些修改。原理都是相同的，这些修改一般也可以用于其他主题。

banner 图片上的文字加阴影

本博客 banner 图片搭配白色字体很难看清，换其他颜色字体搭配起来也总觉得不好看，就想到了字体加阴影。

字体阴影使用了 CSS 的 text-shadow，搜索框阴影是 box-shadow，修改的地方如下：

--- a/themes/jacman/source/css/_partial/header.styl
+++ b/themes/jacman/source/css/_partial/header.styl
@@ -7,7 +7,6 @@ body
     else
       background color-theme
     color color-white
+    text-shadow: 2px 2px 3px #000000;
     padding 1em 0 0.8em 
     @media tablet
       padding 1.8em 0 1.5em
@@ -21,7 +20,6 @@ body
     a
       display block
       color color-white
+      text-shadow: 2px 2px 3px #000000;
 
 #imglogo
   float left
@@ -125,9 +123,7 @@ header nav
     font-size 0.87em
     line-height line-height+0.2
     border 1px solid color-white
+    box-shadow:3px 3px 5px #aaaaaa;
     color color-white
+    text-shadow: 2px 2px 3px #000000;
     background transparent
     width 80%
     padding-left 0.5em

屏蔽内置的分享

文章底部有一些分享到微博微信之类的按钮，个人觉得用处不大又占地方，设置一个开关来控制这个功能：

--- a/themes/jacman/_config.yml
+++ b/themes/jacman/_config.yml
@@ -85,6 +85,8 @@ jiathis:
   enable: false ## if you use jiathis as your share tool,the built-in share tool won't be display.
   id:    ## e.g. 1889330 your jiathis ID. 
   tsina: ## e.g. 2176287895 Your weibo id,It will be used in share button.
+jacmanshare:
+  enable: false ## jacman theme build-in share buttons
 
 #### Analytics
 google_analytics:
diff --git a/themes/jacman/layout/_partial/after_footer.ejs b/themes/jacman/layout/_partial/after_footer.ejs
index 9ec284c..d3d9ba4 100644
--- a/themes/jacman/layout/_partial/after_footer.ejs
+++ b/themes/jacman/layout/_partial/after_footer.ejs
@@ -80,7 +80,7 @@ $(document).ready(function(){
 });
 </script>
 <% } %>
-<% if ((page.layout=='post'||page.layout=='page'||page.layout=='photo')&&!theme.jiathis.enable) { %>
+<% if ((page.layout=='post'||page.layout=='page'||page.layout=='photo')&&!theme.jiathis.enable&&theme.jacmanshare.enable) { %>
 <script type="text/javascript">
 $(document).ready(function(){ 
   var $this = $('.share'),

表格加边框

默认的表格样式只有行边框，没有最外层边框和列边框，需要修改一下 table 样式；表头也加了个灰色的背景。注意的是 hexo 的代码块也是一个 table，需要特别设置，不然你的代码块也会有边框：

--- a/themes/jacman/source/css/_partial/article.styl
+++ b/themes/jacman/source/css/_partial/article.styl
@@ -181,16 +181,20 @@ article
       max-width 100%
       border-collapse collapse
       border-spacing 0
+      border 1px solid lighten(color-gray,30%)
       margin-top: 1em
       th
         font-weight bold
-        border-bottom 2px solid lighten(color-gray,30%)
+        background-color lighten(color-gray,50%)
+        border 1px solid lighten(color-gray,30%)
         padding 0.5em
         line-height: 1.3em
       td 
-        border-bottom 1px solid lighten(color-gray,30%)
+        border 1px solid lighten(color-gray,30%)
         padding 0.5em
         line-height: 1.3em
+    .highlight table
+      border none
     .pullquote
       text-align left
       width 45%

最终效果是这样的：

Department	Name	Salary
Sales	Henry	80000
IT	Max	90000
IT	Tom	90000

---

本博客微信公众号