排行榜 统计
  • 建站日期:2020-12-31
  • 文章总数:96 篇
  • 评论总数:53 条
  • 分类总数:7 个
  • 最后更新:昨天 19:05

typecho折腾记录(持续更新)

本文阅读 20 分钟
本文最后更新于2021年10月14日,已超过6天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

这个帖子是用来记录一些我编辑typecho程序的记录,主题没有我想要的功能就得去想其他办法,看了很多大家的教程,发现大家的文章只是分享一个短小的文章,字数没几个却占用掉一篇文章,当然这样的做法适合那些专门做教程站的。
封面
不过我是个人使用,so...

我要求我的博客每一篇文章字数都得大于一千字,所以我干脆把所有的折腾记录都汇总成一篇文章,教程内容尽量简短干练,单个教程字数少但是多集合一点教程,字数就能达到我的要求了,并且读者一口气看完也比较爽,我自己也方便管理。


目录

  1. typecho伪静态设置
  2. 宝塔开启防盗链
  3. 实现用户阅读文章花了多少时间
  4. 主题使用高亮插件Code Prettify
  5. 文章里新页面打开超链接
  6. 文章内容批量替换及查询
  7. typecho文章cid不连续解决办法
  8. 不用插件在文章里添加音乐
  9. 网站右下角添加联系客服图标
  10. 文章最后更新时间提示
  11. 文章字数统计
  12. HTML文件跳转到新域名
  13. 不需插件给主题添加内置音乐播放器
  14. 解决“Gravatar头像”显示方面的问题
  15. 网易云音乐直链mp3获取

typecho伪静态设置

之前我是在博客后台开启伪静态是成功的,但是后面重置了就不能用了,百度找了下办法这里备份下。
在宝塔网站设置里点击伪静态,复制粘贴以下代码;再到typecho后台找到永久链接,点击进去就可以开启了。
如未在宝塔网站设置里填写伪静态代码,那么typecho是开启不了伪静态(永久链接)的,会出现错误。

    if (!-e $request_filename) {
        rewrite ^(.*\.(css|js))$ $1 break;
        rewrite ^(.*\.(gif|jpg|jpeg|bmp|png|ico|txt|apk|flv|swf|mp4))$ $1 break;
        rewrite ^(.*\.(woff|woff2|ttf))$ $1 break;
        rewrite ^(\/admin/.*)$ $1 break;
        rewrite ^(.*)$ /index.php$1 last;
    }

宝塔开启防盗链

盗链很严重的话可以刷你流量导致你服务器欠费超标,之前看到群里一位老哥,被攻击了,他用的按量计费的图床,损失了万元左右;因为他这一遭,群里好多人都不敢用那些按量了,我这没人看的博客也被吓到了,于是我的博客所有图片都传到了第三方免费图床。

我也在宝塔里开启了防盗链,如下图这样。

有两个设置,我就开启左边那个就行了,你们访问我站内的文档都会出现404,必须是我服务器所访问才行!

如果开启了第二个允许空Referer选项的话。
首先,我们对空Referer的定义为,Referer 头部的内容为空,或者,一个HTTP请求中根本不包含Referer头部。
那么什么时候HTTP请求会不包含Referer字段呢?根据Referer的定义,它的作用是指示一个请求是从哪里链接过来,那么当一个请求并不是由链接触发产生的,那么自然也就不需要指定这个请求的链接来源。
比如,直接在浏览器的地址栏中输入一个资源的URL地址,那么这种请求是不会包含Referer字段的,因为这是一个“凭空产生”的HTTP请求,并不是从一个地方链接过去的。(来源网络)

我的理解就是用电脑直接访问能打开,但是调用到其他博客打开就打不开,应该是这个意思!
而我就不必了,我无非就存点音乐及logo在服务器,音乐用于站内播放。这些音乐都是网易云没有的,我才会传到博客里。不知道网易云音乐云网盘可不可以解析出直链,如果可以的话,也不必传博客了。

所以我在根目录里创建了个“./ptuguai” ptuguai文件夹里的就是以后需要备份的,建议开启,无限流量那就无所谓了。


实现用户阅读文章花了多少时间

非常简单,打开网站后台,找到当前使用的模板点击编辑模板,以下所有关于主题的编辑均可以在这里编辑

如图所示
点击post.php找到合适的位置粘贴以下代码

<!--文章阅读时间s-->
<div id="tingliu">
<span class="tingliu2" ><hr/>您阅读这篇文章共耗时:</span>
<span class="tingliu3" id="stime"></span>
</div>
<script language="JavaScript">var ss = 0, mm = 0, hh = 0; function TimeGo() { ss++; if (ss >= 60) { mm += 1; ss = 0 } if (mm >= 60) { hh += 1; mm = 0 } ss_str = (ss < 10 ? "0" + ss : ss); mm_str = (mm < 10 ? "0" + mm : mm); tMsg = "" + hh + "小时" + mm_str + "分" + ss_str + "秒"; document.getElementById("stime").innerHTML = tMsg; setTimeout("TimeGo()", 1000) } TimeGo();
</script>
<!--文章阅读时间s-->

我的这个博客在文章页面的顶部有个预计本篇文章阅读时间,那么我根据用户习惯会放在文章结尾的位置放上这个已读时间


主题使用高亮插件Code Prettify

本人主题是Spimes,其他主题请查看请官方教程,如Handsome主题使用教程
1、安装并且启用插件,详情查看官方教程Github
2、把主题文件style.css里面自带的高亮样式代码删掉如下

/* hljs行号 */ 

.hljs ol { list-style: decimal; margin: 0 0 0 40px !important; padding: 0 }
.hljs ol li { font-size: 13px; list-style: decimal-leading-zero; border-left: 1px solid #ddd !important; margin: 0 !important; white-space: pre; padding: 0 10px; line-height: inherit; }

.entry-content code { background-color: #fff5f5; color: #ff502c; font-size: .87em; padding: .065em .4em; margin: 0 4px }

.entry-content pre code { background: #000000; color: #fff; margin: 0; padding: .5em; }

.entry-content pre{ position: relative;}  

.bg-primary { content: " "; position: absolute; -webkit-border-radius: 50%;  border-radius: 50%; background: #fc625d!important;  width: 12px; height: 12px; -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; float: right; right: 55px; top: 12px;}

/* hljs代码高亮 */ .hljs-comment, .hljs-quote { color: #8e908c }

.hljs-deletion, .hljs-name, .hljs-regexp, .hljs-selector-class, .hljs-selector-id, .hljs-tag, .hljs-template-variable, .hljs-variable { color: #c82829 }

.hljs-built_in, .hljs-builtin-name, .hljs-link, .hljs-literal, .hljs-meta, .hljs-number, .hljs-params, .hljs-type { color: #f5871f }

.hljs-attribute { color: #eab700 }

.hljs-addition, .hljs-bullet, .hljs-string, .hljs-symbol { color: #718c00 }

.hljs-section, .hljs-title { color: #4271ae }

.hljs-keyword, .hljs-selector-tag { color: #8959a8 }

.hljs { display: block; overflow-x: auto; background: #F1F3F3; color: #4d4d4c; padding: .5em; border-radius: 8px }

.hljs-emphasis { font-style: italic }

.hljs-strong { font-weight: 700 }

3、替换为下面的样式代码:

.entry-content pre code {
    position: relative;
    display: block;
    overflow-x: auto;
    margin: 4.4px 0.px .4px 1px;
    padding: 0;
    max-height: 500px;
    padding-left: 3.5em
}

.entry-content .code-toolbar pre code {
    position: relative;
    display: block;
    overflow-x: auto;
    margin: 4.4px 0.px .4px 1px;
    padding: 0;
    max-height: 500px;
    padding-left: 3.5em
}

.entry-content pre {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    overflow: hidden
}

.bg-primary{ display: none;}

4、使用方法不变

\```php(语言类型选填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\

这里我说一下,因为我们这个主题是Spimes,所以一些css,js代码可以复制到后台样式管理处,这样的好处就是可以直接备份到数据库,下一次更新主题的时候就不需要复制粘贴这么多了,更新主题后我们只需要把原有的冲突代码删掉即可了。

但是对于更改其他主题php代码的话,就值得老老实实再去把新的部分改一遍了。

大家可以像我一样,把自己主题更改过的东西记下来,下次更新主题可以直接参照笔记来修改,这样又快,又不容易出错,也不容易漏掉。


文章里新页面打开超链接

我很反感博客里的引用超链当前页面打开,我每次都得按着ctrl,md又不行所以干脆直接加入这条代码,解决新页面打开超链,这也是防止网站流量外泄。

Markdown本身语法不支持链接在新页面中打开,貌似简书做了处理,是可以的,别的平台可能就不行了,如果想要在新页面中打开的话可以用html语言的a标签代替。

<a href="超链接地址" target="_blank">超链接名</a>

例如:<a href="/27.html" target="_blank">typecho折腾记录</a>


文章内容批量替换及查询

前些天我看了下seo教程,发现新域名用一级域名更容易被百度提权重,所以我就把blog.ptuguai.com换成了ptuguai.com,文章内容包含“blog.”的我就要删除掉,这就得用到数据库批处理了,一番搜索后成功找到两段有用的代码。

我phpmyadmin是4.4的,如不能使用可能是版本问题,我百度的一些代码在这里不能用我就在sql执行那里自己点按钮就成功了,大家也可以去试试,注意得备份好数据。

**替换代码**
update 表的名称 set 此表要替换的字段名=REPLACE(此表要替换的字段名, '原来内容', '新内容');
替换案例:typecho_contents表内text字段中所有的blog.ptuguai.com为ptuguai.com
update typecho_contents set text=REPLACE(text,'blog.ptuguai.com','ptuguai.com');

**查询代码**
查询案例:typecho_contents表下like字段中包含blog.ptuguai.com的结果
SELECT * FROM `typecho_contents` WHERE text like '%blog.ptuguai.com%'

typecho文章cid不连续解决办法

在使用Typecho的过程中,我发现文章编号(cid)经常会出现不连续的情况。
这就导致我的伪静态设置不是{cid}.html,其实域名后缀越短对于seo优化也越有好处,最长不超过两级,我现在就是两级,域名/分类/文章

不连续的原因
图片会占用一个cid,独立页面会占用一个cid,我之前刚创建博客的时候图片不知道咋弄,现在我都是挨个挨个上传到github的,每张图片都进行压缩到100kb左右。我这个主题的三图模式就必须在附近那里上传图片才行,所以我就不得不放弃了这个功能。

修改完成后的一些问题
优点:修改后对于有强迫症的人来说,看着还是不舒服的,在网上找了找,看到有大佬给出了解决办法。
缺点:我本来想改过来,但是我文章已经有好几十篇了,我改了一两个小时才改回来一半,而且文章内的锚文本超链接也得重新改,除此之外标题描述等主题设置都要重新改,这些地方都乱了,只有文章内容是和以前一样,还要挨个查重,很麻烦我就没去管它了,不过这个方法是可行的,大家不妨一试。。

嫌弃麻烦,还是想解决?
新建一篇文章,内容随便填只要发布成功即可,然后有了一篇文章后再去改数据库的cid,填补之前的空位,现在我按照这个方法也填了几篇了。
因为我之前改过一次cid,导致排序直接从100多开始了,我现在如果要全部改过来得更新个几百篇文章才能彻底解决啦。cid乱倒是无所谓,主要是它是空位。
其实我大可不必煞费苦心,因为我每一页的文章都是用的自定义命名,cid只是后台才能看见。
方法说在这里了,大家可以试试。

如果你准备创建个typecho的博客,想用cid.html为后缀的话建议前期就这样采用下,并且后面不要在文章编辑页面上传图片。如果不小心上传了可以在数据库进行更改删除。

<?php
$hostname_blog = "localhost";
$database_blog = "数据库名";
$username_blog = "数据库用户名";
$password_blog = "数据库密码";
$blog = mysql_pconnect($hostname_blog, 
$username_blog, $password_blog) or trigger_error(mysql_error(),E_USER_ERROR);  
$no = 1;    
function change_id($cid)
{
global $no;     
// 修改post cid,并修改分类、标签、自定义字段、评论的对应关系
$sql = 'update typecho_contents set cid = ' . $no . ' where cid = ' . $cid;
mysql_query($sql);
$sql = 'update typecho_relationships set cid = ' . $no . ' where cid = ' . $cid;
mysql_query($sql);
$sql = 'update typecho_comments set cid = ' . $no . ' where cid = ' . $cid;
mysql_query($sql);    
$no = $no + 1;
}    
mysql_select_db($database_blog, $blog);
$query_postRecord = "SELECT cid FROM typecho_contents ORDER BY cid ASC";
$all_postRecord = mysql_query($query_postRecord);
$row_postRecord = mysql_fetch_assoc($all_postRecord);    
do {
change_id( $row_postRecord['cid'] );    
} while ($row_postRecord = mysql_fetch_assoc($all_postRecord));    
// 重新设置post id自增起点
mysql_query('alter table typecho_contents AUTO_INCREMENT = ' . $no);
    echo 'ok';
    ?>

将以上代码保存为PHP文件并上传至网站根目录,在地址栏访问一下即可。

注意:
1.本操作涉及数据库,请提前做好备份工作。
2.文章cid重新排列后,上传的附件所属文章可能会出错,需手动修改。

我这里吐槽下上述方法,弄起来不太顺,又得查询那些漏项,漏cid的。
所以我干脆直接重新把博客放到新的域名下,然后挨个挨个复制粘贴到另一个域名下,把两个网站弄得一模一样了,再去把老网站重置,再导入新弄好的数据。
很费时间的,我弄了几个小时才弄好,我的文章大概是40篇左右,大家可以自行斟酌。


不用插件在文章里添加音乐

今天查看别人的博客,发现也是typecho,于是我就F12看了看它的代码,复制过来,发现竟然可以用。哈哈哈!东逛西逛也能学着点东西,看到好东西就偷来用!

!!!
<audio id="audio" loop="loop" controls="controls" preload="none"> <source id="mp3" src="/ptuguai/music/mymusic.mp3"> </audio>
!!!
"/ptuguai/music/mymusic.mp3"的意思就是播放在根目录下的/ptuguai/music文件夹下的mymusic.mp3
像上图这样,很简单用html代码,但是typecho需要借助!!!来引用。
其中的“loop”是控制能否循环播放的!大家可自行开关!

<audio>标签的其他使用方法:链接直达


网站右下角添加联系客服图标

这个我添加试了试,电脑端看着不错,但是我既然添加了右上角站长简介就不需要右下角了,而且右下角这个在手机上会显示出来不知道怎么关闭手机上的,手机上容易误触所以我给取消了,留个记录!

网站首页右上角添加作者简介教程如下:

我移植的第一个博客模块(首页右上角简介)

看视频的时候建议播放速度调到1.5+,讲的太墨迹啦。。 原本的样子和更改后的样子 [photos] ![](https://cdn.jsdelivr.net/gh/qq2246367036/p....

即和本站首页右边一样,有个BUG,黑夜模式下不会变色,这个我不会改;估计是原站不支持吧。
注意:右下角联系客服是全站所有页面,右上角作者简介是PC端网站首页,即手机不显示其他页面不显示。
第1步:在主题根目录的index.php的最后添加

<div class="livechat-girl animated"> <img class="girl" src="./ptuguai/tx.png">
  <div class="livechat-hint rd-notice-tooltip rd-notice-type-success rd-notice-position-left single-line show_hint">
    <div class="rd-notice-content">嘿,我来帮您!</div>
  </div>
  <div class="animated-circles">
    <div class="circle c-1"></div>
    <div class="circle c-2"></div>
    <div class="circle c-3"></div>
  </div>
</div>

第2步:添加CSS

/* 右下角客服+JS */
@keyframes scaleToggleOne { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
50% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes scaleToggleTwo { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
20% {
transform:scale(1);
-webkit-transform:scale(1)
}
60% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes scaleToggleThree { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
33% {
transform:scale(1);
-webkit-transform:scale(1)
}
66% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
.animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.livechat-girl { width: 60px; height: 60px; border-radius: 50%; position: fixed; bottom: 5px; right: 40px; opacity: 0; -webkit-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); z-index: 700; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); cursor: pointer; -webkit-transition: all 1s cubic-bezier(.86, 0, .07, 1); transition: all 1s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl:focus { outline: 0 }
.livechat-girl.animated { opacity: 1; transform: translateY(-40px); -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px) }
.livechat-girl:after { content: ''; width: 12px; height: 12px; border-radius: 50%; background-image: linear-gradient(to bottom, #26c7fc, #26c7fc); position: absolute; right: 1px; top: 1px; z-index: 50 }
.livechat-girl .girl { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 50;border-radius: 50%; }
.livechat-girl .animated-circles .circle { background: rgba(38,199,252,.25); width: 60px; height: 60px; border-radius: 50%; position: absolute; z-index: 49; transform: scale(1); -webkit-transform: scale(1) }
.livechat-girl .animated-circles.animated .c-1 { animation: 2s scaleToggleOne cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-2 { animation: 2.5s scaleToggleTwo cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-3 { animation: 3s scaleToggleThree cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl .livechat-hint { position: absolute; right: 40px; top: 50%; margin-top: -20px; opacity: 0; z-index: 0; -webkit-transition: all .3s cubic-bezier(.86, 0, .07, 1); transition: all .3s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl .livechat-hint.show_hint { -webkit-transform: translateX(-40px); transform: translateX(-40px); opacity: 1 }
.livechat-girl .livechat-hint.hide_hint { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0) }
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1296px!important }
.livechat-girl .livechat-hint.rd-notice-tooltip .rd-notice-content { width: auto; overflow: hidden; text-overflow: ellipsis }
@media only screen and (max-width:1599px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1060px!important }
}
@media only screen and (max-width:1309px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 984px!important }
}
@media only screen and (max-width:1124px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 600px!important }
}
.rd-notice-tooltip { -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); box-shadow: 0 2px 2px rgba(0,0,0,.2); font-size: 14px; border-radius: 3px; line-height: 1.25; position: absolute; z-index: 65; max-width: 350px; opacity: 1 }
.rd-notice-tooltip:after { position: absolute; display: block; content: ''; height: 20px; width: 20px; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 50 }
.rd-notice-tooltip .rd-notice-content { background: 0; border-radius: 3px; width: 100%; color: #fff; position: relative; z-index: 60; padding: 20px; font-weight: 400; line-height: 1.45 }
.rd-notice-type-success { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-type-success .rd-notice-content { background-color: #26c7fc }
.rd-notice-type-success:after { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-position-left { margin-left: -20px }
.rd-notice-position-left:after { right: -6px; top: 50%; margin-top: -10px }
.rd-notice-tooltip.single-line .rd-notice-content { height: 40px; padding: 0 20px; line-height: 40px; white-space: nowrap }

第3步:添加JS 修改联系方式及文字在js最后面,拉到最下

<script>
jQuery( function ( $ ) {  
    var isMobile = {
    Android : function() {
      return navigator.userAgent.match(/Android/i) ? true : false;
    },
    BlackBerry : function() {
      return navigator.userAgent.match(/BlackBerry/i) ? true : false;
    },
    iOS : function() {
      return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    },
    Windows : function() {
      return navigator.userAgent.match(/IEMobile/i) ? true : false;
    },
    any : function() {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
    }
  };
  
    setInterval(function(){
        if($(".animated-circles").hasClass("animated")){
            $(".animated-circles").removeClass("animated");
        }else{
            $(".animated-circles").addClass('animated');
        }
    },3000);
    var wait = setInterval(function(){
        $(".livechat-hint").removeClass("show_hint").addClass("hide_hint");
        clearInterval(wait);
    },4500);
    $(".livechat-girl").hover(function(){
        clearInterval(wait);
        $(".livechat-hint").removeClass("hide_hint").addClass("show_hint");
    },function(){
        $(".livechat-hint").removeClass("show_hint").addClass("hide_hint");
    }).click(function(){    
        if(isMobile.any()){
             window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin=2246367063&version=1&src_type=web&web_src=oicqzone.com';
        }else{
             window.open("http://wpa.qq.com/msgrd?v=3&uin=2246367063&site=qq&menu=yes");
          }
    }); 
} );
</script>

文章最后更新时间提示

文章发布时间过长,导致文章里的内容与当时描写的不符,或者一些链接图片失效了,这个时候读者可以通过这种方式联系到我们,我们就可以重新更新下这篇文章。更改后的如下图所示。

第一步:找到当前主题下的post.php,填入以下php代码到合适的位置

<div class="j-alt warning">
本文最后更新于<?php echo date('Y年m月d日' , $this->modified);?>,已超过<?php echo floor((time()-($this->modified))/86400);?>天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!
</div>    

第二步:添加css,一般主题下有个style.css 在最后面添加上即可
注意:下面有个URL:(一长串base64代码)这个是那个感叹号图标,可以自行更换,原本这里是没有的我F12看了原帖的代码复制进去就有了,没有什么地址,你也可以用浏览器访问括号里的内容获取到svg图标上传到自己服务器以免失效!

/** 文章编辑时间 **/
.j-alt {
    width: 100%;
    padding: 8px 15px 8px 35px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: opacity 0.2s;
    font-size: 13px;
    margin: 20px 0;
}
.j-alt.warning {
    background-color: #fdf6ec;
    color: #e6a23c;
}
.j-alt::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 20px;
    height: 18px;
    vertical-align: top;
}
.j-alt.warning::before {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjA1NzQ5NTM3NTM2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwNjciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA3OC43NjkyMzFDMjczLjcyMzA3NyA3OC43NjkyMzEgNzguNzY5MjMxIDI3My43MjMwNzcgNzguNzY5MjMxIDUxMnMxOTQuOTUzODQ2IDQzMy4yMzA3NjkgNDMzLjIzMDc2OSA0MzMuMjMwNzY5IDQzMy4yMzA3NjktMTk0Ljk1Mzg0NiA0MzMuMjMwNzY5LTQzMy4yMzA3NjlTNzUwLjI3NjkyMyA3OC43NjkyMzEgNTEyIDc4Ljc2OTIzMXogbTYxLjU5NzUzOCAyMDIuNDc2MzA3bC0xMy44NjMzODQgMzA2LjgwNjE1NGMwIDE4Ljc4NjQ2Mi0xNi42MjAzMDggMzIuMjU2LTM1Ljk5NzUzOSAzMi4yNTZoLTguMjcwNzY5Yy0xOS40MTY2MTUgMC0zMy4yOC0xMy40Njk1MzgtMzYuMDM2OTIzLTMyLjI5NTM4NGwtMTMuODYzMzg1LTMwNi43NjY3N2MwLTE4LjgyNTg0NiAxMy44NjMzODUtMzIuMjk1Mzg1IDMwLjQ4MzY5My0zMi4yOTUzODRoNDQuMzA3NjkyYzE5LjM3NzIzMSAwIDM1Ljk5NzUzOCAxMy40Njk1MzggMzMuMjQwNjE1IDMyLjI5NTM4NHogbS0xOC4xOTU2OTIgNDc3LjUzODQ2MmE1MS41NTQ0NjIgNTEuNTU0NDYyIDAgMCAxLTM2Ljk4MjE1NCAxNi4yNjU4NDZjLTE1Ljg3MiAwLTI2LjQyNzA3Ny01LjQzNTA3Ny0zNi45ODIxNTQtMTYuMjY1ODQ2LTEwLjU5NDQ2Mi0xMC44MzA3NjktMTUuODcyLTIxLjY2MTUzOC0xNS44NzItMzcuODg4IDAtMTYuMjY1ODQ2IDUuMjc3NTM4LTI3LjA5NjYxNSAxNS44NzItMzcuOTI3Mzg1IDEwLjU1NTA3Ny0xMC44MzA3NjkgMjEuMTEwMTU0LTE2LjIyNjQ2MiAzNi45ODIxNTQtMTYuMjI2NDYxIDE1LjgzMjYxNSAwIDI5LjA2NTg0NiA1LjM5NTY5MiAzOS42MjA5MjMgMTYuMjI2NDYxIDEwLjU1NTA3NyAxMC44MzA3NjkgMTUuODMyNjE1IDIxLjY2MTUzOCAxNS44MzI2MTYgMzcuOTI3Mzg1LTIuNTk5Mzg1IDE2LjIyNjQ2Mi03Ljg3NjkyMyAyOS43NzQ3NjktMTguNDcxMzg1IDM3Ljg4OHoiIGZpbGw9IiNGRjhGMDAiIHAtaWQ9IjYwNjgiPjwvcGF0aD48L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: center center;
}

文章字数统计

以下代码仅仅统计文章中的中文字数。
步骤一:在当前使用的主题的根目录的functions.php的最后插入如下代码

function  art_count ($cid){
    $db=Typecho_Db::get ();
    $rs=$db->fetchRow ($db->select ('table.contents.text')->from ('table.contents')->where ('table.contents.cid=?',$cid)->order ('table.contents.cid',Typecho_Db::SORT_ASC)->limit (1));
    $text = preg_replace("/[^\x{4e00}-\x{9fa5}]/u", "", $rs['text']);
    echo mb_strlen($text,'UTF-8');
}

步骤二:再到主题根目录下的post.php合适的位置调用以下代码,调用的时候注意参考原有的方式。

<?php art_count($this->cid); ?>

HTML文件跳转到新域名

创建文件后缀名为html的文件,我是用来index跳转的,有的网站不支持php301,我就这样弄了,百度来的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=" http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-CN">
<meta HTTP-EQUIV="Content-Type"CONTENT="text/html; charset=gb2312"><meta http-equiv="refresh"content="0.1;url= http://aiqi.ng">

</head>

<body>

</body>

</html>

不需插件给主题添加内置音乐播放器

我博客是安装了aplayer for Meting音乐播放器插件的,奈何与主题不兼容,不能播放QQ音乐和网易云音乐歌单。
今天(2021年7月2日)在朋友@ii.do那里看到了这个,内置播放器方法,我就添加到我博客里了。
操作步骤很简单,使用也很方便,支持QQ音乐,网易云音乐,虾米音乐。单曲与歌单都支持。

首先第一步在主题目录下的,head.php文件最后添加以下代码,保存关闭。
这里我尝试添加到主题自带的JS,CSS后台里,发现不行,必须添加到head文件里面才行。

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js"></script>

第二步,直接在文章里面插入以下代码即可

!!!
<meting-js auto="此处填写音乐单曲链接或音乐歌单链接(包含https://)"></meting-js>
!!!

我这边常用的QQ音乐和网易云音乐,所以下面我就给两个成品。
这里注意QQ音乐链接的格式,必须是.html结束的。
还有有的音乐是需要付费的,或需要客户端打开播放的在这里都不能播放,如果是歌单里的话它会自动跳转到下一首播放。
QQ音乐单曲

例如:
!!!
<meting-js auto="https://y.qq.com/n/yqq/song/003qwTsi05ph8l.html"></meting-js>
!!!

QQ音乐歌单

例如:
!!!
<meting-js auto="https://y.qq.com/n/yqq/playlist/7910672373.html"></meting-js>
!!!

网易云音乐单曲

例如:
!!!
<meting-js auto="https://music.163.com/#/song?id=405654992"></meting-js>
!!!

网易云音乐歌单

例如:
!!!
<meting-js auto="https://music.163.com/#/my/m/music/playlist?id=705352811"></meting-js>
!!!

演示仅为个人常用,更多详细参数请看官方文档:
【aplayer官方文档】
【Meting官方文档】


记录下我常用的优秀网站

这篇文章用来记录备份我常用到的优秀的站点,顺带着就分享了。 下面的部分网站需要科学sw,因本人24h科学sw所以我也不知道那些要科学sw,大家看到打不开的....

解决“Gravatar头像”显示方面的问题

极客族CDN SSL https://sdn.geekzu.org/
七牛Gravatar //dn-qiniu-avatar.qbox.me/
loli.net SSL https://gravatar.loli.net/avatar/
V2EX SSL https://cdn.v2ex.com/gravatar/
多说CDN http://gravatar.duoshuo.com/avatar/
MoeNet公共库 https://gravatar.moefont.com/avatar/
幻杀博客 http://gravatar.ihuan.me/avatar/
城南旧事 https://gravatar.loli.top/avatar

把如上的一些域名替换掉var/Typecho/Common.php中的第939行的域名即可。


网易云音乐直链mp3获取

https://music.163.com/song/media/outer/url?id=网易云音乐歌曲的ID数字.mp3
如https://music.163.com/song/media/outer/url?id=212412.mp3

结合上面的教程【不用插件在文章里添加音乐】可以自行添加播放。
示例:陈慧娴-《月光》


您阅读这篇文章共耗时:
原创文章,作者:AKERS,如若转载,请注明出处:https://ptuguai.com/27.html
记录下我所拥有的永久VIP会员
« 上一篇 02-11
玩游戏真的害人吗?
下一篇 » 02-23

发表评论

本站已加入互联网信息服务许可,请规范您的言行!

成为第一个评论的人