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

我使用的是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文件，在body和h1,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中，使用灰色字体。

分类: 折腾 标签: typecho, 博客程序

🔔 Email 或RSS订阅本博客

已有 22 条评论

  1. 书签网 书签网

    还是简单一点好看

    回复
  2. 灰常记忆 灰常记忆

    改的还可以哈

    回复
    1. 拾月 拾月

      谢谢~

      回复
  3. alan alan

    想问一下博主字体咋改大点，感觉按照你的方法改后，字体还是小一点

    回复
    1. 拾月 拾月

      需要修改font-size，试试打到style.css中的下面这段，把font-size改为17，默认好像是16

      .post-content,.comment-content {

      line-height: 1.6;
word-wrap: break-word;
    font-size: 17px;

      }

      回复
      1. alan alan

        谢谢博主

        回复
  4. 粽叶加米 粽叶加米

    博友们有好多用Typecho，wordpress的确有些臃肿了

    回复
    1. 拾月 拾月

      typecho也有一些遗憾，比如没有restful api，与其它产品联动不方便。
      但我真的非常佩服作者，多年来只维持，不加新功能，很克制。这风格让我用起来非常安心。

      回复
  5. awuAmbre awuAmbre

    我刚玩个人博客, 界面基本就按照你的来山寨的哈哈, 希望不要介意

    在这里我也想咨询一个问题, 希望看到的大家能帮我解决一下. 就是目前我博客里的内容已经有部分可以再Bing搜到, 但会出现两个链接结果, 一个是正常的, 另一个链接则会显示我的公网IP, 我该怎么做才能不让他搜出显示公网IP的结果

    回复
    1. 苏三州 苏三州

      用cdn试试？

      回复
    2. 拾月 拾月

      这个我没出现过，可以google一下，应该能在服务器端配置解决。

      回复
  6. 段先森 段先森

    你的😎主题是我喜爱的其中之一，哈哈

    回复
    1. 拾月 拾月

      简简单单，舒舒服服，连个异步加载都没有😂

      回复
  7. 老张博客 老张博客

    其实这种超简的主题还是不错的。

    回复
    1. 拾月 拾月

      哈哈，是的

      回复
  8. 网友小宋 网友小宋

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

    回复
    1. 拾月 拾月

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

      回复
  9. Andy烧麦 Andy烧麦

    差不多快10年了，争取3650+的日期

    回复
    1. 拾月 拾月

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

      回复
  10. 夜未央 夜未央

    看你博客运行时间，是不是从高中就开始玩了？

    回复
    1. 拾月 拾月

      没有，大学毕业后开始玩的

      回复
      1. 夜未央 夜未央

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

        回复

添加新评论