TuJun's Blog - 技术教程
type: channel
link: https://5k5b.com/category/jsjc/
items: Tpyecho Markdown编辑器常用语法指南
items: 为博客加一个自动更新的60S早报
items: 安利一款邮箱评论通知插件CommentToMail
items: Typecho登录界面轻量美化
items: 增加标签云独立页面
items: 让Typecho支持上传Webp格式的图片
items: 本博客之Typecho Handsome主题美化记录

Tpyecho Markdown编辑器常用语法指南
type: item
date: 2022-09-05T14:51:00+08:00
description: Typecho程序自带Markdown编辑器，收集了一些关于Markdown的常用的语法教程，以便后续的查阅使用。常用速览标题：# ## ### #### ##### ###### （依次为一至六级标题）格式：*斜体* **加粗** ***加粗加斜***分隔线：---删除线：~~删除线~~关键字:`文字`如：被强调的文字列表：无序列表：- + 或 *（符号后面要添加一个空格）有序列表使用数字并加上 . 号（点号）来表示区块引用区块引用是在段落开头使用 > 符号 ，然后后面紧跟一个空格符号。代码代码片段：如果是段落上的一个函数或片段的代码可以用反引号把它包起来（`）；代码区块：代码区块使用 4 个空格或者一个制表符（Tab 键）。也可以用 ` 包裹一段代码。链接链接使用方法：[链接名称](链接地址) 或者 <链接地址>转义使用反斜杠转义特殊字符，支持的符号 \ ` * _ { } [ ] ( ) # + - . !各种标签进度条，低百分比进度条，根据情境变化效果，条纹效果，堆叠效果，可用的变体以及警告框外链卡片调用例如在文章中调用其他文章时间线例如在文章中插入一条时间线计划表可自由定制属于自己的计划表标题使用 = 和 - 标记一级和二级标题= 和 - 标记语法格式如下：一级标题 ================= 二级标题 -----------------使用 # 号标记使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题段落与格式段落：Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格加上回车。字体：*斜体文本* _斜体文本_ **粗体文本** __粗体文本__ ***粗斜体文本*** ___粗斜体文本___显示效果：斜体文本 斜体文本粗体文本 粗体文本粗斜体文本 粗斜体文本分隔线：你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：*** * * * ***** - - - ----------显示效果：删除线：如果段落上的文字要添加删除线，只需要在文字的两端加上两个波浪线 ~~ 即可，实例如下：~~文字上有删除线~~显示效果：文字上有删除线关键字：关键字的使用：在文本的两端分别加上英文的 (`) 这个符号。即键盘上Tab键的上面那一个键。注意是英文的情况下。例：`xxx`、`yyy`显示效果：xxx、yyy列表Markdown 支持有序列表和无序列表。无序列表无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记，这些标记后面要添加一个空格，然后再填写内容：* 第一项 * 第二项 + 第一项 + 第二项 - 第一项 - 第二项 显示效果：第一项第二项有序列表有序列表使用数字并加上 . 号（点号）来表示，如：1. 第一项 2. 第二项 3. 第三项显示效果：第一项第二项第三项列表嵌套列表嵌套只需在子列表中的选项前面添加四个空格即可：1. 第一项： - 第一项嵌套的第一个元素 - 第一项嵌套的第二个元素 2. 第二项： - 第二项嵌套的第一个元素 - 第二项嵌套的第二个元素显示效果：第一项：第一项嵌套的第一个元素第一项嵌套的第二个元素第二项：第二项嵌套的第一个元素第二项嵌套的第二个元素区块引用Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一个空格符号：> 区块引用 > 内容文字 > Markdown的区块引用显示效果：区块引用内容文字Markdown的区块引用另外区块是可以嵌套的，一个 > 符号是最外层，两个 > 符号是第一层嵌套，以此类推：> 最外层 > > 第一层嵌套 > > > 第二层嵌套显示效果：最外层第一层嵌套第二层嵌套代码代码片段：如果是段落上的一个函数或片段的代码可以用反引号把它包起来（`），例如：`printf()` 函数显示效果：printf() 函数代码区块：代码区块使用 4 个空格或者一个制表符（Tab 键）。也可以用 ` 包裹一段代码，并指定一种语言（也可以不指定），如：*```javascript //此处显示需要，使用请删除前面的*号 $(document).ready(function () { alert('5k5b.com'); }); *``` //此处显示需要，使用请删除前面的*号显示效果：$(document).ready(function () { alert('5k5b.com'); });链接链接使用方法如下：[链接名称](链接地址) 或者 <链接地址> 比如： 这是我的…

