是熊是猫溜溜

子非鱼，焉知鱼之乐

hexo样式个性化配置

发表于 更新于 分类于
本文字数： 2.1k 阅读时长 ≈ 2 分钟

hexo博客搭建好之后，如何调整样式对于没有前端基础的人来说是一件很困难的事情，下面分享我样式调整过程中的一些经验，由于我使用的是Next主题，所以如果是其它的主题的仅做参考，有可能细节之处不太一样。

变量说明

1
2
# blog home dir
BLOG_HOME=/Users/lei/workspace/MyBlog

解锁样式定制配置

（1）打开next主题配置文件。

1
vim ${BLOG_HOME}/themes/next/_config.yml

（2）搜索custom_file_path可以看到如下配置，把反注释掉style: source/_data/styles.styl配置，记住去掉#号即可。

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

（3）注意上面的source/_data目录指的是博客home目录下的source/_data目录，首先创建_data目录，然后创建styles.style文件。

1
2
3
4
5
# create _data directory
mkdir -p ${BLOG_HOME}/source/_data

# create _data file
touch ${BLOG_HOME}/source/_data/styles.styl

自定义样式配置

下面直接晒出我的配置，自己可以打开Chrome浏览器的检查功能，慢慢对照样式进行调整，其实主要是为了PC端与移动端的适配，保证PC端简洁大方，移动端不至于空白太多。

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
//背景图片配置
body {
    background:url(/images/background.jpeg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

//文章部分配置
.main-inner {
    margin-top: 20px;
    padding: 1px 3% 1px 3%;
    background: #fff;
    min-height: 80%;
    +mobile() {
   	padding: 1px 1px 1px 1px;
    }
}

//移动端自适应
.content-wrap {
   +mobile() {
      padding: 0px 1%;
   }
}

//移动端自适应
.use-motion .post-block{
   +mobile() {
      margin-top: 10px;
      padding: 10px;
      margin-bottom: 10px;
   }
}

//移动端自适应
.comments {
   +mobile() {
      margin-top: 0px;
      overflow: hidden;   
   }
}

//移动端自适应
.gt-container .gt-meta {
   +mobile() {
      margin: 1.25em 0;
   }
}

//内容最上面留白配置
.content{
   padding-top: 0px;
}

//超链接配置
.post-body p a {
   color: #0645AD;
   border-bottom: none;
   border-bottom: 1px solid #0645AD;
   &:hover {
      color: #0B0080;
      border-bottom: none;
      border-bottom: 1px solid #0B0080;
  }
}

//graphviz图片自适应
.post-body svg {
    width: 100%;
    height: 100%;
}

//多级目录自动展开
.post-toc .nav .nav-child {
    display: block;
}