主题修改都是微调,与其说是修改,不如叫优化。主要思路是,能用代码解决,就不用插件,调用资源越少越好,保持主题精简,即便后续系统主题有更新,只有修改一些代码就能复原,轻松省心,维护方便。

这篇文章算是备份,后续如有改动,随时更新到这里。

修改电脑端文字大小

style.css中修改如下

body {
  font-size: 95%;
}

修改手机端文字大小

style.css中修改如下

@media (max-width: 767px) {
  body {
    font-size: 95%;
  }

修改顶部网站名称文字大小

style.css中修改如下

#logo {
  color: #333;
  font-size: 1.5em;
}

修改顶部网站副标题斜体为正常

style.css中修改如下

.description {
  margin: .5em 0 0;
  color: #999;
  font-style: normal;
}

添加favicon.ico

该文件用于浏览器标签图标显示,制作网站如下,完成后放到主题根目录,最后在header.php<head>标签中引用即可。

ico制作网站:www.bitbug.net

引用代码

<link rel="shortcut icon" href="/usr/themes/default/favicon.ico" type="image/x-icon" />

手机端显示分类、标签、归档、搜索(不会)

从网上可以找到实现方法,但不美观,不是自己想要的。

删除文章标题下评论和分类

archive.php(分类页和标签页)、index.php(首页)、post.php(文章)里删除以下代码

<li itemprop="interactionCount"><a href="<?php $this->permalink() ?>#comments"><?php $this->commentsNum('评论', '1 条评论', '%d 条评论'); ?></a></li>
<?php _e('分类: '); ?><?php $this->category(','); ?>

删除文章和独立页面底部评论功能

post.phppage.pho删除如下代码

    <?php $this->need('comments.php'); ?>

文章标题下面把作者名字的颜色变灰

archive.php(分类页和标签页)、index.php(首页)、post.php(文章)里添加代码style="color:#999;",位置如下:

<li itemprop="author" itemscope itemtype="http://schema.org/Person"><?php _e('作者: '); ?><a
itemprop="name" href="<?php $this->author->permalink(); ?>"
rel="author" style="color:#999;"><?php $this->author(); ?></a></li>

文章底部添加分类并优化样式

post.php标签代码位置替换成如下

<ul itemprop="keywords" class="tags">
<li><?php _e('分类: '); ?><?php $this->category(','); ?></li>
<li><?php _e('标签: '); ?><?php $this->tags(', ', true, 'none'); ?></li></ul>

给li标签设置和标题下面作者时间一样的样式,在style.cssMain位置,tags替换成如下样式代码

.post .tags {
  clear: both;
  margin-top: 1em;
  padding: 0;
  color: #999;
  font-size: .92857em;}
.tags li {
  display: inline-block;
  margin: 0 8px 0 0;
  padding-left: 12px;
  border-left: 1px solid #EEE;}
.tags li:first-child {
  margin-left: 0;
  padding-left: 0;
  border: none;}

修改后由于分类和标签距离文章内容太近,整体不和谐,所以需要再加一个段横线,在post.php文件分类和标签代码上方提前如下内容:

<div style="border: 0.5px solid #EEE;width:100px;height:0"></div>

侧边栏浮动(不会)

从网上找到了方法,好像要调用js,本着减少资源调用的原则,能不用就不用。该需求暂时也不重要,以后再说。

修改网站超链接颜色

style.css中修改成如下

/*超链接显示颜色*/
a {
  color: #444;
  text-decoration: none;
}
/*鼠标放到超链接上的颜色*/
a:hover, a:active {
  color: #3354AA;
}

添加网站底部备案信息,并改变颜色为灰色

footer.php添加如下代码

<a target="_blank" rel="nofollow" href="http://www.beian.miit.gov.cn/" style="color:#999;" >冀ICP备19025288号</a>

颜色代码style="color:#999;"需放到超链接标签内。

底部备案信息字体变小

style.css中修改成如下

#footer {
  padding: 2em 0;
  line-height: 1;
  text-align: center;
  font-size: 0.85em;
  color: #999;
}

删除首页文章评论字段

index.php删除如下代码

<li itemprop="interactionCount"><a itemprop="discussionUrl" href="<?php $this->permalink() ?>#comments"><?php $this->commentsNum('评论', '1 条评论', '%d 条评论'); ?></a></li>

添加归档独立页面(不会)

用别人做好的php文件实现过,但不能分页,不能按月按年折叠,随着文章的增加,页面会越来越长,想改又不会。后来想想归档页面也没必要,用侧边栏归档就好。

