经常有人问我博客主题的事,写篇文章介绍一下,也算是个备份。

我使用的是Typecho程序,主题也是在Typecho默认主题上稍加修复得到的。

1、修改字体

本站使用了鹜霞文楷字体。

首先,在主题header.php中引用字体的css文件

<link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css">

然后,修改style.css文件,在bodyh1,h2,h3,h4,h5,h6中的font-family,如下:

body {
    background-color: #FFF;
    color: #444;
    font-family: "LXGW WenKai Screen","Droid Serif",Georgia,"Times New Roman","PingFang SC","Hiragino Sans GB","Source Han Sans CN","WenQuanYi Micro Hei","Microsoft Yahei",serif;
    font-size: 100%;
}

h1,h2,h3,h4,h5,h6 {
    font-family: "LXGW WenKai Screen","Droid Serif",Georgia,"Times New Roman","PingFang SC","Hiragino Sans GB","Source Han Sans CN","WenQuanYi Micro Hei","Microsoft Yahei",serif;
}

2、修改页脚

页脚「本站已运行xx天,共xx篇文章和xx条评论。」的代码如下,主要增加了运行天数的统计:

本站已运行
<?php
$unixTime_1 = "1422748800";
$unixTime_2 = time();
$timediff = abs($unixTime_2 - $unixTime_1);
$days = intval($timediff / 86400);
echo  $days." 天. ";?>
<?php $stat = Typecho_Widget::widget('Widget_Stat');?>共 <?php echo $stat->PublishedPostsNum;?> 篇文章和 <?php echo $stat->publishedCommentsNum;?> 条评论.

3、增加图片注释

图片注释部分,修改了Typecho的Markdown解析器,属于核心代码了,我在这篇文章中提到过,现在汇总在本文中。

首先,需要修改var/HyperDown.php,对图片修改为

<figure><img class=\"skyimg\" src=\"https://static.skyue.com{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\"><figcaption class=\"image-caption\">{$escaped}</figcaption></figure>

相应style.css增加

figure {
        border-style: solid;
        border-width: 1px;
        border-color: #e7e7e7;
        padding: 2px;
}

.image-caption {
    color: #999999;
    text-align: center;
}

以上修改实现的功能:

  • src增加https://static.skyue.com前缀,本地写作时,不用补全前缀即可发布。
  • 图片和图片标题包在figure中,并添加灰色边框,避免白底图与背景色重合,分不清边界。
  • 图片标签放在figcaption中,使用灰色字体。
🔔 Email 或 RSS 订阅本博客

已有 26 条评论

  1. 这个默认主题越简约越好看。

    1. 主要不怎么想折腾了,旧东西会越看越喜欢。

  2. 差不多快10年了,争取3650+的日期

    1. 纪念文章都在心里酝酿好了😂

  3. 看你博客运行时间,是不是从高中就开始玩了?

    1. 没有,大学毕业后开始玩的

      1. 是我误判了你的年龄,我以为你刚大学毕业没几年;看了你照片后还误判,都是颜值惹的祸。

添加新评论