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

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

banner 图片上的文字加阴影

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
--- 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

屏蔽内置的分享

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
--- 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,需要特别设置,不然你的代码块也会有边框:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
--- 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

本博客微信公众号

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