文章超链接新窗口打开

虽然可以在系统文件修改代码实现,但是全局的,不太灵活,所以我选择在编辑文章的时候用a标签实现,如下。

<a target="_blank" rel="nofollow" href="插入网址">文本内容</a>

其中rel="nofollow"用于告诉搜索引擎不要追踪该链接,可加可不加,如果是外站链接,建议加上。

修改数字和英文字体

默认主题数字字体为Georgia,是一个不对齐的衬线字体,和中文结合看起来有点别扭,需要改掉,在style.css修改如下代码。

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

修改默认登录地址

typecho默认的后台登录路径是 domain.com/admin/,为提高安全性,需要把admin文件夹名字修改成只有自己知道的名字,然后在系统根目录config.inc.php里在如下代码中,修改成刚才修改名字即可。

/** 后台路径(相对路径) */
define('__TYPECHO_ADMIN_DIR__', '/admin/');

如果修改默认登录地址后,一定不要在前端显示登录入口,不然修改登录地址就没意义了。

隐藏前端登录地址

在主题根目录sidebar.php文件中,删除相应代码即可,如下,同理评论rss、文章rss也能删除。

<?php if($this->user->hasLogin()): ?>
<li class="last"><a href="<?php $this->options->adminUrl(); ?>"><?php _e('进入后台'); ?> (<?php $this->user->screenName(); ?>)</a></li>
<li><a href="<?php $this->options->logoutUrl(); ?>"><?php _e('退出'); ?></a></li>
<?php else: ?>
<li class="last"><a href="<?php $this->options->adminUrl('login.php'); ?>"><?php _e('登录'); ?></a></li>
<?php endif; ?>

当然,也可以直接在后台控制面板直接隐藏【其他】版块。

设置网站地图sitemap

插件实现 Sitemap-for-Typecho

添加侧边栏标签云

sidebar.php添加如下内容:

<section class="widget">
<h3 class="widget-title"><?php _e('标签'); ?></h3>
<ul class="widget-list">
<?php $this->widget('Widget_Metas_Tag_Cloud', 'ignoreZeroCount=1&limit=28')->to($tags); ?>
<?php while($tags->next()): ?>
<a href="<?php $tags->permalink(); ?>" class="size-<?php $tags->split(5, 10, 20, 30); ?>"><?php $tags->name(); ?></a>
<?php endwhile; ?>
</ul>
</section>

由于标签云行间距太小,需要在style.css.widget-list li位置删除里li,并且修改行间距为1.8

/* ------------------
 * secondary
 * --------------- */
.widget-list li {
  margin: 5px 0;
  line-height: 1.7;
}

调整文章行间距

style.css中修改如下内容

/* -----------------
 * Content format
 *--------------- */
.post-content, .comment-content {
  line-height: 1.7;
  word-wrap: break-word;
}

文章两端对齐

style.css中添加text-align: justify,如下

/* ------------------
 * Main
 * --------------- */
.post {
  padding: 15px 0 20px;
  border-bottom: 1px solid #EEE;
  text-align: justify
}

调整页面左右距离

grid.css中修改如下内容

.row > [class*="col-"] {
  float: left;
  min-height: 1px;
  padding-right: 3px;
  padding-left: 3px; }

不建议调整,改动后会影响到手机端显示。(padding-rightpadding-left默认为10px)

添加谷歌分析统计代码

暂时不需要,阿里云虚拟主机自带网站分析功能,数据很全,够用了。

修改归档日期为中文,并加入文章数量统计

sidebar.php修改内容如下:

<?php $this->widget('Widget_Contents_Post_Date', 'type=month&format=Y年m月')->parse('<li><a href=" 
 {permalink}">{date}</a> <span id="ignore">({count})</span></li>'); ?>

字段Y年m月可以让前端日期显示中文,字段<span id="ignore">({count})</span>为统计当月文章数量。*1

按年归档,则修改成type=year&format=Y年即可。

参考资料:

  1. Typecho主题设置总结
  2. 如何优雅的选择字体(font-family)
  3. 在网站中使用微软雅黑是否侵权?需要方正的许可吗?
  4. Web 字体 font-family 浅谈
  5. Typecho 文章内链接在新窗口打开实现方式
  6. 如何自定义后台路径
  7. HTML链接颜色
  8. 分享一些typecho主题常用函数
  9. Typecho浏览器图标favicon.ico添加方法