1. 修改sidebar.php,显示首页博主头像

2. 增加自定义CSS

/* 缩小Hello文字字号并设置左右间距 */
@import url("https://fontsapi.zeoseven.com/309/main/result.css");

body {
    font-family: "KingHwaOldSong" , "PingFang SC", "Microsoft YaHei", sans-serif;
    font-weight: normal;
}


:root {
  --hello-min: 0.7rem;
  --hello-pref: 4vw;
  --hello-max: 2rem;
}
.index-footer-widget .hello-widget .hello-content .hello-text {
    font-size: clamp(var(--hello-min), var(--hello-pref), var(--hello-max));
    /* 保留原有 color, font-weight 等 */
}

3. 修改友情链接模板,去除标题、添加友链要求、申请要求,条件减为2个。

4. 修改分组字号为2rem

5. 添加归档、登录退出按钮navbar.php

<!-- 添加归档 -->
<div>
<a class="nav-top-item" href="/guidang.html" target="_blank" title="归档">
<i class="iconfont icon-guidang"></i></a>
</div>
<!-- 添加登录登出 -->
       <?php if($this->user->hasLogin()): ?>
    <div><a href="<?php $this->options->adminUrl(); ?>"><?php _e('后台'); ?> </a></div>
    <div><a href="<?php $this->options->logoutUrl(); ?>"><?php _e('登出'); ?></a></div>
<?php else: ?>
    <div><a href="<?php $this->options->adminUrl('login.php'); ?>"><?php _e('登录'); ?></a></div>
<?php endif; ?>

6. 图标地址

//at.alicdn.com/t/c/font_5127330_klbkcq4678o.css

7. 修改文章页面中图片大小,原主题图片尺寸是撑满容器,这里从100%改为80%。

主题已更新解决

  markdown-style.min.css文件中的.markdown-body img{display:block;max-width:80%

8. 增加标签云

  • 新建文件 widgets/widget-tagcloud.php
  • 打开您的侧边栏文件(例如 components/sidebar.php),在合适的位置添加一行引入代码,例如放在热门文章后面:
<?php require_once 'widgets/widget-hotposts.php'; ?>
<?php require_once 'widgets/widget-tagcloud.php'; ?>  <!-- 新增这一行 -->
<?php
/**
 * 标签云(所有标签)- 紧凑微圆角版(完美适配深/浅主题)
 *
 * @author  您的名字
 * @link    https://example.com
 * @update  2025-02-24
 */
if (!defined('__TYPECHO_ROOT_DIR__')) {
    exit;
}
?>
<style>
/* 标签云专属样式 - 使用主题变量,自动适配深色模式 */
.tagcloud-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.tagcloud-item {
    margin: 0;
}
.tagcloud-link {
    display: inline-block;
    padding: 0.1rem 0.3rem;
    background: var(--bg-color-primary);      /* 使用主题次级背景色(浅灰/深灰) */
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: var(--font-color-main);            /* 使用主题主文字颜色(黑/白) */
    text-decoration: none;
    transition: all 0.2s ease;
}
.tagcloud-link:hover {
    background: var(--color-primary);          /* 使用主题主色(蓝色) */
    color: #fff !important;                     /* 悬停时文字强制变白,确保清晰可读 */
}
.tagcloud-count {
    font-size: 0.75rem;
    margin-left: 0.2rem;
    opacity: 0.7;
    color: var(--font-color-main-light);       /* 使用主题浅色文字(深色下自动变浅) */
}
.text-center {
    text-align: center;
    color: var(--font-color-muted);             /* 使用主题柔和文字 */
}
</style>

<div class="hh-widget mt-3 p-3">
    <div class="widget-title mb-3">
        <div class="widget-title-top-bg" style="background:var(--tagcloud-h-bg, #4a90e2);"></div>
        <i class="iconfont icon-tag mr-1"></i>标签云
    </div>
    <div class="widget-content tagcloud-widget scroll-cover">
        <?php
        $limit = 20;
        $db = Typecho_Db::get();
        $tags = $db->fetchAll($db->select('mid', 'name', 'slug', 'count')
            ->from('table.metas')
            ->where('type = ?', 'tag')
            ->order('count', Typecho_Db::SORT_DESC)
            ->limit($limit));

        if (!empty($tags)):
        ?>
        <ul class="tagcloud-list">
            <?php foreach ($tags as $index => $tag): 
                $tagUrl = Typecho_Common::url('/tag/' . $tag['slug'] . '/', $this->options->siteUrl);
            ?>
            <li class="tagcloud-item">
                <a class="tagcloud-link" href="<?php echo $tagUrl; ?>" 
                   title="<?php echo htmlspecialchars($tag['name']); ?> 共 <?php echo $tag['count']; ?> 篇文章">
                    <span class="tagcloud-name"><?php echo htmlspecialchars($tag['name']); ?></span>
                    <span class="tagcloud-count">(<?php echo $tag['count']; ?>)</span>
                </a>
            </li>
            <?php endforeach; ?>
        </ul>
        <?php else: ?>
        <div class="text-center">暂无标签</div>
        <?php endif; ?>
    </div>
</div>

9. 替换版权声明,post-content.php内

<!-- 版权声明 -->
            <div class="post-copyright mt-4 p-3">
                <div class="copyright-content">
                    <div class="copyright-title">©版权申明</div>
                    <p class="copyright-desc">
                        - 版权属于 <a href="<?php $this->author->permalink(); ?>" title="<?php $this->author(); ?>">@<?php $this->author(); ?></a>,作品采用
                        <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans"
                           target="_blank" rel="noopener noreferrer"
                           style="display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; transform: translateY(-2px); text-decoration: none;">
                            <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="CC" style="width: 1.3rem; ">
                            <img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="BY" style="width: 1.3rem; ">
                            <img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="NC" style="width: 1.3rem; ">
                            <img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="SA" style="width: 1.3rem; ">
                            CC BY-NC-SA 4.0
                        </a> 进行许可
                    </p>
                </div>
                <!-- 加了左边距的 SVG 签名块 -->
                <div class="copyright-svgname animated-signature svg-name" style="margin-left: 10%;">
                    <?php $this->options->svgName(); ?>
                </div>
            </div>

10. 增加自定义CSS,修改主题不支持定义HTML图片宽度

主题已更新解决

/* 让带有 width 属性的图片优先使用 HTML 宽度,覆盖原有 max-width:100% */
.markdown-body img {
    max-width: none;
    width: auto;
}

11. 评论删除后出现错误代码问题

主题已更新解决

解决办法 https://blog.ziyege.com/jishu/1085.html

12. SEO,放在主题自定义head里

<!-- 基础 SEO -->
<meta name="description" content="子夜歌的个人主页,以历史文化为底蕴,分享诗书乐画、音乐摄影、Typecho建站技巧、小红书笔记与生活点滴。品味传统,记录当下。">
<meta name="author" content="ziyege">
<meta name="robots" content="index, follow">
<!-- keywords 可选,非必要 -->
<meta name="keywords" content="子夜歌,文化历史,琴棋书画,音乐摄影,美术,Typecho,小红书分享,个人博客,生活点滴,西安">

<!-- 移动端适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 浏览器主题色 -->
<meta name="theme-color" content="#2c5f8a">

13. 社交媒体优化

https://blog.ziyege.com/jishu/1106.html

14. hello宽度由于CDN变短问题,修改index.php

 <!-- 增加col-12 -->
 <div class="index-footer-widget col-12 mt-3 px-1">

15. 增加侧边栏播放器

  https://blog.ziyege.com/jishu/1148.html