Xuan's blog - 网站优化
type: channel
link: https://blog.ybyq.wang/category/site-optimization/
description: 主题美化、主题优化、前端性能、后端压测、缓存与 Gzip、字体与图片优化，聚焦 LCP/CLS 等核心指标。
items: Handsome主题添加新年倒计时
items: Typecho 博客统计脚本的最佳使用：同步vs异步，Head vs Body
items: Typecho handsome 主题更换字体详细指南
items: Handsome 主题修改页面整体宽度 - v10.1.0
items: Typecho handsome 添加评论区OwO表情包 - QQ,抖音,B站等
items: 分享60个有趣实用的API及其Typecho博客集成指南
items: typecho博客网站头部SEO优化完整指南
items: handsome主题美化及优化：10.1.0最新版 - 2
items: Typecho handsome主题美化：10.1.0最新版

Handsome主题添加新年倒计时
type: item
date: 2025-10-18T23:21:00+08:00
description: 发现在bing中能搜索到，但没展示完整，可能是第一次发的字太少了。现在用ai重写了，首页也暂时去掉了倒计时，然后等60天的时候我再回来。给handsome主题的首页加一个精美的倒计时组件，支持多种节日倒计时，包括春节、元旦、情人节等。具有现代化的设计风格，完美适配响应式布局和夜间模式。功能特性现代化设计：采用卡片式设计，支持圆角、阴影和渐变效果响应式布局：完美适配手机、平板和桌面设备夜间模式支持：自动适配主题的暗色模式实时更新：每秒自动刷新倒计时高度可定制：支持自定义日期、标题、颜色和样式动画效果：秒数显示带有脉冲动画效果多节日支持：可轻松切换为不同节日的倒计时效果预览已支持响应式和夜间模式。效果如下：快速使用方法一：通过后台设置（推荐）登录您的Handsome主题后台进入 开发者设置 页面找到 首页列表最前方广告位 选项将下方完整代码复制粘贴到该位置保存设置即可方法二：直接编辑主题文件如果熟悉代码编辑，也可以直接编辑主题文件：文件位置：usr/themes/handsome/在首页模板文件中添加代码代码如下：[hide] 2026年 - 春节倒计时 -- 天 -- 时 -- 分 -- 秒 [/hide]

