Typecho优化之旅

秉持着「尽可能不折腾」的原则再加上逛了一大圈并未找到喜欢的主题，于是就开始了在原生主题上进行折腾，不过还好，在Google的帮助下找到了一众大佬的优化笔记，在个人的拼凑下，成了如今这个还算满意的样子。当然后续还会再该页面继续优化

1. 归档

在编辑外观的page-archive.php文件中输入如下代码

<?php
/**
 * 文章存档
 *
 * @package custom
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?>

    <div class="col-md-12 text-center">
        <div class="page-header">
            <h2 class="page-title"><?php $this->title() ?></h2>
            <hr>
        </div>
    </div>

    <div class="col-md-12">
        <article class="page-wrapper" itemscope itemtype="http://schema.org/BlogPosting">
            <div class="post-content" itemprop="articleBody">
                <?php
                $stat = Typecho_Widget::widget('Widget_Stat');
                Typecho_Widget::widget('Widget_Contents_Post_Recent', 'pageSize='.$stat->publishedPostsNum)->to($archives);
                $year=0; $mon=0; $i=0; $j=0;
                $output = '<div class="archives">';
                while($archives->next()){
                    $year_tmp = date('Y',$archives->created);
                    $mon_tmp = date('m',$archives->created);
                    $y=$year; $m=$mon;
                    if ($year > $year_tmp || $mon > $mon_tmp) {
                        $output .= '</ul></div>';
                    }
                    if ($year != $year_tmp || $mon != $mon_tmp) {
                        $year = $year_tmp;
                        $mon = $mon_tmp;
                        $output .= '<div class="archives-item"><h4>'.date('Y年m月',$archives->created).'</h4><hr><ul class="archives_list">'; //输出年份
                    }
                    $output .= '<li>'.date('d日',$archives->created).' <a href="'.$archives->permalink .'">'. $archives->title .'</a></li>'; //输出文章
                }
                $output .= '</ul></div></div>';
                echo $output;
                ?>
            </div>
        </article>
    </div><!-- end #main-->

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

2. 友链

来自于这位大佬，ONESRC的无插件实现typecho独立友链页面
食用方法：直接将下列代码放入独立页面即可，不需要php文件

<ul class="flinks">
<li>一元-ONESRC</li>
<li>https://www.onesrc.cn/</li>
<li>https://cdn.onesrc.cn/uploads/images/favicon.png</li>
<li>onesrc.cn</li>

<li>Baidu</li>
<li>https://www.baidu.com/</li>
<li>https://www.baidu.com/favicon.ico</li>
<li>baidu.com</li>

<li>一元-ONESRC</li>
<li>https://www.onesrc.cn/</li>
<li>https://cdn.onesrc.cn/uploads/images/favicon.png</li>
<li>onesrc.cn</li>

<li>一元-ONESRC</li>
<li>https://www.onesrc.cn/</li>
<li>https://cdn.onesrc.cn/uploads/images/favicon.png</li>
<li>onesrc.cn</li>
</ul>

<ul class="flinks">
<li>一元-ONESRC</li>
<li>https://www.onesrc.cn/</li>
<li>https://cdn.onesrc.cn/uploads/images/favicon.png</li>
<li>onesrc.cn</li>

<li>Baidu</li>
<li>https://www.baidu.com/</li>
<li>https://www.baidu.com/favicon.ico</li>
<li>baidu.com</li>

<li>一元-ONESRC</li>
<li>https://www.onesrc.cn/</li>
<li>https://cdn.onesrc.cn/uploads/images/favicon.png</li>
<li>onesrc.cn</li>

<li>一元-ONESRC</li>
<li>https://www.onesrc.cn/</li>
<li>https://cdn.onesrc.cn/uploads/images/favicon.png</li>
<li>onesrc.cn</li>
</ul>


!!!
<script>document.querySelectorAll('ul.flinks').forEach(function(e){let a=e;if(a){let ns=a.querySelectorAll("li");let str='<div style="display:inline-block;">';let bgid=0;const bgs=["bg-pink","bg-violet","bg-indigo","bg-blue","bg-purple","bg-green","bg-yellow","bg-red","bg-orange"];for(let i=0;i<ns.length;i+=4){str+=(`<div class="flink-item ${bgs[Math.floor(Math.random() * 9)]}"><div class="flink-title"><a href="${ns[i+1].innerText}"target="_blank"rel="external nofollow ugc">${ns[i].innerText}</a></div><div class="flink-link"><div class="flink-link-ico"style="background: url(${ns[i+2].innerText});background-size: 42px auto;"></div><div class="flink-link-text">${ns[i+3].innerText}</div></div></div>`)}str+=`</div>`;let n1=document.createElement("div");n1.innerHTML=str;a.parentNode.insertBefore(n1,a);a.style="display: none;"}else{console.log('No such id "flinks"')}});</script>
<style>.flink-item{width:280px;height:100px;position:relative;margin:10px;background-color:#fff;border-radius:3px;float:left}.flink-title{left:25px;top:25px;position:absolute}.flink-title a{font-size:17px;color:#f1f1f1;line-height:17px;word-break:break-all;text-decoration:none;outline:0}.flink-link{right:0;bottom:0;padding:0 15px 15px;position:absolute;text-align:center}.flink-link-text{font-size:12px;color:#f1f1f1}.flink-link-ico{display:inline-block;width:42px;height:42px;border-radius:50%}.bg-pink{background-color:#FFC0CB!important}.bg-violet{background-color:#EE82EE!important}.bg-indigo{background-color:#4B0082!important}.bg-blue{background-color:#6fa3ef!important}.bg-purple{background-color:#bc99c4!important}.bg-green{background-color:#46c47c!important}.bg-yellow{background-color:#f9bb3c!important}.bg-red{background-color:#e8583d!important}.bg-orange{background-color:#f68e5f!important}</style>
!!!

3. 目录

目录来自于GPT-4，但尚未优化好，不太完整
在sidebar.php文件内输入下列代码

<?php if ($this->is('post')): ?>
<section class="widget">
    <h3 class="widget-title"><?php _e('目录'); ?></h3>
    <div id="theContentIndex">
        <ul id="tocList">
            <!-- 目录项将在这里插入 -->
        </ul>
    </div>
</section>
<?php endif; ?>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var headings = document.querySelectorAll(".post-content h2, .post-content h3"); // 选择二级和三级标题
        var tocList = document.getElementById("tocList");

        if (tocList) {
            var currentLevel = 2; // 从二级标题开始
            var currentList = tocList;

            headings.forEach(function(heading) {
                var level = parseInt(heading.tagName.substring(1)); // 获取标题级别（2对于h2，3对于h3）
                var id = heading.innerText.replace(/\s+/g, '-').toLowerCase(); // 创建ID
                heading.id = id;

                if (level > currentLevel) {
                    var newList = document.createElement("ul");
                    if (currentList.lastElementChild) {
                        currentList.lastElementChild.appendChild(newList);
                    } else {
                        // 如果当前列表为空，则直接添加到父列表
                        currentList.appendChild(newList);
                    }
                    currentList = newList;
                } else if (level < currentLevel) {
                    currentList = currentList.parentElement; // 返回到上一级列表
                }

                // 确保当前列表是有效的UL元素
                if (currentList.tagName !== 'UL') {
                    currentList = currentList.closest('ul');
                }

                var listItem = document.createElement("li");
                var link = document.createElement("a");
                link.href = "#" + id;
                link.innerText = heading.innerText;
                listItem.appendChild(link);
                currentList.appendChild(listItem);

                currentLevel = level; // 更新当前标题级别
            });
        }
    });
</script>

style.css 中输入下列代码

/* 下面三个是关于右侧栏目录的样式 */
#theContentIndex {
    position: fixed;
    right: 20px; /* 根据实际需要调整 */
    top: 100px; /* 根据实际需要调整 */
    width: 200px; /* 根据实际需要调整 */
    max-height: 70%;
    overflow-y: auto;
    background: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#tocList li a {
    display: block;
    padding: 5px;
    color: #333;
    text-decoration: none;
}

