typecho默认主题折腾记要

  • 分类: 折腾
    •    字数669

默认主题折腾记要

修改电脑端文字大小

在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;
}

修改文章标题字体大小和行高

.post-title {
  margin: .83em 0;
  font-size: 1.2em;
}

图片居中

.post-content img, .comment-content img,
.post-content video, .comment-content video {
  max-width: 100%;
margin:0 auto;
display:block;
}

删除导航菜单文字边框，修改显示样式

    /* Navigation menu */
#nav-menu {
  margin: 25px 0 0;
  padding: 0;
}
#nav-menu a {
  display: block;
  margin-right: -1px;
  padding: 0 15px;
  border: none;
  border-bottom: none;
  height: 32px;
  line-height: 32px;
  color: #444;
  float: left;
}
#nav-menu a:hover,

#nav-menu .current {
  background: #FFF;
  font-weight: bold;
}

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

在style.css中修改如下

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

添加`favicon.ico`

header.php中<head>

<link rel="shortcut icon" href="路径/favicon.ico" type="image/x-icon" />

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

在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.css Main位置，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>

修改网站超链接颜色

在style.css中修改成如下

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

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

在footer.php添加如下代码
加了个颜色style="color:#999;"

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

底部备案信息字体变小

在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>

文章超链接新窗口打开

<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;

添加侧边栏标签云

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-right和padding-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年即可。

效果 https://www.aoabs.com

来源https://wangrufei.com/archives/219/

导航栏输出所有分类

header.php

将55-59行使用如下代码替换：

       <a<?php if($this->is('index')): ?> class="current"<?php endif; ?> href="<?php $this->options->siteUrl(); ?>"><?php _e('首页'); ?></a>
                        <?php $this->widget('Widget_Metas_Category_List')->to($category); ?>
                        <?php while($category->next()): ?>
                        <a<?php if($this->is('category', $category->slug)): ?> class="current"<?php endif; ?> href="<?php $category->permalink(); ?>" title="<?php $category->name(); ?>"><?php $category->name(); ?></a>
                        <?php endwhile; ?>

父分类和子分类 待测试

<?php $this->widget('Widget_Metas_Category_List')->to($categorys); ?>
<?php while($categorys->next()): ?>
<?php if ($categorys->levels === 0): ?>
<?php $children = $categorys->getAllChildren($categorys->mid); ?>
<?php if (empty($children)) { ?>
<li <?php if($this->is('category', $categorys->slug)): ?> class="active"<?php endif; ?>>
<a href="<?php $categorys->permalink(); ?>" title="<?php $categorys->name(); ?>"><?php $categorys->name(); ?>
<span class="badge"><?php $categorys->count(); ?></span></a>
</li>
<?php } else { ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" data-target="#"><?php $categorys->name(); ?> <b class="caret"></b></a>
<ul class="dropdown-menu">
<?php foreach ($children as $mid) { ?>
<?php $child = $categorys->getCategory($mid); ?>
<li <?php if($this->is('category', $mid)): ?> class="active"<?php endif; ?>>
<a href="<?php echo $child['permalink'] ?>" title="<?php echo $child['name']; ?>"><?php echo $child['name']; ?>
<span class="badge" style="float:right;"><?php echo $child['count']; ?></span></a>
</li>
<?php } ?>
</ul></li>
<?php } ?><?php endif; ?><?php endwhile; ?>

标签: 默认主题 折腾 记要