为博客加一个自动更新的60S早报
type: item
date: 2022-09-02T16:14:00+08:00
description: 60S每日早报[scode type="green"]解释一下每日60S早报的原理，通过调用接口输出一张图片，关键就在于接口。下面针对不同用户给出三种教程。[/scode]第一种：小白级别[scode type="blue"]仅输出每日早报图片，接口直接使用某大佬提供的，无自动更新的头图。[/scode]教程[scode type="red" size="small"]新建一篇文章，文章内容放入下方内容，文章标题设为每日60S早报，也可以自由发挥，然后发布即可[/scode]接口2![每日60S](https://api.03c3.cn/zb/)接口1![每日60S](https://api.4rz.cn/zbPhoto.jpg)第二种：基础级别与第一种一样仅输出每日早报图片，接口使用自己创建的，无自动更新的头图。教程[scode type="green" size="small"]前往 ALAPI 注册一个账号并登录。在 个人中心一栏复制Token,新增文章，然后复制下方代码粘贴进去，记得把Token改成你的。[/scode]![60s-for-news](https://v2.alapi.cn/api/zaobao?token=你的Token&format=image)第三种：全面级别[scode type="blue"]在前一教程基础上，建设自动更新文章头图[/scode]教程[scode type="blue" size="small"]复制下方代码，将代码中“你的Token”字样替换，然后网站根目录创建文件命名为60.php，将代码粘贴保存文件。这时候访问你的域名/60.php查看头图。Handsome建议使用该头图并将头图样式设置为图片样式。[/scode]<?php function curl($url, $post = 0, $referer = 0, $cookie = 0, $header = 0, $ua = 0, $nobaody = 0) { $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); $httpheader[] = "Accept:application/json"; $httpheader[] = "Accept-Encoding:gzip,deflate,sdch"; $httpheader[] = "Accept-Language:zh-CN,zh;q=0.8"; $httpheader[] = "Connection:close"; curl_setopt($ch, CURLOPT_HTTPHEADER, $httpheader); if ($post) { curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, $post); } if ($header) { curl_setopt($ch, CURLOPT_HEADER, true); } if ($cookie) { curl_setopt($ch, CURLOPT_COOKIE, $cookie); } if ($referer) { if ($referer == 1) { curl_setopt($ch, CURLOPT_REFERER, 1); } else { curl_setopt($ch, CURLOPT_REFERER, $referer); } } if ($ua) { curl_setopt($ch, CURLOPT_USERAGENT, $ua); } else { curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Linux; U; Android 4.0.4; es-mx; HTC_One_X Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0"); } if ($nobaody) { curl_setopt($ch, CURLOPT_NOBODY, 1); } curl_setopt($ch, CURLOPT_ENCODING, "gzip"); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $ret = curl_exec($ch); curl_close($ch); return $ret; } $a=curl('https://v2.alapi.cn/api/zaobao?token…

安利一款邮箱评论通知插件CommentToMail
type: item
date: 2022-09-02T14:26:00+08:00
description: 前言：之前在Handsome主题美化记录文章中推荐过一款名为CommentNotifier的评论邮件通知插件，这里给大家推荐另一个评论邮箱通知插件。CommentToMail[scode type="green"]样式上十分简洁美观，邮件模板采用气泡对话方式呈现。[/scode]预览[scode type="blue"]第三张预览图为Handsome版插件专属表情解析功能[/scode][album][/album]下载[button color="info" icon="download" url="https://rjw.lanzoul.com/i3cWE0avbq0j" type=""]Handsome专用版[/button]丨[button color="success" icon="download" url="https://rjw.lanzoul.com/ipH3A0avbq2b" type=""]pigeon专用版[/button]丨[button color="primary" icon="download" url="https://rjw.lanzoul.com/i13aG0avbq4d" type=""]其他主题使用[/button]

Typecho登录界面轻量美化
type: item
date: 2022-08-31T16:16: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;}加入canvas动画js代码（可选）。修改后的login.php的内容如下：<?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'; ?>

增加标签云独立页面
type: item
date: 2022-08-28T23:59: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'); ?> 完成后，在后台创建独立页面，自定义模板选择刚刚新建的“标签云”模板，可以不用填入任何内容，直接发布便完成。具体效果可以预览本站：https://www.5k5b.com/tags.html

让Typecho支持上传Webp格式的图片
type: item
date: 2022-08-28T22:53: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格式的图片来看看是否生效吧~

本博客之Typecho Handsome主题美化记录
type: item
date: 2022-08-20T15:25:00+08:00
description: [scode type="blue"]这篇文章作为本站美化的记录，有新增时会实时更新。[/scode][scode type="yellow"]如果您有好玩的效果也欢迎在评论区提出，若可以的话我也会加到文章并实现其效果。[/scode][scode type="green"]更新时间：2022年8月23日12:14:34[/scode]说明该站的所有修改项均在本文列出，实际效果看本站即可。若您也想拥有类似的效果，欢迎借鉴~~注意：以下代码出现/* */ 、 或//字符均为注释，即不会有实际效果，仅仅是给人看的一个标记。在这里不建议删除，因为会影响后期修改时的辨别。悉知~为了给小白讲明白，这里记录的已经很细了。老博主的话，拿着代码按自己意愿改即可，懂得都懂~本站环境Typecho：1.2.0正式版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://www.5k5b.com/index.php/archives/5.html更改后是这样的：https://www.5k5b.com/archives/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支持emoji"]效果🔘🔵🟣🟤⚫🔴🟠🟡…