#tocList li a:hover {
    background-color: #eee;
}

4. 运行时间

在fonter.php 中添加如下代码
来自于万能的GPT-4.0

<br>
感谢陪伴: 
<?php
//可以修改成自己网站的初始时间
$time = Sec2Time('2023-12-21 00:00:00');
echo $time['years'].'年'.$time['days'].'天'.$time['hours'].'小时';
// $time['years'].'年'
// $time['minutes'].分
// $time['seconds'].秒
?>

<?php
function Sec2Time($time){
    //设置时区，如果需要去掉注释即可
    //date_default_timezone_set('Asia/Shanghai');
    $stime = strtotime($time);
    $times = time() - $stime;
    if(is_numeric($times)){
        $value = array(
            "years" => 0, 
            "days" => 0, 
            "hours" => 0,
            "minutes" => 0, 
            "seconds" => 0,
        );
        if($times >= 31556926){
            $value["years"] = floor($times / 31556926);
            $times = ($times % 31556926);
        }
        if($times >= 86400){
            $value["days"] = floor($times / 86400);
            $times = ($times % 86400);
        }
        if($times >= 3600){
            $value["hours"] = floor($times / 3600);
            $times = ($times % 3600);
        }
        if($times >= 60){
            $value["minutes"] = floor($times / 60);
            $times = ($times % 60);
        }
        $value["seconds"] = floor($times);
        return (array) $value;
    }else{
        return (bool) FALSE;
    }
}
?>

Typecho优化之旅

1. 归档

2. 友链

3. 目录

4. 运行时间

添加新评论

最新文章

最近回复

分类

归档

其它