艾霂's Blog - 技术栈 技术栈,艾霂's Blog旗下web网络技术,PHP,JavaScript,等网络技术应用实践分享栏目,专注提供建站经验与自我知识分享。 2024-11-19T20:41:00+08:00 Typecho https://ailmu.cn/feed/atom/technique <![CDATA[Typecho Joe主题 实现手机端菜单栏添加自定义模块]]> https://ailmu.cn/technique/15.html 2024-11-19T20:41:00+08:00 2024-11-19T20:41:00+08:00 艾霂Mr. https://www.ailmu.cn 用过 Joe 主题的都知道,只有电脑端才会有侧边栏模块,而手机端只有中间的文章分类栏目和页面栏目,这导致很多人自定义的侧边栏在手机端无法查看。
很显然这样会让手机端侧边栏空落落的,今天的教程就是为手机端菜单栏添加自定义模块,为手机端侧边栏增添浅浅滴活力!

效果展示

效果

操作步骤

{message type="warning" content="注意:此教程基于Joe主题原版而修改的,因为Joe主题二开的较多,所以添加的位置不一定一样,不过规律都是一样,修改前请备份文件!"/}
准备以下代码:

</ul>
<br/>
</ul>
<ul class="joe_header__slideout-menu panel-box">
这里填入你自己的代码

进入网站根目录 /usr/themes/Joe/public/header.php 文件,将上面代码复制粘贴在下图位置即可(这里我就不添加代码了,你们可以自行添加想展现的代码)
具体位置
具体位置应该在 </div> <div class="joe_header__mask"></div> 上面,进入文件拉到最底部就看见咯!
{callout color="#f0ad4e"}
方法是死的,但是代码是活的,大家根据自己的需求添加在不同的位置, 切记 干什么事一定先备份。
{/callout}

]]>
<![CDATA[Typecho Joe主题 侧边栏添加仿mac操作栏]]> https://ailmu.cn/technique/14.html 2024-11-18T19:51:00+08:00 2024-11-18T19:51:00+08:00 艾霂Mr. https://www.ailmu.cn 本站一直致力追寻对 Typecho 博客系统 Joe 主题的美化,为了不让博客美化过度只是增加了一些实用功能,并对 Joe 主题进行优化修复,赋予它新的生命力。
这不今天 ‌UP主 (艾霂Mr.)又带来了新的力作,很可能大家在别的主题或者其他系统都见过它,虽然不是很实用但是绝对会为您的博客带来眼前一亮的感觉!没错今天为大家带来的就是,给侧边栏添加仿mac操作栏🍵

效果展示

效果展示

Mac样式CSS代码

{callout color="#f0ad4e"}
在Typecho后台 -- 设置外观 -- 全局设置 -- 自定义CSS -- 添加下面的样式
{/callout}

/*侧边栏添加Mac样式*/
.aimac {
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d !important;
    width: 11px;
    height: 11px;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    float: right;
    right: 55px;
    top: 17px;
} 

修改侧边栏模板

侧边栏模板在 Typecho 根目录这个文件: /usr/themes/Joe/public/aside.php
在每个侧边栏标题后面加个 <span> </span> 标签并且设置样式名和你添加的一致,我这里叫 aimac

<span class="aimac"></span>

具体添加位置看下图:(其它侧边栏类似)
添加位置

]]>
<![CDATA[自动更新网站底部 Copyright © 年份,减少网站维护工作量]]> https://ailmu.cn/technique/9.html 2024-11-12T19:31:00+08:00 2024-11-12T19:31:00+08:00 艾霂Mr. https://www.ailmu.cn 我想大多数的站长,基本上每年都是进入 footer.php 修改博客网站底部 Copyright © 年份吧!但往往都是过了好久才想起来,要改下这个可有可无的数值。
那么为了更好的维护好这些网站,降低自己的工作量,今天与大家分享下自动更新的方法。
Copyright ©

版权年份自动更新代码

这里有两种方案,一种是插入 JavaScript ,通过 document.write 的方式插入最新的年份;另一种是 PHP 年份调用。
而由于 Typecho 就是 PHP 程序, 艾霂Mr. 更倾向于后者,毕竟有些人喜欢屏蔽些功能什么的,导致显示错误,而使用 PHP 调用的话就没有这样的问题,即便是 PHP 加速缓存,也可以快速更新。

