hexo 主题优化

下载了几个博主修改过的hexo主题源代码,对照自带默认主题light,尝试进行修改。

修改主题主要涉及的文件是hexo\themes\light\source\csshexo\themes\light\layout文件夹下的文件。后者是布局和标签,前者是css定义。对应标签进行修改即可。

我本次修改的部分有这几个:

  1. 网页背景、文字颜色等。

    这个很简单,找到hexo\themes\light\source\css\_base\layout.styl,在body下面增加一条background-image url('/imgs/noise.png'),至于背景图片,用自己喜欢的即可。然后在hexo\themes\light\source\css\_base\variable.styl中修改color区块中的属性,就可以改变网站不同元素的颜色了。

  2. 添加drop-shadow效果。

    这种效果在前文《前端之drop-shadow效果》中做过详细介绍,这里只是移植过来。需要修改的文件是hexo\themes\light\source\css\_partial\article.styl,在.post-content下面的平行层级添加一下内容:

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
   .post-content:before
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
	
  .post-content:after
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
    right: 10px;
    left: auto;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);

只做了这点修改,以后看到喜欢的样式再对照修改吧。

另外,已经成功把hexo博客复制一份到wordpress。方法是在wordpress安装这个插件FeedWordPress,然后把网站的atom.xml地址填上就可以导入了。还发现一些问题,是wordpress和bae冲突的问题,比如不能在线安装主题和插件,评论异常。问题解决之后会写博客分享。


爱打卡-100days-第30天-1111