Typecho 主题常用修改项

首页自动摘要

Typecho默认是只有全文输出或者手动摘要(通过<!--more-->进行摘要)
这时候我们就需要打开模板的index.phparchive.php
分别找到其中的

<?php $this->content('- 阅读剩余部分 -'); ?>

将其修改为(###为字数,可以自行修改)

<?php $this->excerpt(###,'- 阅读剩余部分 -'); ?>

导航栏调用分类

打开模板中的header.php
找到其中的

<?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
<?php while($pages->next()): ?>
<a<?php if($this->is('page', $pages->slug)): ?> class="current"<?php endif; ?> href="<?php $pages->permalink(); ?>" title="<?php $pages->title(); ?>"><?php $pages->title(); ?></a>
<?php endwhile; ?>

只显示分类修改替换为以下代码
分类与独立页面同时显示则添加上以下代码

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

修改默认Title

Typecho的默认Title为网站的名称
如需修改为网站名称加上网站介绍
header.php中找到

<?php $this->options->title() ?>

在其后面添加上

<?php $this->options->description() ?>

修改后台地址

将根目录的admin文件夹改名为想要的后台地址

打开根目录的config.inc.php文件

将其中的admin修改为想要的后台地址

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

PHP版本升级至PHP7

更改Typecho的根目录下配置文件config.inc.php

将其中的

$db = **new** Typecho_Db('Mysql', 'typecho_');

修改为

$db = new Typecho_Db('Pdo_Mysql', 'typecho_');

归档模板

创建自定义模版页面文件

复制一份模板的page.php 重命名为自定义模板的名字(例如archives.php)

添加自定义模版标识

将归档页面模版(archives.php)内第一行

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

替换成

<?php
/**
 * 归档
 *
 * @package custom
 */
 $this->need('header.php'); ?>

替换主体内容为输出归档文章列表

archives.php文件内

<?php $this->content(); ?>

替换成

<?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=10000')->to($archives);
    $year=0; $mon=0; $i=0; $j=0;
    $output = '<div id="archives">';
    while($archives->next()):
        $year_tmp = date('Y',$archives->created);
        $mon_tmp = date('m',$archives->created);
        $y=$year; $m=$mon;
        if ($mon != $mon_tmp && $mon > 0) $output .= '</ul></li>';
        if ($year != $year_tmp && $year > 0) $output .= '</ul>';
        if ($year != $year_tmp) {
            $year = $year_tmp;
            $output .= '<h3>'. $year .' 年</h3><ul>'; //输出年份
        }
        if ($mon != $mon_tmp) {
            $mon = $mon_tmp;
            $output .= '<li><span>'. $mon .' 月</span><ul>'; //输出月份
        }
        $output .= '<li>'.date('d日: ',$archives->created).'<a href="'.$archives->permalink .'">'. $archives->title .'</a> <em>('. $archives->commentsNum.')</em></li>'; //输出文章日期和标题
    endwhile;
    $output .= '</ul></li></ul></div>';
    echo $output;
?>

Prism.js 代码高亮

添加 CSS 和 JS

下载 CSS 和 JavaScript 文件放置主题目录

在主题的header.php文件中添加以下代码

<link rel="stylesheet" href="<?php $this->options->themeUrl('prism.css');?>" />
<script src="<?php $this->options->themeUrl('prism.js');?>"></script>

修改滚动条样式

pre::-webkit-scrollbar {
    width: 8px;
    height: 6px
}

pre::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: silver
}

pre::-webkit-scrollbar-thumb:hover {
    background-color: silver
}

code::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

code::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: silver
}

code::-webkit-scrollbar-thumb:hover {
    background-color: #bbb
}

FancyBox 灯箱

引用FancyBox插件

把下面内容添加到 header.php</head> 前面

<link rel="stylesheet" href="https://libs.cdnjs.net/fancybox/3.5.7/jquery.fancybox.css">

把下面内容添加到 footer.php</body> 前面

<script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js"></script>
<script src="https://libs.cdnjs.net/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $( ".fancybox").fancybox();
    });
</script>

修改post.php

打开post.php,将

<?php $this->content(); ?>

修改成

<?php
    $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
    $replacement = '<a href="$1" data-fancybox="gallery" /><img src="$1" alt="'.$this->title.'" title="点击放大图片"></a>';
    $content = preg_replace($pattern, $replacement, $this->content);
    echo $content;
?>

评论邮箱提醒

项目地址:LoveKKComment

设置以QQ邮箱为例

  1. 进入设置打开IMAP/SMTP服务 并且生成授权码
  2. 插件设置-SMTP登录密码为QQ邮箱生成的授权码
  3. 插件设置-SMTP地址为smtp.qq.com
  4. 插件设置-SMTP端口为587