JavaScript代码

<script>document.write(new Date().getFullYear())</script>

PHP代码

<?php echo date('Y'); ?>

上面其实已经写的非常明白了,为了让小白站长更加简单明白的使用,这里以自己的博客为例,给大家做个例子,小伙伴们可根据自己的需求增加删减内容。

Copyright &copy; 2024 - <?php echo date('Y'); ?> <a href="<?php echo home_url() ?>"><?php echo get_bloginfo('name') ?></a>

{callout color="#f0ad4e"}
&copy;© 符号的代码; <?php echo home_url() ?> 是站点地址,用 <a> 标签进行超链接; <?php echo get_bloginfo('name') ?> 是站点名称。
{/callout}

]]>
<![CDATA[PHP日期时间函数date() 详解]]> https://ailmu.cn/technique/8.html 2024-11-11T18:29:00+08:00 2024-11-11T18:29:00+08:00 艾霂Mr. https://www.ailmu.cn

date() 函数是我们在 php 开发中常碰到并且会使用到的一个日期函数,下面我来给大家介绍 date() 函数的一些基本扮靓和方法,感兴趣的朋友跟随 艾霂Mr. 一起看看吧!

日期时间函数是 PHP 的核心组成部分。无需安装即可使用这些函数。下面来详细说说 date 函数的具体用法。

PHP Date() 函数

PHP Date() 函数可把时间戳格式化为可读性更好的日期和时间。

语法

date(format,timestamp)

参数说明

参数 说明
format 必须规定时间戳的格式。
timestamp 可选,规定时间戳,默认是当前日期和时间。

PHP的日期时间函数date()

$t=time();
echo date("Y-m-d H:i:s",$t);

第一个参数的格式分别表示:
参数格式

1. 年-月-日

echo date('Y-m-j');
2007-02-6
echo date('y-n-j');
07-2-6

大写Y表示年四位数字,而小写y表示年的两位数字;
小写m表示月份的数字(带前导),而小写n则表示不带前导的月份数字。

echo date('Y-M-j');
2007-Feb-6
echo date('Y-m-d');
2007-02-06

大写M表示月份的3个缩写字符,而小写m则表示月份的数字(带前导0);
没有大写的J,只有小写j表示月份的日期,无前导o;若需要月份带前导则使用小写d。

echo date('Y-M-j');
2007-Feb-6
echo date('Y-F-jS');
2007-February-6th

大写M表示月份的3个缩写字符,而大写F表示月份的英文全写。(没有小写f)
大写S表示日期的后缀,比如“st”、“nd”、“rd”和“th”,具体看日期数字为何。
小结:
表示年可以用大写的Y和小写y;
表示月可以用大写F、大写M、小写m和小写n(分别表示字符和数字的两种方式);
表示日可以用小写d和小写j,大写S表示日期的后缀。

2. 时:分:秒

默认情况下, PHP 解释显示的时间为“格林威治标准时间”,与我们本地的时间相差8个小时。

echo date('g:i:s a');
5:56:57 am
echo date('h:i:s A');
05:56:57 AM

小写g表示12小时制,无前导0,而小写h则表示有前导0的12小时制。
当使用12小时制时需要表明上下午,小写a表示小写的“am”和“pm”,大写A表示大写的

“AM”和“PM”。
echo date('G:i:s');
14:02:26

大写G表示24小时制的小时数,但是不带前导的;使用大写的H表示带前导的24小时制小时数
小结:
字母g表示小时不带前导,字母h表示小时带前导;
小写g、h表示12小时制,大写G、H表示24小时制。

3. 闰年、星期、天

echo date('L');
今年是否闰年:0
echo date('l');
今天是:Tuesday
echo date('D');
今天是:Tue

大写L表示判断今年是否闰年,布尔值,为真返回1,否则为0;
小写l表示当天是星期几的英文全写(Tuesday);
而使用大写D表示星期几的3个字符缩写(Tue)。

echo date('w');
今天星期:2
echo date('W');
本周是全年中的第 06 周

小写w表示星期几,数字形式表示
大写W表示一年中的星期数

echo date('t');
本月是 28 天
echo date('z');
今天是今年的第 36 天

小写t表示当前月份又多少天
小写z表示今天是本年中第几天

4. 其他

  1. 大写T表示服务器的时间区域设置
    echo date('T');
    UTC
  2. 大写I表示判断当前是否为夏令时,为真返回1,否则为0
    echo date('I');
  3. 大写U表示从1970年1月1日到现在的总秒数,就是Unix时间纪元的UNIX时间戳。
    echo date('U');
    1170769424
  4. 小写c表示ISO8601日期,日期格式为YYYY-MM-DD,用字母T来间隔日期和时间,时间格式为HH:MM:SS,时区使用格林威治标准时间(GMT)的偏差来表示。
    echo date('c');
    2007-02-06T14:24:43+00:00
  5. 小写r表示RFC822日期。
    echo date('r');
    Tue, 06 Feb 2007 14:25:52 +0000

{callout color="#f0ad4e"}
到此这篇关于 PHP 日期时间函数 date() 详解的文章就介绍到这了,希望大家以后多多支持 艾霂's Blog
{/callout}

]]>
<![CDATA[Typecho Joe主题 搜索关键字回显修复]]> https://ailmu.cn/technique/6.html 2024-11-10T09:06:00+08:00 2024-11-10T09:06:00+08:00 艾霂Mr. https://www.ailmu.cn JoeTypecho 博客中一款开源免费且非常精美的主题,但是这款主题很早就停止维护了,有些功能作者并没有开发,并且在 Typecho 更新到 1.2.1 版本后还出现了一些小问题🤢
Joe 主题的知名度很高,所以在原作者停止维护后,很多大佬都发布过自己的魔改版本,魔改后的主题虽然修复了 BUG 而且新增了很多功能,但是大佬都是基于自己的想法魔改的,我个人觉得有些过于花里胡哨!于是决定自己动手修复一下下,本次主要修复在 Typecho 1.2.1 版本中搜索关键字不回显的问题。
下图既是问题所在!
问题点
据猜测只有在使用 Typecho 1.2.1 以上版本才会出现这个问题,这并不是 BUG 只是主题并没有适配新版,看了一下源码后发现只是简单的取值问题而已,改一串代码基本搞定。
找到主题文件夹所在位置,编辑 /archive.php 文件,大概在25行左右可以看到他取值为 _keywords ,把这个值改为 archiveTitle 即可,这样搜索关键字不回显的问题,就解决咯!
{callout color="#f0ad4e"}
本篇文章算是小小的笔记吧,有用得到的朋友自行取走。
{/callout}

]]>
<![CDATA[Typecho Joe主题 添加评论框背景图]]> https://ailmu.cn/technique/5.html 2024-11-10T07:39:00+08:00 2024-11-10T07:39:00+08:00 艾霂Mr. https://www.ailmu.cn 最近一直在折腾我的博客,本站一直以来用的 WordPress 但感觉有一点臃肿,索性更换为 Typecho 并采用 Joe 主题,因为自己比较追求完美吗🤦‍♂️感觉评论框空荡荡的,今天就为评论框加个背景图!

效果展示

效果展示

食用方法

Joe 主题为例,将下面 css 代码添加到 Joe/assets/css/joe.global.min.css 文件内即可。

css代码

.joe_comment__respond-form .body 就是评论框主题,可以直接在前端按F12查看自己主题的是哪个组!

.joe_comment__respond-form .body{padding:15px;background:url(https://www.iarc.top/usr/uploads/2024/03/1257364055.png);background-position:right;background-repeat:no-repeat;resize:none;}.joe_comment__respond-form .body:hover{background-position-x:4000px;transition:ease-in-out 2s;}

背景图片

背景图片,最好自己保存下来,以防失效。
背景图片
{callout color="#f0ad4e"}
有需要的小伙伴自行取走,方法很简单适用范围很广就看大家的动手能力了。这篇文章就相当于一个记录了,以防不时之需!
{/callout}

]]>
<![CDATA[Typecho 开启 Gzip 压缩加速网站]]> https://ailmu.cn/technique/4.html 2024-11-09T20:04:00+08:00 2024-11-09T20:04:00+08:00 艾霂Mr. https://www.ailmu.cn GZip 压缩,是一种网站速度优化技术,也是一把 SEO 优化利器,许多网站都采用了这种技术,以达到提升网页打开速度、缩短网页打开时间的目的。
Gzip
网站采用 Gzip 压缩,还有一个好处,就是让你少了一份流量超标的担心。因为 Gzip 开启以后会将输出到用户浏览器的数据进行压缩的处理,这样就会减小通过网络传输的数据量,而这个,也正是提升网页打开时间的原因所在。

Gzip开启方法

找到你 Typecho 的网站根目录文件中的 index.php 文件中,并在开头添加如下代码即可。
代码位置

/** 开启gzip压缩 */
ob_start('ob_gzhandler');

{callout color="#f0ad4e"}
非常简单实用的一串代码,这里 艾霂Mr. 也算是做一个笔记了,有需要的可以自己动手试试!
{/callout}

]]>
<![CDATA[Typecho 修改 Gravatar 头像源为国内头像源]]> https://ailmu.cn/technique/3.html 2024-11-09T19:32:00+08:00 2024-11-09T19:32:00+08:00 艾霂Mr. https://www.ailmu.cn Typecho
Typecho 的评论默认使用的是 Gravata 头像,每次页面打开总是卡在 https://gravatar.com 的链接,虽然匹配了 QQ邮箱 调用 QQ头像 的功能,但是对于非 QQ邮箱 用户调用的依然是 Gravatar 头像!
这里 艾霂Mr. 就对头像源地址进行了替换,这里分享一款国内头像源 Cravatar(初认头像) ,我自用的速度确实不错,值得推荐。
Cravatar

修改代码替换Gravatar头像地址

  1. 打开 var/Typecho/Common.php 文件,找到下面的代码,大概在836行左右。
public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false)
{
$url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com';
$url .= '/avatar/';

if (!empty($mail)) {
$url .= md5(strtolower(trim($mail)));
}

$url .= '?s=' . $size;
$url .= '&r=' . $rating;
$url .= '&d=' . $default;

return $url;
}

{message type="success" content="替换为下面代码"/}

public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false)
{
$url = $isSecure ? 'https://cravatar.com' : 'https://cravatar.com';
$url .= '/avatar/';

if (!empty($mail)) {
$url .= md5(strtolower(trim($mail)));
}

$url .= '?s=' . $size;
$url .= '&r=' . $rating;
$url .= '&d=' . $default;

return $url;
}
  1. 另外一个修改方法,具体方式为在 Typecho 根目录文件 config.inc.php
/**
 * 替换Gravatar头像为Cravatar头像
 *
 * Cravatar是Gravatar在中国的完美替代方案,你可以在https://cravatar.com更新你的头像
 */
define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cravatar.com/avatar/');

分享几款Gravatar头像CDN加速源

  1. 极客族 Gravatar CDN加速
    这个就不多说了,大家去它的官网看看,还提供了谷歌字体等CDN加速服务等。
  2. 七牛 Gravatar 头像CDN加速
    HTTP和HTTPS都支持,网址: dn-qiniu-avatar.qbox.me 需要使用的自行替换吧。
  3. 中科大的 Gravatar 头像加速
    中科大的就不说了,免费提供了不少公益国内CDN加速服务,如谷歌字体CDN加速等。网址: https://gravatar.proxy.ustclug.org/ 这个好像只能SSL的,HTTP的提示被重置。

Gravatar头像CDN加速选择及说明

以上三个 Gravatar 头像CDN加速到底选那个了,那个加速效果最好?
这里 艾霂Mr. 试了下,但从速度来讲,七牛的速度最快,其次是极客族,最慢是中科大的(日本机房)。
不过 艾霂Mr. 推荐选择极客族。因为经过 艾霂Mr. 的测试,七牛的很多都显示的默认 Gravatar 头像,而不能是自己在 WordPress 后台或者其他程序中设置的头像类型。

]]>