Typecho 博客统计脚本的最佳使用：同步vs异步，Head vs Body
type: item
date: 2025-08-19T14:27:00+08:00
description: 前言在搭建个人博客时，我们通常需要集成多个统计服务来跟踪网站访问数据，如 Google Analytics、百度统计、51.la、统计鸟、UStat、Umami 等。但面对这些统计脚本，我们经常会遇到以下困惑：应该选择同步安装还是异步安装？统计代码应该放在 还是 底部？不同的选择会如何影响页面性能和数据准确性？本文将从技术原理出发，结合各大统计服务商的官方建议，为您提供清晰的选择策略和最佳实践方案。核心概念：同步 vs 异步安装为什么选择很重要？网页加载统计脚本时面临一个根本矛盾：数据准确性 vs 页面性能。不同的安装方式直接影响：首屏渲染速度：用户看到页面内容的快慢统计数据完整性：能否准确捕获所有访问行为用户体验质量：页面是否流畅无闪烁两种安装方式对比为了帮助您做出正确选择，我们用图表直观对比两种方式：对比维度同步安装 (Synchronous)异步安装 (Asynchronous)加载方式脚本按顺序逐个加载，必须等待前一个完成多个脚本同时并行下载，互不阻塞页面表现用户看到白屏直到关键脚本加载完成页面内容边加载边显示，更快可见加载速度⚠️ 较慢，串行等待✅ 较快，并行处理页面闪烁✅ 无闪烁，内容稳定⚠️ 可能闪烁（A/B测试场景）执行顺序✅ 可控，按加载顺序执行⚠️ 不可预测，完成时间决定适用场景A/B测试、关键业务逻辑一般统计、性能优先网站可视化对比同步安装效果：异步安装效果： 闪烁现象：异步加载时，页面先显示原始内容，脚本加载完成后快速切换到最终内容，形成视觉闪烁。参考资料：SiteSpect - Sync vs Async JavaScript Tags，NotifyVisitors - Synchronous and Asynchronous Scripts技术实现方式对比三种主流加载技术加载技术代码示例执行时机适用场景async 参考：Google Analytics 官方文档百度统计推荐位置：混合部署最佳实践：在 中声明全局变量，在 底部动态加载脚本 参考：百度统计官方文档51.la 统计重要更新：51.la 现已推出 V6 版本，安装方式与 V5 版本有重要不同。V6 版本（最新推荐）推荐位置： 部分（ 标签前）安装方式：同步安装，支持多种安装选项根据官方指南，V6 版本提供以下安装选择：同步安装（推荐）：确保统计准确性，避免页面闪烁异步安装：提升页面加载性能旧式安装：兼容旧版本的安装方式JS文件用：适用于特定技术架构本地化集成：支持本地部署需求 V5 版本（传统方式）推荐位置： 底部官方建议：将统计代码放在接近 的位置 注意：请以 51.la 官方提供的最新安装代码为准，不同版本和不同站点的代码可能有所差异。参考：51.la 官网，51.la V6 使用指南UStat 统计推荐位置： 部分建议做法：使用 async 属性，放在 前 Umami Analytics推荐位置： 部分特点：开源、隐私友好，支持 async defer 统计鸟等其他统计工具推荐位置：根据脚本特性选择原则：异步脚本优先放 ，同步脚本放 底部 使用插件或自定义功能如果主题不支持直接修改，可以：使用统计插件：如 Google Analytics 插件后台自定义代码：在 Typecho 后台的"自定义代码"选项中添加functions.php 注入：通过主题的 functions.php 文件注入脚本缓存和静态化的考虑缓存环境下的脚本加载HTML缓存：不影响脚本的加载和执行顺序CDN缓存：可能影响脚本文件的加载速度，但不改变执行逻辑浏览器缓存：有助于提高脚本加载速度静态化网站的统计脚本对于使用静态化插件的 Typecho 站点：确保统计代码包含在静态化的模板中动态统计功能不受影响，因为执行发生在浏览器端注意更新统计配置后需要重新生成静态文件性能优化建议脚本加载优先级关键统计脚本（如 GA）： + async辅助统计脚本： 底部或延迟加载可选统计脚本：条件加载或懒加载资源合并与优化// 统一的统计脚本管理器 (function() { 'use strict'; // 延迟加载非关键统计脚本 window.addEventListener('load', function() { // 加载 51.la var script51 = document.createElement('script'); script51.src = '//js.users.51.la/YOUR_51LA_ID.js'; document.head.appendChild(script51); // 加载其他统计脚本 // ... }); })();错误处理和回退方案// UStat脚本错误处理加载，由于之前使用这个出现过问题导致页面某些资源被卡10s，所以就用这个…

Typecho handsome 主题更换字体详细指南
type: item
date: 2025-08-18T14:56:00+08:00
description: 优雅的字体能够显著提升网站的阅读体验和视觉效果。本文将详细介绍如何在 Typecho Handsome 主题中更换为各种优秀的中文字体。🎯 基础设置方法第一步：在自定义 head 中添加字体链接进入 Handsome 主题后台 → 主题设置 → 自定义 head，添加对应字体的 CSS 链接。第二步：在自定义 CSS 中应用字体进入 Handsome 主题后台 → 主题设置 → 自定义 CSS，添加字体样式规则。📝 热门字体推荐与配置（13种精选字体）1. 霞鹜文楷（推荐✨）特色：优雅的楷体风格，适合阅读，支持简繁中文适用场景：博客文章、文学网站、个人日记[hide]屏幕阅读版（推荐） 或者 /* 自定义 CSS */ body { font-family: "LXGW WenKai Screen", sans-serif; } /* 如果想让文章内容也应用字体 */ #post-content { font-family: "LXGW WenKai Screen", sans-serif; }[/hide]2. 思源黑体特色：现代简洁，可读性强，适合正文显示适用场景：企业网站、新闻博客、技术文档[hide] /* 自定义 CSS */ body { font-family: "Noto Sans SC", sans-serif; } #post-content { font-family: "Noto Sans SC", sans-serif; }[/hide]2. MiSans（小米无线字体）特色：小米设计的现代无衬线字体，简洁清晰，适合各种场景适用场景：现代网站、移动端应用、科技博客[hide] /* 自定义 CSS */ body { font-family: "MiSans", sans-serif; } #post-content { font-family: "MiSans", sans-serif; }[/hide]3. 思源宋体特色：经典宋体，适合长文本阅读，优雅传统适用场景：文学作品、学术论文、传统文化网站[hide] /* 自定义 CSS */ body { font-family: "Source Han Serif", serif; } #post-content { font-family: "Source Han Serif", serif; }[/hide]4. 阿里巴巴普惠体特色：温和友好，商务感强，阿里设计团队出品适用场景：商业网站、产品介绍、企业博客[hide] /* 自定义 CSS */ body { font-family: "Alibaba PuHuiTi", sans-serif; } #post-content { font-family: "Alibaba PuHuiTi", sans-serif; }[/hide]5. 优设标题黑特色：醒目有力，适合标题使用，设计感强适用场景：设计网站、创意博客、标题重点突出[hide] /* 自定义 CSS */ h1, h2, h3, h4, h5, h6 { font-family: "YouSheBiaoTiHei", sans-serif; } /* 如果想要全站应用 */ body { font-family: "YouSheBiaoTiHei", sans-serif; }[/hide]6. 站酷快乐体特色：轻松活泼，充满趣味性，适合轻松主题适用场景：个人博客、娱乐网站、儿童相关内容[hide] /* 自定义 CSS */ body { font-family: "ZCOOL KuaiLe", cursive; } #post-content { font-family: "ZCOOL KuaiLe", cursive; }[/hide]7. 得意黑特色：轻松活泼，带有亲和力，B站官方开源字体适用场景：生活博客、创意网站、年轻群体[hide] /* 自定义 CSS */ body { font-family: "SmileySans", sans-serif; } #post-content { font-family: "SmileySans", sans-serif; }[/hide]8. 悠哉字体特色：圆润可爱，休闲风格，适合长时间阅读适用场景：个人博客、生活分享、轻松主题[hide] /* 自定义 CSS */ body { font-family: "Yozai", sans-serif; } #post-content { font-family: "Yozai", sans-serif; }[/hide]9. 抖音美好体特色：时尚现代，富有活力，字节跳动设计适用场景：时尚博客、创意展示、年轻化网站[hide] /*…

Handsome 主题修改页面整体宽度 - v10.1.0
type: item
date: 2025-07-30T18:14:47+08:00
description: 前言本教程介绍如何为 Typecho Handsome 主题 v10.1.0 定制响应式宽度，使博客在各种屏幕尺寸下都能获得最佳显示效果。CSS 代码将以下 CSS 代码添加到 Typecho 的自定义 CSS 中：@media (min-width: 1200px) { .app.container { width: 90%; } .app.container .app-aside { max-width: 90%; } /* 适用于所有宽屏尺寸的头部宽度修正 (Handsome v10.1.0) */ .app.container .app-header { max-width: 100%; } } @media (min-width: 1700px) { .app.container { width: 85%; } .app.container .app-aside { max-width: 85%; } } @media (min-width: 2048px) { .app.container { width: 80%; max-width: 1800px; } .app.container .app-aside { max-width: 80%; } }如何自定义宽度若要调整页面宽度，只需在上述 CSS 代码中找到对应屏幕尺寸的媒体查询块 (@media ...)，然后修改 .app.container 和 .app.container .app-aside 的百分比。重要规则:.app.container 的 width 和 .app.container .app-aside 的 max-width 的百分比必须保持一致。注意不要修改 .app.container .app-header 的 max-width: 100% ，这是确保头部正确对齐的。示例：将 1700px 以上屏幕的宽度改为 90%/* 修改前 */ @media (min-width: 1700px) { .app.container { width: 85%; } .app.container .app-aside { max-width: 85%; } } /* 修改后 */ @media (min-width: 1700px) { .app.container { width: 90%; /* ← 修改这里 */ } .app.container .app-aside { max-width: 90%; /* ← 修改这里，与上面保持一致 */ } }参考文章 https://www.52txr.cn/2022/cssmargin.html

Typecho handsome 添加评论区OwO表情包 - QQ,抖音,B站等
type: item
date: 2025-07-29T18:46:00+08:00
description: 我对网站的 OwO 表情包进行了一次大规模的扩充，新增和整理了包括 QQ、抖音、哔哩哔哩、微博、贴吧、酷安 等多个平台在内的热门表情。表情总览阿鲁推特B 站抖音酷安QQ微博贴吧滑稽表情包配置详情[collapse status="false" title="QQ"][tabs][tab name="json" active="true"]{ "QQ": { "name": "QQ", "type": "image", "container": [ { "icon": "aini", "text": "爱你" }, { "icon": "aixin", "text": "爱心" }, { "icon": "aoman", "text": "傲慢" }, { "icon": "baiyan", "text": "白眼" }, { "icon": "bangbangtang", "text": "棒棒糖" }, { "icon": "baojin", "text": "抱紧" }, { "icon": "baoquan", "text": "抱拳" }, { "icon": "bishi", "text": "鄙视" }, { "icon": "bizui", "text": "闭嘴" }, { "icon": "cahan", "text": "擦汗" }, { "icon": "daku", "text": "大哭" }, { "icon": "doge", "text": "doge" } // ... 更多QQ表情 ] } }[/tab][tab name="CSS"].emotion-QQ{width: 35px; height: auto;}[/tab][/tabs][/collapse][collapse status="false" title="抖音"][tabs][tab name="json" active="true"]{ "抖音": { "name": "douyin", "type": "image", "container": [ { "icon": "1", "text": "抖音-1" }, { "icon": "2", "text": "抖音-2" }, { "icon": "3", "text": "抖音-3" }, { "icon": "4", "text": "抖音-4" }, { "icon": "5", "text": "抖音-5" }, { "icon": "6", "text": "抖音-6" }, { "icon": "7", "text": "抖音-7" }, { "icon": "8", "text": "抖音-8" }, { "icon": "9", "text": "抖音-9" }, { "icon": "10", "text": "抖音-10" } // ... 更多抖音表情 ] } }[/tab][tab name="CSS"].emotion-douyin{width: 35px; height: auto;}[/tab][/tabs][/collapse][collapse status="false" title="哔哩哔哩"][tabs][tab name="json" active="true"]{ "哔哩哔哩":{ "name": "bilibili", "type": "image", "container":[ { "icon": "baiyan", "text": "白眼" }, { "icon": "bishi", "text": "鄙视" }, { "icon": "bizui", "text": "闭嘴" }, { "icon": "chan", "text": "馋" }, { "icon": "daku", "text": "大哭" }, { "icon": "dalao", "text": "大佬" }, { "icon": "dalian", "text": "打脸" }, { "icon": "dianzan", "text": "点赞" }, { "icon": "doge", "text": "doge" }, { "icon": "facai", "text": "发财" }, { "icon": "fadai", "text": "发呆" }, { "icon": "fanu", "text": "发怒" } // ... 更多B站表情 ] } }[/tab][tab name="CSS"].emotion-bilibili{width: 35px; height: auto;}[/tab][/tabs][/collapse][…

分享60个有趣实用的API及其Typecho博客集成指南
type: item
date: 2025-07-17T16:26:00+08:00
description: 引言突发奇想，搜集了一些公开API，为博客添加一些动态和个性化的元素让网站更加生动有趣。本文介绍60个有趣的API，它们都可以集成到Typecho博客中，让您的博客脱颖而出。目录个人社交账号API热搜榜单API工具类API内容增强类API博客功能增强类API游戏与娱乐类API个人社交账号API1. QQ等级显示通过QQ空间API获取您的QQ等级、成长值等信息，并在博客中展示。<?php // 在sidebar.php或自定义页面中添加 function getQQLevel($qq) { $url = "https://r.qzone.qq.com/fcg-bin/cgi_get_score.fcg?mask=7&uins=".$qq; $data = file_get_contents($url); $data = mb_convert_encoding($data, "UTF-8", "GBK"); preg_match('/lvtext:"(\d+级)"/', $data, $level); return isset($level[1]) ? $level[1] : '获取失败'; } $qq = '你的QQ号'; echo '我的QQ等级: '.getQQLevel($qq); ?>2. QQ音乐状态API展示您正在听的QQ音乐歌曲信息。<?php function getQQMusicStatus($qq) { // QQ音乐状态获取 $url = "https://c.y.qq.com/rsc/fcgi-bin/fcg_get_profile_homepage.fcg?format=json&inCharset=utf-8&outCharset=utf-8&notice=0&platform=yqq&uin=".$qq; $context = stream_context_create([ 'http' => [ 'header' => 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36' ] ]); $data = json_decode(file_get_contents($url, false, $context), true); // 判断是否有正在收听的歌曲 if (isset($data['data']['listen']) && !empty($data['data']['listen']['now'])) { return [ 'status' => true, 'song_name' => $data['data']['listen']['now']['song_name'], 'singer' => $data['data']['listen']['now']['singer'][0]['name'], 'cover' => $data['data']['listen']['now']['cover'] ]; } else { return [ 'status' => false ]; } } $qq = '你的QQ号'; $music = getQQMusicStatus($qq); if ($music['status']) { echo ' '; echo ' 我正在听 '; echo ' '; echo ' '; echo ' '.$music['song_name'].' '; echo ' - '.$music['singer'].' '; echo ' '; echo ' '; echo ' '; } else { echo '暂无音乐播放记录'; } ?>3. 哔哩哔哩UP主数据展示您的B站粉丝数、视频数、播放量等数据。<?php function getBiliStats($uid) { $url = "https://api.bilibili.com/x/relation/stat?vmid=".$uid."&jsonp=jsonp"; $data = json_decode(file_get_contents($url), true); return $data['data']; } $uid = '你的B站UID'; $stats = getBiliStats($uid); echo "粉丝数: ".$stats['follower']; ?>4. 网易云音乐状态展示您最近听的歌曲或者创建一个迷你播放器。<?php // 网易云音乐用户歌单获取 function get…

typecho博客网站头部SEO优化完整指南
type: item
date: 2025-04-20T00:56:00+08:00
description: 1. 我对网站头部SEO的优化实践在对自己的Typecho博客进行SEO优化过程中，我先通过Bing Webmaster Tools进行了网站分析，发现了以下几个问题：Meta Description太长：超过了搜索引擎推荐的160个字符限制多个Meta Description标记：页面中存在2个Meta Description标签图片缺少Alt属性：大部分图片没有添加描述性的Alt文本1.1 解决步骤创建了seo-head.html文件，包含所有SEO相关配置优化Meta Description，控制在25-160个字符之间确保页面中只有一个Meta Description标签修改图片，添加Alt属性2. 网站头部SEO优化科普2.1 Meta标签的重要性Meta标签对搜索引擎优化至关重要，特别是以下几个方面：Meta Description：网页在搜索结果中的描述文本，影响点击率Meta Keywords：虽然大部分搜索引擎不再将其作为排名因素，但仍有参考价值Meta Robots：指导搜索引擎如何索引页面2.2 Open Graph协议Open Graph协议让网页在社交媒体平台（如Facebook）上有更好的展示效果：og:title：分享时显示的标题og:description：分享时显示的描述og:image：分享时显示的图片og:url：页面规范URL2.3 Twitter CardsTwitter Cards类似于Open Graph，专门针对Twitter平台优化：twitter:card：卡片类型twitter:title：卡片标题twitter:description：卡片描述twitter:image：卡片图片2.4 图片SEO优化图片SEO优化的要点：使用描述性的Alt属性：帮助搜索引擎理解图片内容合适的文件名：使用描述性的文件名而非随机字符压缩图片：减小文件大小，提高加载速度响应式图片：适应不同设备的屏幕大小3. 代码解释与作用3.1 基础Meta标签 这些基础Meta标签提供了网站的基本信息，帮助搜索引擎更好地理解网站内容。特别是description标签，应该简洁明了地概括网站内容，控制在25-160个字符之间。3.2 移动端优化 这些标签优化移动设备上的浏览体验，响应式设计是现代SEO的重要组成部分。3.3 资源预加载 资源预加载标签提高网站加载速度，改善用户体验，进而提升搜索排名。3.4 社交媒体优化 这些标签优化在社交媒体上的分享效果，提高内容传播率。3.5 结构化数据 结构化数据帮助搜索引擎理解网站内容，可能获得更丰富的搜索结果展示。4. 通用SEO优化代码模板以下是一个通用的SEO优化代码模板，可根据自己网站需求进行调整：（直接在开发者设置-自定义输出head头部的HTML代码添加全部代码） 5. 注意事项与最佳实践5.1 定期检查与更新使用Google Search Console、Bing Webmaster Tools等工具定期检查网站SEO状况根据搜索引擎算法更新及时调整优化策略使用PageSpeed Insights测试并优化网站性能5.2 图片优化要点为每张图片添加描述性的alt文本alt文本应准确描述图片内容避免使用"图片"、"图像"等无意义的词对于装饰性图片，可以使用空alt属性：alt=""对于信息性图片，alt文本应包含关键信息保持alt文本简洁，通常不超过125个字符5.3 Meta Description最佳实践控制在25-160个字符之间包含关键词但不堆砌关键词准确描述页面内容吸引用户点击每个页面使用唯一的描述避免在页面中出现多个meta description标签使用行动导向语言，如"了解更多"、"立即查看"等5.4 移动优先索引的优化确保网站采用响应式设计测试网站在各种移动设备上的显示效果使用移动友好测试检查移动兼容性优化页面加载速度，特别是在移动网络环境下6. 参考资源Google搜索引擎优化入门指南Bing网站管理员帮助与操作指南Schema.org结构化数据官方文档Open Graph协议官方文档Twitter Cards官方文档Web.dev - SEO基础MOZ - SEO学习中心Typecho官方文档

handsome主题美化及优化：10.1.0最新版 - 2
type: item
date: 2025-04-18T21:30:00+08:00
description: 前言优化 typecho 博客不仅能提升访问速度，还能改善用户体验和网站安全性。本文将介绍一系列实用的优化配置，帮助你打造一个更完善的博客系统。基础设置优化开启全站 HTTPSHTTPS 不仅能确保网站安全，还能提升搜索引擎排名。配置步骤如下：首先在宝塔面板或通过配置文件给网站配置好 SSL 证书，并开启强制 HTTPS进入网站后台，找到设置 -> 基本设置 -> 站点地址，将其改为 https 开头的网址添加 GZIP 压缩GZIP 压缩可以显著减小带宽压力，加快网站加载速度。在 config.inc.php 文件中添加以下配置：/** 开启gzip压缩 */ ob_start('ob_gzhandler');美化永久链接可以去掉 URL 中的 index.php，使链接更加简洁：更改前：https://example.com/index.php/archives/5.html 更改后：https://example.com/archives/5.html配置步骤：进入后台 设置 -> 永久链接，启用地址重写功能配置伪静态规则：如果使用宝塔面板：网站 -> 设置 -> 伪静态 -> 选择 Typecho -> 保存自定义后台路径为了提高网站安全性，建议修改默认的后台路径：将 Typecho 根目录中的 admin 文件夹改名，例如改为 dashboard修改 config.inc.php 文件中的后台路径配置：/* 后台路径(相对路径) */ define('TYPECHO_ADMIN_DIR', '/dashboard/');启用 Emoji 支持要让 Typecho 完美支持 emoji 表情，需要修改数据库编码。执行以下 SQL 语句：alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_options convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_users convert to character set utf8mb4 collate utf8mb4_unicode_ci;然后修改 config.inc.php 中的数据库配置：$db->addServer(array ( 'host' => 'localhost', 'user' => 'root', 'password' => 'root', 'charset' => 'utf8mb4', // 修改这一行 'port' => 3306, 'database' => '' ), Typecho_Db::READ | Typecho_Db::WRITE);功能增强每日新闻自动更新创建一个独立页面，添加以下代码即可显示每日新闻图片： 或者使用备用接口： 文章嵌入外部网页在文章中使用以下代码可以嵌入外部网页： 时光机栏目配置在主题后台的时光机配置 -> RSS动态内容配置中添加以下内容：{ "id": "iciba", "name": "每日一句", "url": "https://proxy.attainment.cn/https://rss.attainment.cn/iciba/7/poster" }, { "id": "bing", "name": "Bing 壁纸", "url": "https://proxy.attainment.cn/https://rss.attainment.cn/bing" }, { "id": "DailyArt", "name": "每日艺术", "url": "https://proxy.attainment.cn/https://rss.…

Typecho handsome主题美化：10.1.0最新版
type: item
date: 2025-04-18T20:32:00+08:00
description: 前言handsome 主题是一款精心设计的 typecho 主题，它在保持功能丰富的同时又不失简洁优雅，我现在已经升级到了10.1.0版本。本文将介绍一些实用的美化技巧，帮助你打造一个独具特色的博客。右侧导航栏打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可/*右侧导航栏*/ .sidebar-icon svg.feather.feather-thumbs-up { color: #ff0000; } .sidebar-icon svg.feather.feather-message-square { color: #495dc3; } .sidebar-icon svg.feather.feather-gift { color: #52de97; }主题标题居中打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可/*主题标题居中*/ header.bg-light.lter.wrapper-md { text-align: center; }页面两侧框架留白间距打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可/*两侧框架留白间距*/ @media (min-width: 1700px) { .app.container { width: 95%; } .app.container .app-aside, .app.container .app-header { max-width: 95%; } } @media (min-width: 2048px) { .app.container { width: 93%; } .app.container .app-aside, .app.container .app-header { max-width: 93%; } } @media (min-width: 1200px) { .app.container { width: 90%; } .app.container .app-aside, .app.container .app-header { max-width: 90%; } .app.container .app-footer-fixed { max-width: 970px; } .app.container.app-aside-folded .app-footer-fixed { max-width: 1110px; } .app.container.app-aside-dock .app-footer-fixed { max-width: 90%; } }handsome 原生入站提示打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义输出body尾部代码即可 评论一键赞、踩、打卡打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可 window.SIMPALED = {}; // 创建全局对象 SIMPALED，用于存放编辑器功能 // 定义一个函数 a，用于在文本框中插入文字 function a(a, b, c) { if (document.selection) { a.focus(); sel = document.selection.createRange(); c ? (sel.text = b + sel.text + c) : (sel.text = b); a.focus(); } else if (a.selectionStart || "0" == a.selectionStart) { var l = a.selectionStart; var m = a.selectionEnd; var n = m; c ? (a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length)) : (a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length)); c ? (n += b.length + c.length) : (n += b.length - m + l); l == m && c && (n -= c.length); a.focus(); a.selectionStart = n; a.selectionEnd = n; } else { a.value += b + c; a.focus(); } } window.SIMPALED.Editor = { daka: functi…