目录

上一篇文章写了很多侧边栏和社会化评论分享系统的定制,现在说一说,主题样式的修改。

这几个部分是经常需要个性化定制的,在source/_includes中存在其对应的HTML文件,这是主题默认的文件,更换主题,更新octopress会被覆盖,所以应该编辑source/_includes/custom下的文件来实现修改。

1.1 Header(标题栏)

标题栏显示的内容为/source/_includes/custom/header.html所实现的,其中title和subtitle在_config.yml中定义,你可以进行适量的修改: {% raw %}

<hgroup>
  <h1><a href="{{ root_url }}/">{{ site.title }}</a></h1>
  {% if site.subtitle %}
    <h2>{{ site.subtitle }}</h2>
  {% endif %}
</hgroup>

1.2 Navigation(导航栏)

可以自行为导航栏添加项目,链接至不同的页面,在/source/_includes/custom/navigation.html中编辑即可。 {% raw %}

<ul class="main-navigation">
  <li><a href="{{ root_url }}/">博客主页</a></li>
  <li><a href="{{ root_url }}/blog/archives">文章列表</a></li>
  <li><a href="{{ root_url }}/category-cloud">分类云</a></li>
  <li><a href="{{ root_url }}/about">关于</a></li>
</ul>

当想添加一些页面,如“关于”页面,可以试验rake new_page['name']命令来创建,如rake new_page['about']后,会建立source/about/index.html文件,在此文件编辑,添加自己想要展示的内容,然后再navigation.html里添加正确的路径即可,如<li><a href="{{ root_url }}/about">关于</a></li>

source/_includes/custom/footer.html中编辑尾栏: {% raw %}

<p>
  Copyright &copy; {{ site.time | date: ""%Y""
  <span class="credit">
          Powered by 
          <a href="http://octopress.org">Octopress</a>
  </span>
</p>

默认显示Copyright@2013 - author - Powered by Octopress,你可以添加自己想显示在尾栏的东西,第三方统计流量统计工具也可以添加到这,如CNZZ、Google analytics和百度统计等,使用这些工具可以更详细的分析网站流量,改善引流措施,完善网站,具体添加方法见统计工具与SEO

2. 样式修改

添加或修改控制样式,需编辑sass/custom/_styles.scss,博客的所有颜色控制在/sass/base/_theme.scss中进行设置。定制自己的配色,编辑sass/custom/_colors.scss。查看HSL COLOR PICKER,帮你挑选喜欢的颜色。

修改布局,需要编辑sass/base/_layout.scss,可以修改各部分的宽度等。

2.1 添加背景图片

sass/custom/_styles.scss中添加:

html {
        background: #555555 url("/images/bg3.jpg");
        //background: #555555;
}

body > div { 
        background-image: none; 
        //background: #F5F5D5
} //侧边栏

body > div > div { //文章内容
        background-image: none; 
        //background: #F5F5D5; 
        //background: url("/images/bg.jpg");
}

将背景图片放入source/images/中,修改上述代码中的路径指向想要的图片,即可 更改博客、侧边栏或文章的背景图片。博客使用背景图片后,与Header区不太和谐, 所以我在/sass/base/_theme.scss中将header-bg设置成透明色了。

2.2 LOGO图片

我所说的logo图片有两种,一个是打开一个网页时,标签栏上显示的小图片。还有一个是标题栏主标题旁的图片。

首先针对于第一种可以选择你喜欢的图片(大小适中),替换source目录下的favicon.png即可。

或者将logo图片放入source/images中,然后修改source/_includes/head.html,找到favicon.png,修改其路径指向你的图片即可。

对于主标题旁的图片需要在sass/custom/_styles.scss中填入如下语句:

//Blog logo pic
@media only screen and (min-width: 550px) {

        body > header h1{
                background: url("/images/logo1.png") no-repeat 0 1px;
                padding-left: 65px;
        }

        body > header h2 { padding-left: 65px; }
}

根据自己情况进行修改即可。

2.3 导航栏倒圆角

我设置的header区背景色透明,所以导航栏的直角有些尖锐,在sass/custom/_styles.scss中添加如下语句,将其修改为圆角:

//倒圆角
@media only screen and (min-width: 1040px) {
        body > nav {
                @include border-top-radius(.4em);
        }

        body > footer {
                @include border-bottom-radius(.4em);
        }
}

3. 滑动返回顶部按钮

当文章较长,通常希望有一个返回顶部的按钮,如下方法实现了在页面右下方添加一个返回顶部的图片按钮,点击后可以滑动的返回顶部。

首先创建source/javascripts/top.js,实现滑动返回顶部效果,添加如下代码:

function goTop(acceleration, time)
{
        acceleration = acceleration || 0.1;
        time = time || 16;

        var x1 = 0;
        var y1 = 0;
        var x2 = 0;
        var y2 = 0;
        var x3 = 0;
        var y3 = 0;

        if (document.documentElement)
        {
                x1 = document.documentElement.scrollLeft || 0;
                y1 = document.documentElement.scrollTop || 0;
        }
        if (document.body)
        {
                x2 = document.body.scrollLeft || 0;
                y2 = document.body.scrollTop || 0;
        }
        var x3 = window.scrollX || 0;
        var y3 = window.scrollY || 0;

        var x = Math.max(x1, Math.max(x2, x3));
        var y = Math.max(y1, Math.max(y2, y3));

        var speed = 1 + acceleration;
        window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

        if(x > 0 || y > 0)
        {
                var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
                window.setTimeout(invokeFunction, time);
        }         
}

然后创建source/_includes/custom/totop.html,设置返回顶部按钮样式和位置,代码如下:

<!--返回顶部开始-->
<div id="full" style="width:0px; height:0px; position:fixed; right:180px; bottom:150px; z-index:100; text-align:center; background-color:transparent; cursor:pointer;">
        <a href="#" onclick="goTop();return false;"><img src="/images/top.png" border=0 alt="返回顶部"></a>
</div>
<script src="/javascripts/top.js" type="text/javascript"></script>
<!--返回顶部结束-->

最后,还需要将返回顶部的图片放入source/images,命名为top.png(或修改totop.html中图片的路径)。

4. 二维码展示

在关于页面或边栏可以展示你的个人博客的二维码,方便移动终端扫描访问你的博客,插件主页点击这里

在侧边栏显示,则将qrcode.html放入source/_includes/custom/asides/中,在_config.ymldefault_asides添加custom/asides/qrcode.html即可显示。

或者将qrcode.html代码添加到你想展示的页面的HTML文件中亦可。


参考文章: