罗洪斌博客 - Typecho
type: channel
link: https://blog.l54l.com/category/typecho/
description: typecho,教程,插件,美化
items: Typecho增加标签云独立页面
items: 让Typecho支持上传Webp格式的图片
items: Typecho登录界面轻量美化
items: Typecho Handsome主题悬挂猫咪返回顶部插件
items: 本博客之Typecho Handsome主题美化记录

Typecho增加标签云独立页面
type: item
date: 2024-10-06T15:47:00+08:00
description: 演示使用教程感觉在每个页面都把标签云显示出来会有点乱，但标签云的存在又有它自己的作用，于是想着将标签云单独在一个页面中罗列出来。新建一个名为：tags.php文件，填入以下代码后存放在模板目录下：<?php /** * 标签云 * * @package custom */ ?> <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?> <?php $this->need('component/header.php'); ?> <?php $this->need('component/aside.php'); ?> <!-- --> <main class="app-content-body <?php echo Content::returnPageAnimateClass($this); ?>"> <?php echo Content::exportPostPageHeader($this,$this->user->hasLogin(),true); ?> <?php Content::BreadcrumbNavigation($this, $this->options->rootUrl); ?> <?php echo Content::exportHeaderImg($this); ?> <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=280')->to($tags); ?> <?php if($tags->have()): ?> <?php while ($tags->next()): ?> <span class="tt-badge" style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>)"><a href="<?php $tags->permalink();?>" target="_blank"> <?php $tags->name(); ?> <?php endwhile; ?> <?php endif; ?> <?php $this->need('component/sidebar.php'); ?> <?php $this->need('component/footer.php'); ?> 完成后，在后台创建独立页面，自定义模板选择刚刚新建的“标签云”模板，可以不用填入任何内容，直接发布便完成。

让Typecho支持上传Webp格式的图片
type: item
date: 2024-10-06T15:44:00+08:00
description: 前言本篇文章是为了下一篇关于优化博客网站加载速度的文章来做铺垫的因为涉及到图片压缩后的Webp格式，且暂时Typecho貌似还不支持Webp格式的图片，所以有了这篇文章\~注意：如果您没有十足的把握，十分建议您在更改之前现将主程序备份，防止不必要的麻烦！!环境该篇博文针对的程序版本号如下，若您Typecho程序很旧可能不适用Typecho：1.2.0(正式版)方法1.修改Rows.php找到你的网站根目录/var/Widget/Themes/里面的Rows.php文件找到下面这行代码return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg)/i",$path);在jpeg后面添加一个webp，比如下面这样return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg|webp)/i",$path);改完保存退出2.修改contents.php找到你的网站根目录/var/Widget/Base/内的contents.php将557行的这行代码：$value['attachment']->isImage = in_array($content['type'], ['jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp']);在末尾添加webp，比如下面这样$value['attachment']->isImage = in_array($content['type'], ['jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp', 'webp']);改好后保存并退出\~3.修改Common.php还是先找到网站根目录/var/Typecho/里面的common.php在1254行，即bmp相关内容的上方，添加下面这一行代码'bmp' => 'image/x-ms-bmp',改好后保存并退出4.最后一步这一步我们需要先去到网站的后台，找到设置-基本把允许上传类型里的其他格式打勾，并在后面加入webp，如图所示最后上述步骤完成后，现在去写文章并上传一个.webp格式的图片来看看是否生效吧\~本篇文章是为了下一篇关于优化博客网站加载速度的文章来做铺垫的因为涉及到图片压缩后的Webp格式，且暂时Typecho貌似还不支持Webp格式的图片，所以有了这篇文章\~注意：如果您没有十足的把握，十分建议您在更改之前现将主程序备份，防止不必要的麻烦！

Typecho登录界面轻量美化
type: item
date: 2024-10-06T15:35:00+08:00
description: 千篇一律的登录界面难免有点视觉疲劳，简单修改一下Typecho的后台登录界面，开启登录博客愉悦的一刻。修改文件：typecho系统文件\admin\login.php由于登录界面不需要额外的js代码，删除了文件中的下列代码：<?php include 'common-js.php'; ?>增加html代码： 增加CSS样式：.typecho-login-wrap { position: fixed; } .typecho-login {display: block;padding: 10px 20px;margin-top: 20vh;border-radius: 15px;-moz-box-shadow: 0 0 10px #ffffff;box-shadow: 0 0 15px 0px #868686;background: rgb(255 255 255 / 60%);} .i-logo{display: unset;background: unset;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=55);opacity: 0.55;} input{outline: 0;} input:focus {box-shadow: 0 0 0 0.2rem rgb(167 191 232 / 25%);} body {display: flex;align-items: center;justify-content: center;}<?php include 'common.php'; if ($user->hasLogin()) { $response->redirect($options->adminUrl); } $rememberName = htmlspecialchars(Typecho_Cookie::get('__typecho_remember_name')); Typecho_Cookie::delete('__typecho_remember_name'); $bodyClass = 'body-100'; include 'header.php'; ?> TuJun's Blog <form action="<?php $options->loginAction(); ?>" method="post" name="login" role="form"> <?php _e('用户名'); ?> <input type="text" id="name" name="name" value="<?php echo $rememberName; ?>" placeholder="<?php _e('用户名'); ?>" class="text-l w-100" autofocus /> <?php _e('密码'); ?> <input type="password" id="password" name="password" class="text-l w-100" placeholder="<?php _e('密码'); ?>" /> <?php _e('登录'); ?> <input type="hidden" name="referer" value="<?php echo htmlspecialchars($request->get('referer')); ?>" /> <?php _e('下次自动登录'); ?> <a href="<?php $options->siteUrl(); ?>"><?php _e('返回首页'); ?> <?php if($options->allowRegister): ?> • <a href="<?php $options->registerUrl(); ?>"><?php _e('用户注册'); ?> <?php endif; ?> <?php include 'footer.php'; ?> 加入canvas动画js代码（可选）。修改后的login.php的内容如下：

Typecho Handsome主题悬挂猫咪返回顶部插件
type: item
date: 2024-10-06T14:31:00+08:00
description: 悬挂猫咪返回顶部插件具体效果见下图：食用方法重命名文件夹为GoTop上传至usr/plugins目录，登录后台启用即可如果主题模板已加载jquery，可以在插件设置内禁用加载jquery。下载地址

本博客之Typecho Handsome主题美化记录
type: item
date: 2024-10-06T12:16:00+08:00
description: [scode type="blue" size=""]这篇文章作为本站美化的记录，有新增时会实时更新。[/scode][scode type="green" size=""]如果您有好玩的效果也欢迎在评论区提出，若可以的话我也会加到文章并实现其效果。[/scode][scode type="yellow" size=""]更新时间：2024年10月06日[/scode]说明该站的所有修改项均在本文列出，实际效果看本站即可。若您也想拥有类似的效果，欢迎借鉴~~注意：以下代码出现/ / 、或//字符均为注释，即不会有实际效果，仅仅是给人看的一个标记。在这里不建议删除，因为会影响后期修改时的辨别。悉知~为了给小白讲明白，这里记录的已经很细了。老博主的话，拿着代码按自己意愿改即可，懂得都懂~本站环境Typecho：1.2.1正式版HandSome：8.4.1 Pro其他版本的Typecho和HandSome不确定其可行性，请自行测试\~[collapse status="false" title="Handsome主题文件目录结构"]component/comments.php 评论区 component/footer.php 底部版权、音乐播放器之类 component/header.php 页面头，没啥要改的 component/headnav.php 顶部导航 component/say.php 时光机动态 component/sidebar.php 右侧栏目 component/third_party_comments.php 3.3.0新增，第三方评论 css/ 博客CSS，一般不要改 fonts/ 博客字体，一般不要改 img/ 图像，一般不要改 js/ js文件，一般不要改 lang/ 语言文件 libs/Content.php 文章内容 libs/... 一般不要改 usr/ 另一个语言文件？ 404.php 404界面 archive.php 整合 booklist.php 书单 cross.php 时光机 files.php 归档 functions.php 配置界面的东西 guestbook.php 留言板 index.php 首页 links.php 友链 page.php 文章页面整合 post.php 文章输出 color： 选填，不填默认为success（绿色），可选值： light：白色 info：蓝色 dark：深色 success：绿色 black：黑色 warning：黄色 primary：紫色 danger：红色[/collapse]基础设置开启全站HTTPS[collapse status="false" title="开启全站HTTPS"]1、首先在宝塔或通过配置文件给你的网站配置好证书，并开启强制HTTPS2、去网站后台，找到设置 -> 基本设置 -> 站点地址将其改为https开头的网址。[/collapse]添加GZIP压缩[collapse status="false" title="添加GZIP压缩"]这个主要是减小带宽压力，以达到加快网站加速速度的目的。和上面的HTTPS一样，在config.inc.php内加入以下配置即可：/** 开启gzip压缩 */ ob_start('ob_gzhandler');[/collapse]去掉地址栏的index.php[collapse status="false" title="去掉地址栏的index.php"]更改前是这样的：https://blog.l54l.com/index.php/archives/5.html更改后是这样的：https://blog.l54l.com/diary/5.html首先进入后台，找到设置 - 永久链接，改成如下图所示然后我们需要配置伪静态规则如果使用的宝塔面板，就在 网站-设置-伪静态-选择Typecho-保存即可[/collapse]自定义后台路径[collapse status="false" title="自定义后台路径"]1、将Typecho程序根目录中的后台文件夹"admin"改名，名字即为你想自定义的地址名，例如：将"admin"改为"xxx"2、修改根目录文件"config.inc.php"，打开该文件后找到/* 后台路径(相对路径) / define(' **TYPECHO_ADMIN_DIR** ', '/admin/');将代码中"admin"改为你自定义的地址，例如：xxx这样一来，我们的Typecho程序网站的后台就改成：域名/xxx了[/collapse]使Typecho支持emoji[collapse status="false" title="使Typecho支持emoj…