搜索到
91
篇与
的结果
-
Joe主题-壁纸代码改造 前言Joe主题有写好的壁纸模版，直接启用即可。刚开始博主感觉分类太多了，有些分类也不是自己喜欢的。就没有启用，最近有时间研究了一下代码。改造了一下，只留下自己感兴趣的分类。核心代码主要是core/route.php文件内的两个函数，调用了360的壁纸接口，原版如下/* 获取壁纸分类 已测试 √ */ function _getWallpaperType($self) { $self->response->setStatus(200); $json = _curl("http://cdn.apc.360.cn/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome"); $res = json_decode($json, TRUE); if ($res['errno'] == 0) { $self->response->throwJson([ "code" => 1, "data" => $res['data'] ]); } else { $self->response->throwJson([ "code" => 0, "data" => null ]); } } /* 获取壁纸列表 已测试 √ */ function _getWallpaperList($self) { $self->response->setStatus(200); $cid = $self->request->cid; $start = $self->request->start; $count = $self->request->count; $json = _curl("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid={$cid}&start={$start}&count={$count}&from=360chrome"); $res = json_decode($json, TRUE); if ($res['errno'] == 0) { $self->response->throwJson([ "code" => 1, "data" => $res['data'], "total" => $res['total'] ]); } else { $self->response->throwJson([ "code" => 0, "data" => null ]); } }优化主要优化 _getWallpaperType 函数，去掉不想要的分类/* 获取壁纸分类 已测试 √ */ function _getWallpaperType($self) { $self->response->setStatus(200); $json = _curl("http://cdn.apc.360.cn/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome"); $res = json_decode($json, TRUE); //$file=dirname(__FILE__).'/debug.log'; //保留喜欢的分类 $ilike = ['6', '12', '13', '22']; $re_arr = array(); foreach ($res['data'] as $key => $value) { if (in_array($value['id'], $ilike, true)){ //file_put_contents($file, $value['name']."\n",FILE_APPEND); array_push($re_arr, $value); } } if ($res['errno'] == 0) { $self->response->throwJson([ "code" => 1, "data" => $re_arr ]); } else { $self->response->throwJson([ "code" => 0, "data" => null ]); } }效果首页美女发现是固定的，又懒得翻页。加了个随机，每次刷新都是不同的。/* 获取壁纸列表 已测试 √ */ function _getWallpaperList($self) { $self->response->setStatus(200); $cid = $self->request->cid; //前50页随机显示图片 if (($cid == 6)&&($self->request->start < 2400)) { $start = $self->request->start + rand(1,4800); }else { $start = $self->request->start; } $count = $self->request->count; //$file=dirname(__FILE__).'/debug.log'; //file_put_contents($file, $cid."|".$start."|".$count."\n",FILE_APPEND); $json = _curl("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid={$cid}&start={$start}&count={$count}&from=360chrome"); $res = json_decode($json, TRUE); if ($res['errno'] == 0) { $self->response->throwJson([ "code" => 1, "data" => $res['data'], "total" => $res['total'] ]); } else { $self->response->throwJson([ "code" => 0, "data" => null ]); } } -
Typecho 1.2.0 提示版本更新Bug解决方法 Typecho以一向高雅的动作宣布了自己的回归: “这不是玩笑，我们回来了”Typecho 1.2.0 我也按照更新的方法将我的typecho更新到了1.2.0版，但是在后台却还是看到提示升级，当前版本1.2.0，最新版本1.2.0的字样。可以确定这是typecho的一个Bug，官方也给出了修复的办法，在代码的判断中修改一处就可以解决了。if ( isset($json['release']) && preg_match("/^[0-9\.]+$/", $json['release']) && version_compare($json['release'], $version, '>=') && version_compare($json['release'], $version, '>') )在 var/Widget/Ajax.php 这个文件中，将 >= 改为 > 即可。
-
在文章中添加地图 有些文章需要使用到地图，比如题主博客中的“有声”分类下的文章，例如 http://www.lopwon.com/1925.html可以通过以下介绍的方法，添加！一、在主题适当位置（比如footer.php末端）添加以下百度地图开放平台提供的服务代码。其中，把“我的秘钥”四个字替换为自己的百度地图API秘钥（AK），申请如下：1. 访问百度地图开放平台 https://lbsyun.baidu.com/ 注册后登陆“控制台”。2. 应用管理》我的应用》创建应用，需要实名认证！3. 除“应用类型”选择“浏览器端”外，其他可以默认。4. 完成创建后，会生成一串API秘钥（AK）。代码： <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=我的秘钥"></script> <script> var map = new BMapGL.Map('map'); //创建地图，map对应div中的ID，可自定义，必选 map.centerAndZoom(new BMapGL.Point(<?php $this->fields->location(); ?>), 13); //设置地图中心坐标location和缩放级别13，必选 var marker = new BMapGL.Marker(new BMapGL.Point(<?php $this->fields->location(); ?>)); //创建标记坐标location，必选 map.addOverlay(marker); //添加标记点，必选 map.enableScrollWheelZoom(true); //添加鼠标滚轮缩放控件，可选 map.addControl(new BMapGL.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})); //添加放大缩小控件，可选 map.addControl(new BMapGL.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]})); //添加地图类型，可选 </script>二、如果不想把以上JS在全局使用，可以使用以下代码包裹，只在需要时加载：代码： <?php if (($this->fields->location !== null) && ($this->is('post'))): //文章页post有自定义字段location的坐标值时加载以下JS ?> 这里是百度地图服务代码 <?php endif; ?>三、在编辑文章时，把以下代码添加到文中适当位置，当然也可以自定义CSS。如果不想每次都添加，可以直接放入主题post.php的适当位置（比如文末content）代码： <div id="map" style="width:720px;height:240px"></div>四、在编辑文章时，新增自定义字段location（也可以自定义字段名，注意要统一替换以上JS中所有的location）。之后，字段值填入地点坐标，可以访问拾取坐标系统 http://api.map.baidu.com/lbsapi/getpoint/index.html 获取坐标。格式为（经度,纬度），例116.403963,39.915119五、如果觉得操作麻烦，有款现成的Typecho“我的足迹”独立页模板可以选用，功能不同是把文章直接添加到地图中，详见 http://www.lopwon.com/lopwon-footprint.html1. 访问拾取坐标系统（http://api.map.baidu.com/lbsapi/getpoint/index.html）获取坐标。2. 在需要标记文章的自定义字段里新增字段，其中，字段名称必须填入 here，乱填无效！字段值填入之前获取的坐标。格式为（经度,纬度），例116.403963,39.915119
-
typecho插件 Lopwon Here 文章内地图，可显示自定义坐标的地图 版本型号：Lopwon Footprint适用程序：Typecho皮肤类型：插件主题作者：Lopwon作者博客：Lopwon.com发布页面：Lopwon.com/lopwon-here.html官方演示：Lopwon Here 我要下载：Free Download效果图： 本站备份下载：[attach]1319[/attach]模板说明插件 Lopwon Here 的作用是：让你的 Typecho 博客显示文章内地图，可指定地图坐标，可指定显示位置。可以把你要标记的地点用地图的方式呈现出来。目前发现瑕疵：Lopwon Here 可能会与其他使用相同接口的插件有冲突，表现为：重复加载文章内容。注意：此插件免费分发，请勿商用，且不对你在使用中产生的任何问题造成的不良后果，承担责任。 插件更新2022年09月06日 发布正式版 Lopwon Here使用方法A 部署文件1\. 将压缩包里的文件夹 LopwonHere 及其内部的所有文件，上传至目录 usr/plugins 中。 2\. 后台》控制台》插件，找到 Lopwon Here 并启用。 B 申请秘钥Lopwon Here 的使用，需要先申请百度地图开放平台提供的免费API秘钥（AK）。1\. 访问百度地图开放平台（https://lbsyun.baidu.com/）注册后登陆“控制台”。 2\. 应用管理》我的应用》创建应用，需要实名认证！ 3\. 除“应用类型”选择“浏览器端”外，其他可以默认。 4\. 完成创建后，会生成一串API秘钥（AK）。 C 配置插件后台》控制台》插件，找到 Lopwon Here 并设置，填入之前获取的API秘钥（AK），其他选项依喜好配置。D 插入地图后台》管理》文章，打开或新建你需要呈现地图的文章，除以下提到的事项外，其余正常操作即可。1\. 此编辑页面左侧的“内容文本框”中，在合适位置插入带有半角括号的 here 即 (here) 2\. 此编辑页面下方的“自定义字段”里，请新增字段。见下（E 添加坐标）。 E 添加坐标1\. 访问拾取坐标系统（http://api.map.baidu.com/lbsapi/getpoint/index.html）获取坐标。 2\. 在需要标记文章的自定义字段里新增字段，其中，字段名称必须填入 here，乱填无效！字段值填入之前获取的坐标。格式为（经度,纬度），例116.403963,39.915119
-
Typecho 使用 fslightbox 给图片添加暗箱效果 以前我是很喜欢使用FancyBox来提供暗箱效果的，但是FancyBox是纯收费插件。fslightbox同样是收费插件，但是免费部分我们已经够用了。效果fslightbox_demo.png教程下面开始教程~引用 fslightbox[attach]1317[/attach]把下面内容添加到header.php中的</head>前面 <script src="fslightbox.min.js"></script> 修改post.php打开post.php 将 <?php $this->content(); ?> 修改成<?php $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i'; $replacement = '<a href="$1" data-fslightbox="gallery"><img src="$1" alt="'.$this->title.'" title="点击放大图片" /></a>'; $content = preg_replace($pattern, $replacement, $this->content); echo $content; ?>pjax/ajax 只需要在重载的时候添加一行代码 refreshFsLightbox(); 完美解决问题。最后对，就是这么简单
-
显示 Typecho 评论 IP 定位插件 最近各大国内平台都开放了显示用户 IP 定位的功能，我也紧跟时事，造了一个获取评论 IP 定位信息的插件。用的是 ipip.net 的免费 API。使用方法很简单，修改主题相关位置，加入下面这一句<?php $comments->location(); ?>更新日志2022.10.04 ipip.net 免费 API 失效，更换为太平洋的API2022.05.01 修复第一个位置会多出 lines (409 sloc) 17.4 KB，增加禁用插件清理数据的功能下载{cloud title="" type="default" url="https://xiamp.net/attachment/CommentLocation-1-0-1-20220501-zip" password=""/}本站备份下载：[attach]1336[/attach]之前版本[attach]1315[/attach]
-
MdPhoto一款Typecho的相册主题 主题介绍MdPhoto for Typecho是由泽泽编写的 Typecho 图册主题，主题后端基于 Typecho编写，前端基于MDUI框架，以及fancybox，masonry，infinite-ajax-scroll，jr-qrcode等第3方库。主题详细介绍请访问文档：https://www.yuque.com/qqdie/mdphoto主题演示站：http://photo.zezeshe.com/免费版下载:https://qqdie.lanzouj.com/ii8Weysrd9g本站备份下载：[attach]1313[/attach]收费版：https://www.yuque.com/qqdie/mdphoto/gbs4yi
-
Typecho 微信小程序 weTiger（开源 + API接口文件） 一、Typecho微信小程序下载地址程序是开源的，里面包含了微信小程序代码和api接口文件。Gitee: https://gitee.com/mhcyong/weTiger因为github我暂时连接不上，故先放gitee，后面再推去github。二、使用方法1、去注册一个微信小程序，个人性质的小程序也可以，因为没有交互功能，就是几个简单的展示页面而已。2、可以下载一个微信小程序开发工具，方便自己进行修改调整等等，源码上传到微信小程序管理界面也是需要这个开发工具的。3、用微信开发工具打开下载好的程序，主要修改一下几个位置：注意修改域名和秘钥。4、将文件夹下面的api.php上传到网站跟目录，上传前先修改api.php文件里的这几个内容：还有几个字段也注意修改，在content表里面，我增加了views和likes两个字段，那么你也需要增加，或者修改为你自己的；其次缩略图我用的是img，有的人用的是thumb，那么也需要修改，修改完了上传到网站根目录即可。5、在根目录下有个app.json文件，里面有个网站名称，我写的是“胖蒜”，你根据自己需要修改一下。三、感谢感谢colorui提供漂亮的界面:https://github.com/weilanwl/ColorUI感谢Typecho提供这么好用的博客系统：https://github.com/typecho/typecho感谢Towxml提供的Markdown渲染：https://github.com/sbfkcel/towxml
-
ThemeDemo-Typecho主题展示插件 功能介绍可以用来切换前台主题，采用cookies记忆。需要手动设置链接，例如：http://siteurl/ThemeDemo.html?theme=ioshttp://siteurl/ThemeDemo.html?theme=vpseehttp://siteurl/ThemeDemo.html?theme=ynote2如果想恢复默认模板，链接：http://siteurl/ThemeDemo.html?theme (删除cookie)下载地址：https://github.com/typechor/ThemeDemo[attach]1309[/attach]
-
Typecho 华为云存储插件 ObsUpload 插件介绍这是一款 Typecho 华为云文件存储插件实现将静态资源存储到华为云OBS插件信息插件名：ObsUpload For Typecho作者：猫咪当前版本：v1.1.0更新时间：2020-09-2猫咪修改更新版地址：https://github.com/maomiblog/ObsUpload原版：https://github.com/iddddg/ObsUpload 使用方法下载插件文件将插件文件命名为ObsUploadOBS标准桶策略设置为公开读配置插件相关选项访问密钥获取新增访问密钥1.登录华为云，在右上角单击“控制台”。2.在“控制台”页面，鼠标移动至右上方的用户名，在下拉列表中选择“我的凭证”。3.在“我的凭证”页面，单击“访问密钥”页签。4.单击“新增访问密钥”，输入验证码。5.单击“确定”，生成并下载访问密钥。说明：当您下载访问密钥后，可以在浏览器页面左下角打开格式为.csv的访问密钥文件，或在浏览器“下载内容”中打开。[attach]1299[/attach]本站备份下载：ObsUpload-master.zip
-
实现typecho微信时光机功能的图文教程 对typecho的微信时光机功能非常青睐，收集网上的文章后，整理一下此文，方便好友。效果看本站微语： 一、搭建typecho 时光机单页 typecho-whisperwm_embed_post ids=1145下载文章中的附件。拷贝文件夹times和文件page.whisper.php到你使用的主题目录下。{collapse}{collapse-item label="以JOE主题为例" open}上传文件夹times和文件page.whisper.php到你使用的主题目录下{/collapse-item}{collapse-item label="效果如图示"} {/collapse-item}{/collapse}新建单页，模板选择 超级时光机 。在你的主题functions.php顶部写php的位置加上如下代码：{tabs}{tabs-pane label="以JOE主题为例"}require_once 'times/Ajax.php';{/tabs-pane}{tabs-pane label="代码如图示"}{/tabs-pane}{/tabs}如果你的主题自带时光机功能，如pigeon,A-my主题，只要在主题设置里填上时光机编码就可以了。二、关注微信公众号，沉默的博客。扫码关注我自建的公众号，发送“绑定”，填入相关信息即可。{collapse}{collapse-item label="需要自己弄公众号的的可以看文章" close}wm_embed_post ids=1149{/collapse-item}{/collapse}发送绑定检测mid 可以随意乱填发送信息测试一下是否成功。关于小尾巴可以自己在美化一下。
-
Typecho 评论增加楼层显示 很多网站最经典的是什么，比如网易，他们经典的是评论，评论中最经典的呢，那就是盖楼，typecho的评论没楼层怎么办？各位小伙伴们莫急，看，他来了，他来了……Joe主题在/usr/themes/Joe/public/comment.php 上图所示位置添加如下代码： <span style="margin-left:5px;color:#617d0e;font-size:12px"> <?php if($comments->levels == 0): ?> <?php if($comments->sequence == 1): ?>沙发 <?php elseif($comments->sequence == 2): ?>板凳 <?php elseif($comments->sequence == 3): ?>地毯 <?php else: ?> 第<?php $comments->sequence(); ?>楼<?php endif; ?> <?php endif; ?> </span>
-
网站手机移动端添加下边栏导航菜单 手机端访问的时候，给网站手机移动端添加下边栏，非常简单的实现方式，下面直接上教程。 本站有两个版本，一个是图片版本，一个是icon图标版本。 图片版本 本站以前所使用的版本，主要修改两个文件： 修改footer.php 首先，在页脚文件foot.php或者footer.php文件的最下面放入以下代码：<nav class="nav-shouji"> <div class="nav-item"> <div class="img"> <a href="https://chenyu.me/category/default/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj1.png"></a> </div> </div> <div class="nav-item"> <div class="img"> <a href="https://chenyu.me/category/web/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj2.png"></a> </div> </div> <a class="nav-item"> <div class="img"> <a href="https://chenyu.me/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj.png"></a> </div> </a> <div class="nav-item"> <div class="img"> <a href="https://chenyu.me/photo/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj3.png"></a> </div> </div> <div class="nav-item"> <div class="img"> <a href="https://chenyu.me/dh/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj4.png"></a> </div> </div> </nav>以上代码中的菜单链接和图标可以自行更改,图标分辨率为48x48。 修改joe.min.css 然后在CSS文件 JOE 4.7.7及以下老版：CSS文件是在assets/css/joe.min.css）里最下面放入以下代码即可。 JOE 7.X.X及以上新版：joe.global.min.css或joe.normalize.min.css最下面加入。 当然，最好的操作是以上文件的同名.scss文件里编辑然后生成.min.css的文件！（这句话看不懂的可以略过！）/*手机端底部菜单*/ @media (min-width: 768px) { .nav-shouji { display: none !important; } } .nav-shouji{ display: flex; position: fixed; bottom:0; z-index:99; height: 55px; width: 100%; background: var(--background); flex-shrink: 0; font-size: 14px; } .nav-shouji .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--main); } .nav-item:nth-child(3) { transform: translateY(-20px); background: var(--background); border-radius: 50%; height: 75px; width: 75px; flex-shrink: 2; box-shadow: 0 -3px 4px rgba(0,0,0,.1); } .nav-shouji .nav-item .img { height: 24px; overflow: hidden; } .nav-item:nth-child(3)>.img{ height: 30px; margin-bottom: 5px; } .nav-shouji .nav-item img { width: 24px; height: 24px; overflow: hidden; }icon图标版本 本站现在所使用的版本，手机访问本站即可看见！ 1.修改footer.php 首先，在页脚文件foot.php或者footer.php文件的最下面放入以下代码：<div id="mobile-footer"> <ul id="mobile-menu"> <li> <a href="https://chenyu.me/"> <span class="cyicon chenyu-yu"></span> 首页 </a></li> <li> <a href="https://chenyu.me/about/"> <span class="cyicon chenyu-106collect"></span> 关于 </a></li> <li> <a href="https://chenyu.me/whisper/"> <span class="cyicon chenyu-weiyuqiang-"></span> 微语 </a></li> <li> <a href="https://chenyu.me/navigation/"> <span class="cyicon chenyu-ganxie"></span> 排行榜 </a></li> <li> <a href="https://chenyu.me/dh/"> <span class="cyicon chenyu-daohang"></span> 导航 </a></li> </ul> </div>2.修改include.php 在/usr/themes/Joe/public/include.php的19-29行之间新增如下代码：<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/cysjdh.css'); ?>">3.新增cysjdh.css 在/usr/themes/Joe/assets/css/路径下新增cysjdh.css文件，内容如下：@import url("//at.alicdn.com/t/font_2611504_8nq4wp1bmb3.css"); @media screen and (min-width:767px){#mobile-footer{display:none}} #mobile-footer{height:50px;background:#fafafa;position:fixed;bottom:0;left:0;border-top:0;width:100%;z-index:9999999} #mobile-menu{display:block} #mobile-menu:after{content:'';display:block;height:0;clear:both} #mobile-menu>li{width:20%;float:left;border-top:1px solid #e6e6eb;height:100%} #mobile-menu>li>a:hover{color:#000;} #mobile-menu>li>.active{color:#000;} #mobile-menu>li>a{text-align:center;color:#777;display:block;line-height:12px;height:100%} #mobile-menu>li>a>span{font-size:20px;display:block;line-height:30px}
-
『教程』Typecho的Joe主题添加评论弹幕功能 成果展示{tabs}{tabs-pane label="后台"}{/tabs-pane}{tabs-pane label="前端"}{/tabs-pane}{/tabs}一、修改header.php文件新增代码，文件路径：usr/themes/Joe-master/public/header.php（一）第一段{tabs}{tabs-pane label="放在最上面"}<!-- 弹幕 --> <?php if ($this->options->JBarragerStatus === 'on') : ?> <?php $this->widget('Widget_Comments_Recent@index', 'ignoreAuthor=true&pageSize=15')->to($comments); ?> <ul class="j-barrager-list"> <?php if ($comments->have()) : ?> <?php while ($comments->next()) : ?> <li> <span class="j-barrager-list-avatar" data-src="<?php _getAvatarByMail($comments->mail) ?>"></span> <span class="j-barrager-list-content"><?php _parseAsideReply($comments->content); ?></span> </li> <?php endwhile; ?> <?php endif; ?> </ul> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}（二）第二段{tabs}{tabs-pane label="放在登录旁"}<!-- 弹幕 --> <?php if ($this->options->JBarragerStatus === 'on') : ?> <div class="item"> <input id="barrager" class="barrager" type="checkbox" title="开启/关闭弹幕"> </div> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}（三）第三段不要耍小聪明，放到include.php里去，不会显示弹幕的{tabs}{tabs-pane label="放在最后面"}<!-- 弹幕 --> <?php if ($this->options->JBarragerStatus === 'on') : ?> <script src="<?php $this->options->themeUrl('library/barrager/joe.barrager.js'); ?>"></script> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}二、修改include.php文件新增如下代码；文件路径：usr/themes/Joe-master/public/include.php{tabs}{tabs-pane label=" include.php 文件"}<?php if ($this->options->JBarragerStatus === 'on') : ?> <link rel="stylesheet" href="<?php $this->options->themeUrl('library/barrager/joe.barrager.css'); ?>"> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}三、修改functions.php{tabs}{tabs-pane label="添加代码"}$JBarragerStatus = new Typecho_Widget_Helper_Form_Element_Select( 'JBarragerStatus', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '是否开启弹幕功能（仅限PC）', '介绍：开启后，网站将会显示评论弹幕功能，该功能采用CSS动画引擎，并非传统JS操作DOM，无任何性能消耗。' ); $JBarragerStatus->setAttribute('class', 'joe_content joe_custom'); $form->addInput($JBarragerStatus->multiMode());{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}**如果创建过 custom.php 文件，直接放到 custom.php 里就行了****但是记得要在 functions.php 引入 custom.php 哦**四、修改config.php文件{tabs}{tabs-pane label="添加代码"}/* 弹幕 */ DOCUMENT_BARRAGER: '<?php echo $this->options->JBarragerStatus === 'on' ? 'on' : 'off' ?>',{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}五、上传CSS和JS将以下文件，放在usr/themes/Joe/library里就行了{cloud title="barrager" type="github" url="https://cdn.jsdelivr.net/gh/aill66/cdn@latest/usr/uploads/2021/06/3614980287.zip" password=""/}
-
【Typecho】的Joe主题新增文章阅读时长统计 {mtitle title="成品演示"/}{mtitle title="教程开始"/}{tabs}{tabs-pane label="第一步"}1.**修改 functions.php 文件，底部增加，文件路径： /usr/themes/Joe-master** // 文章阅读时长设置 $onlineTime = new Typecho_Widget_Helper_Form_Element_Select( 'onlineTime', array( 'off' => '关闭（默认）', 'on' => '开启', ), 'on', '是否启用文章阅读时长统计', '介绍：开启后，文章底部展示文章字数，预计阅读时长和已阅读时长' ); $onlineTime->setAttribute('class', 'joe_content joe_post'); //如果设置无法展示，请将joe_custom替换为joe_other $form->addInput($onlineTime->multiMode());{/tabs-pane}{tabs-pane label="第二步"}2.**修改 article.php 文件，文件路径： usr/themes/Joe-master/public**<div class="contain" style="margin-bottom: 10px; <?php if(Helper::options()->onlineTime !== 'on') echo 'display:none;' ?>"> <blockquote id="onlineTime">本文共 <?php art_count($this->cid); ?> 个字数,平均阅读时长 ≈ <?php echo art_time($this->cid); ?>分钟</blockquote> </div>{/tabs-pane}{tabs}{tabs-pane label="第三步"}3.**修改 article.php 文件，文件路径： usr/themes/Joe-master/public**<?php //文章阅读时间统计 function art_time ($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']); $text_word = mb_strlen($text,'utf-8'); echo ceil($text_word / 400); } //文章字数统计 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'); } ?> <script language="javascript"> var second=0; var minute=0; var hour=0; window.setTimeout("interval();",1000); function interval() { second++; if(second==60) { second=0;minute+=1; } if(minute==60) { minute=0;hour+=1; } var onlineTime = "您已阅读：" + hour + "时" + minute + "分" + second + "秒。"; var joe_message_content = "本文共 " + <?php art_count($this->cid); ?> + "个字数，平均阅读时长 ≈ " + <?php echo art_time($this->cid); ?> + "分钟，"; $('#onlineTime').text(joe_message_content + onlineTime); window.setTimeout("interval();", 1000); } </script>{/tabs-pane}{/tabs}
-
Typecho的Joe主题新增QQ打开自动跳转到浏览器 前言最近QQ抽风，很多站长的网站都被屏蔽白了，我的也不例外而且很多人上午解了下午又白，所以我就想做一个跳转，跳转到浏览器访问然后看到执念有教程，就直接搬过来了，也就当做个备份吧效果图{tabs}{tabs-pane label="后台"}{/tabs-pane}{tabs-pane label="跳转"}{/tabs-pane}{/tabs}修改步骤一、修改functions.php文件新增如下代码；文件路径： usr/themes/Joe/functions.php{tabs}{tabs-pane label="php代码"}$JPrevent = new Typecho_Widget_Helper_Form_Element_Select( 'JPrevent', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '请选择是否开启QQ防红拦截', '介绍：开启后，如果在QQ里打开网站，则会提示跳转浏览器打开' ); $JPrevent->setAttribute('class', 'joe_content joe_custom'); // 如果后台无法展示该设置，将joe_custom修改为joe_other（我改成了joe_post，放在文章设置分类里的） $form->addInput($JPrevent->multiMode());{/tabs-pane}{tabs}{tabs-pane label="图示"}{/tabs-pane}{/tabs}二、修改include.php文件路径如下： usr/themes/Joe/public/include.php在最顶部新增{tabs}{tabs-pane label="代码"}<?php if ($this->options->JPrevent === 'on') : ?> <?php $this->need('public/prevent.php'); ?> <?php endif; ?>{/tabs-pane}{tabs-pane label="图示"}{/tabs-pane}{/tabs}三、新增prevent.php文件下载以下文件，上传路径： usr/themes/Joe/public文件下载：{cloud title="prevent" type="github" url="https://cdn.jsdelivr.net/gh/aill66/cdn@latest/usr/uploads/2021/06/4280840757.zip" password=""/}
-
Joe主题新增海报功能——配合插件 效果见本站。0.成品图{tabs}{tabs-pane label="后台设置"}{/tabs-pane}{tabs-pane label="文章底部"}{/tabs-pane}{tabs-pane label="海报样式"}{/tabs-pane}{/tabs}{message type="warning" content="使用手册：激活插件后打开主题的开关设置即可"/}1.将插件文件放在 usr/plugins目录下，并进行激活，下载链接在文章底部2.修改handle.php文件，新增代码，文件路径：usr/themes/Joe-master/public{tabs}{tabs-pane label="代码"}第一段，底部新增 <div style="<?php if(Helper::options()->Haibao !== 'on') echo 'display:none;' ?>"> <div class="article-poster-button" style="text-align: center; margin-left:30px;"> <div class="haibao"> <svg t="1623158793415" class="icon-haibao" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2237" width="100%" height="100%"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512zM403.2 704L256 851.2c-12.8 12.8-32 12.8-44.8 0s-12.8-32 0-44.8l147.2-147.2c12.8-12.8 32-12.8 44.8 0s12.8 32 0 44.8z m460.8-44.8h-192c-12.8 19.2-76.8 102.4-115.2 153.6-19.2 25.6-51.2 25.6-70.4-12.8-25.6-70.4-64-172.8-64-172.8S307.2 576 236.8 544c-25.6-12.8-32-44.8 0-64C294.4 435.2 384 364.8 384 364.8s6.4-128 6.4-204.8c0-44.8 12.8-51.2 19.2-51.2 6.4 0 19.2 0 44.8 19.2 64 44.8 166.4 115.2 166.4 115.2s108.8-32 172.8-51.2c32-12.8 57.6 12.8 51.2 38.4l-51.2 204.8s64 89.6 102.4 153.6c19.2 38.4 6.4 70.4-32 70.4z" fill="#FF9256" p-id="2238"></path></svg> </div> <p style="margin-top:5px; color:#909399; font-size:12px">海报</p> </div> <div class="haibao-shade"> <div class="ball-spin-fade-loader_title">正在生成.....</div> <div class="ball-spin-fade-loader"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div data-id="<?php echo $this->cid ?>" class="article-poster action action-poster" style="display:none;"> <div class="poster-popover-mask" data-event="poster-close"> </div> <div class="poster-popover-box"> <a class="poster-download" data-event="poster-download" data-url="">下载海报</a> <img class="article-poster-images"/> </div> </div> </div> 第二段，底部新增 <style> .haibao-shade { background: grey; z-index: 20; opacity: 0.6; position: fixed; pointer-events: auto; top: 0; left: 0; width: 100%; height: 100%; display: none; transition: opacity .25s linear; } @-webkit-keyframes ball-spin-fade-loader { 50% { opacity: 0.3; -webkit-transform: scale(0.4); transform: scale(0.4); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes ball-spin-fade-loader { 50% { opacity: 0.3; -webkit-transform: scale(0.4); transform: scale(0.4); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .ball-spin-fade-loader { position: relative; left: calc(50% - 25px); top: calc(50% - 25px); } .ball-spin-fade-loader_title { position: relative; left: calc(50% - 50px); top: calc(55% - 15px); } .ball-spin-fade-loader > div:nth-child(1) { top: 25px; left: 0; -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear; animation: ball-spin-fade-loader 1s 0s infinite linear; } .ball-spin-fade-loader > div:nth-child(2) { top: 17.04545px; left: 17.04545px; -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear; animation: ball-spin-fade-loader 1s 0.12s infinite linear; } .ball-spin-fade-loader > div:nth-child(3) { top: 0; left: 25px; -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear; animation: ball-spin-fade-loader 1s 0.24s infinite linear; } .ball-spin-fade-loader > div:nth-child(4) { top: -17.04545px; left: 17.04545px; -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear; animation: ball-spin-fade-loader 1s 0.36s infinite linear; } .ball-spin-fade-loader > div:nth-child(5) { top: -25px; left: 0; -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear; animation: ball-spin-fade-loader 1s 0.48s infinite linear; } .ball-spin-fade-loader > div:nth-child(6) { top: -17.04545px; left: -17.04545px; -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear; animation: ball-spin-fade-loader 1s 0.6s infinite linear; } .ball-spin-fade-loader > div:nth-child(7) { top: 0; left: -25px; -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear; animation: ball-spin-fade-loader 1s 0.72s infinite linear; } .ball-spin-fade-loader > div:nth-child(8) { top: 17.04545px; left: -17.04545px; -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear; animation: ball-spin-fade-loader 1s 0.84s infinite linear; } .ball-spin-fade-loader > div { background-color: #fff; width: 15px; height: 15px; border-radius: 100%; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; } .haibao { width: 42px; height: 42px; background-color: #f56c6c; border-radius: 50%; cursor: pointer; position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; color:#909399; font-size:12px } .haibao:hover { background-color: #409eff; } .article-poster { position:absolute;z-index:999; } </style>{/tabs-pane}{tabs-pane label="代码对应图片"}{/tabs-pane}{/tabs}2.修改functions.php文件，底部新增，文件路径：usr/themes/Joe-master{tabs}{tabs-pane label="代码"}// 海报 $Haibao = new Typecho_Widget_Helper_Form_Element_Select( 'Haibao', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '是否开启底部海报功能', '介绍：开启后，文章底部展示生成海报按钮' ); $Haibao->setAttribute('class', 'joe_content joe_custom'); // 如果后台无法展示开关，则将joe_custom替换为joe_other $form->addInput($Haibao);{/tabs-pane}{tabs-pane label="代码图片"}{/tabs-pane}{/tabs}海报插件下载地址：https://github.com/MoLeft/ArticlePoster
-
Typecho的Joe主题新增cnzz统计 0.成品图{tabs}{tabs-pane label="后台设置"}{/tabs-pane}{tabs-pane label="前台展示"}{/tabs-pane}{/tabs}1.修改footer.php，新增代码，文件路径：usr/themes/Joe-master/public{tabs}{tabs-pane label="代码"}第一段，在文件最上方添加 <?php if(Helper::options()->CnzzType !== 'off') { $CnzzIdSave = Helper::options()->CnzzId; $CnzzTypeStyle = Helper::options()->CnzzType; $CnzzTypeStyle = str_replace("CnzzId", $CnzzIdSave, $CnzzTypeStyle); } ?> 第二段添加在网站运行时间前面 <div class="item" style="margin: 10px; <?php if(Helper::options()->CnzzType == 'off') echo 'display:none;' ?>"> <span id='cnzz_stat_icon_<?php Helper::options()->CnzzType ?>'></span><script src='<?php echo $CnzzTypeStyle ?>' type='text/javascript'></script> </div>{/tabs-pane}{tabs-pane label="代码位置图片"}{/tabs-pane}{/tabs}2.修改functions.php文件，新增代码，文件路径：/usr/themes/Joe-master{tabs}{tabs-pane label="代码"}$CnzzId = new Typecho_Widget_Helper_Form_Element_Text( 'CnzzId', NULL, NULL, 'cnzz站点ID', '介绍：填写此处用于展示cnzz统计，该地址进行申请 https://www.umeng.com/web' ); $CnzzId->setAttribute('class', 'joe_content joe_custom');// 如果后台无法展示设置，将joe_custom替换为joe_other $form->addInput($CnzzId->multiMode()); $CnzzType = new Typecho_Widget_Helper_Form_Element_Select( 'CnzzType', array( 'off' => '关闭（默认）', 'https://s4.cnzz.com/z_stat.php?id=CnzzId&web_id=CnzzId' => '文字形式', 'https://s4.cnzz.com/z_stat.php?id=CnzzId&show=pic' => '图片样式1', 'https://s4.cnzz.com/z_stat.php?id=CnzzId&show=pic1' => '图片样式2', 'https://s4.cnzz.com/z_stat.php?id=CnzzId&show=pic2' => '图片样式3', 'https://s4.cnzz.com/z_stat.php?id=CnzzId&online=2' => '在线人数', 'https://s4.cnzz.com/z_stat.php?id=CnzzId&online=1&show=line' => '横排数据显示', ), 'off', '选择cnzz样式', '介绍：开启时请填写cnzz站点ID' ); $CnzzType->setAttribute('class', 'joe_content joe_custom');// 如果后台无法展示设置，将joe_custom替换为joe_other $form->addInput($CnzzType->multiMode());{/tabs-pane}{tabs-pane label="代码位置图片"}{/tabs-pane}{/tabs}
-
Typecho的Joe主题实现侧边栏互动读者-展示活跃用户 之前的魔改版就有这个功能，虽然没几个人留言，但不是要加上这个功能。0.成品图1.修改aside.php文件，新增如下代码，文件路径：usr/themes/Joe-master/public{tabs}{tabs-pane label="代码"}<!--互动读者--> <?php if ($this->options->JactiveUsers === 'on') : ?> <section class="aside aside-hunter-authors"> <div class="joe_aside__item-title"> <svg t="1622460301541" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2712" width="200" height="200"><path d="M896 128H128a32 32 0 0 0-32 32v576a32 32 0 0 0 32 32h288v-64H160V192h704v512h-256c-8.832 0-16.832 3.584-22.656 9.376l-159.968 160 45.248 45.248L621.248 768H896a32 32 0 0 0 32-32V160a32 32 0 0 0-32-32" fill="#181818" p-id="2713"></path><path d="M560 448a48 48 0 1 0-95.968-0.032A48 48 0 0 0 560 448M240 448a48 48 0 1 0 95.968 0.032A48 48 0 0 0 240 448M784 448a48 48 0 1 0-95.968-0.032A48 48 0 0 0 784 448" fill="#181818" p-id="2714"></path></svg> <span class="text">互动读者</span> <span class="line"></span> </div> <div class="hunter-cont"> <ul class="hunter-authors"> <?php $period = time() - 2592000; // 单位: 秒, 时间范围: 30天 $counts = Typecho_Db::get()->fetchAll(Typecho_Db::get() ->select('COUNT(author) AS cnt', 'author', 'max(url) url', 'max(authorId) authorId', 'max(mail) mail') ->from('table.comments') ->where('created > ?', $period) ->where('status = ?', 'approved') ->where('type = ?', 'comment') ->group('author') ->order('cnt', Typecho_Db::SORT_DESC) ->limit('4') ); foreach ($counts as $count) { $c_url = '<li><div class="item"><div class="hunter-avatar"><div class="vatar"><img src="' . _getAvatarUrlByMail($count['mail']) . '"></div></div><div class="item-main"><div><a target="_blank" href='. $count['url'] . '>' . $count['author'] . '</a>'; echo '' . $c_url . ''; autvip($count['mail']); $allpostnum = allpostnum($count['authorId']); echo ' <h4>评论 ' . $count['cnt'] . ' 次 | <i>'.$allpostnum.'</i>'; echo ' </h4></div></div></li>'; } ?> </ul> </div> </section> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置图片"}{/tabs-pane}{/tabs}2.修改core.php文件，底部新增，文件路径：usr/themes/Joe-master/core{tabs}{tabs-pane label="代码"}/** * 显示用户等级，按邮箱 */ function autvip($i){ $db=Typecho_Db::get(); $mail=$db->fetchAll($db->select(array('COUNT(cid)'=>'rbq'))->from('table.comments')->where('mail = ?', $i)/**->where('authorId = ?','0')**/); foreach ($mail as $sl){ $rbq=$sl['rbq'];} if($rbq<1){ echo '<span class="autlv aut-0">Lv.0</span>'; }elseif ($rbq<10 && $rbq>0) { echo '<span class="autlv aut-1">Lv.1</span>'; }elseif ($rbq<20 && $rbq>=10) { echo '<span class="autlv aut-2">Lv.2</span>'; }elseif ($rbq<40 && $rbq>=20) { echo '<span class="autlv aut-3">Lv.3</span>'; }elseif ($rbq<80 && $rbq>=40) { echo '<span class="autlv aut-4">Lv.4</span>'; }elseif ($rbq<100 && $rbq>=80) { echo '<span class="autlv aut-5">Lv.5</span>'; }elseif ($rbq>=100) { echo '<span class="autlv aut-6">Lv.6</span>'; } } /** *输出作者文章总数，可以指定 */ function allpostnum($id){ $db = Typecho_Db::get(); $postnum=$db->fetchRow($db->select(array('COUNT(authorId)'=>'allpostnum'))->from ('table.contents')->where ('table.contents.authorId=?',$id)->where('table.contents.type=?', 'post')); $postnum = $postnum['allpostnum']; if($postnum=='0') { return '暂无文章'; } else{ return '文章 '.$postnum.' 篇'; } } /* 通过邮箱生成头像地址 */ function _getAvatarUrlByMail($mail) { $gravatarsUrl = Helper::options()->JCustomAvatarSource ? Helper::options()->JCustomAvatarSource : 'https://gravatar.ihuan.me/avatar/'; $mailLower = strtolower($mail); $md5MailLower = md5($mailLower); $qqMail = str_replace('@qq.com', '', $mailLower); if (strstr($mailLower, "qq.com") && is_numeric($qqMail) && strlen($qqMail) < 11 && strlen($qqMail) > 4) { return 'https://thirdqq.qlogo.cn/g?b=qq&nk=' . $qqMail . '&s=100'; } else { return $gravatarsUrl . $md5MailLower . '?d=mm'; } }{/tabs-pane}{tabs-pane label="代码位置图片"}{/tabs-pane}{/tabs}3.修改include.php文件，底部新增，代码路径：usr/themes/Joe-master/public{tabs}{tabs-pane label="代码"}<?php if ($this->options->JactiveUsers === 'on') : ?> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/custom.css'); ?>"> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置图片"}{/tabs-pane}{/tabs}4.新增custom.css文件，文件路径：usr/themes/Joe-master/assets/css{tabs}{tabs-pane label="代码"}.autlv { font-size: 10px; color: #fff; display: inline-block; vertical-align: text-top; font-weight: normal; border-radius: 2px; line-height: 1.4; padding: 0 4px; margin-left: 5px; letter-spacing: 0px; } .aut-0 { background: #d1d5dc; } .aut-1 { background: #448EF6; } .aut-2 { background: #f6b044; } .aut-3 { background: #c444f6; } .aut-4 { background: #f69644; } .aut-5 { background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%); } .aut-6 { background: #f64444; } .aside-hunter-authors { background: var(--background); } .aside-hunter-authors .vs { border-radius: 100%; } .aside-hunter-authors ul { padding: 14px; list-style: none; line-height: 2.5; } .aside-hunter-authors .item { border-bottom: 1px dashed #eee; margin-bottom: 0px; position: relative; padding-bottom: 4px; } .aside-hunter-authors .item .hunter-avatar { float: left; line-height: 55px; } .aside-hunter-authors .item .hunter-avatar .vatar { position: relative; } .aside-hunter-authors .item .hunter-avatar .vatar img { width: 45px; border-radius: 100%; } .aside-hunter-authors .item .hunter-avatar .vatar .va_v_honor { position: absolute; bottom: 3px; right: 0px; width: 18px; height: 18px; } .aside-hunter-authors .item .item-main { min-height: 60px; margin-left: 60px; color: #393939; } .aside-hunter-authors .item .item-main h4 { font-size: 12px; line-height: 1; margin-bottom: 7px; font-weight: normal; color: #999; } .aside-hunter-authors .item .item-main h4 i { font-style: normal; color: #aaa; margin: 0 5px; }{/tabs-pane}{tabs-pane label="代码位置图片"}{/tabs-pane}{/tabs}5.修改functions.php文件，底部新增，文件路径：usr/themes/Joe-master{tabs}{tabs-pane label="代码"}// 互动读者 $JactiveUsers = new Typecho_Widget_Helper_Form_Element_Select( 'JactiveUsers', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '是否开启互动读者', '介绍：显示评论相关用户' ); $JactiveUsers->setAttribute('class', 'joe_content joe_custom'); // 如果后台无法展示该设置，将joe_custom修改为joe_other $form->addInput($JactiveUsers);{/tabs-pane}{tabs-pane label="代码位置图片"}{/tabs-pane}{/tabs}
-
Typecho完美实现回复可见功能 步骤一就是《typecho非插件实现回复可见功能》里面的内容将post.php中的<?php $this->content(); ?>换成<?php $db = Typecho_Db::get(); $sql= $db->select()->from('table.comments') ->where('cid = ?',$this->cid) ->where('mail = ?', $this->remember('mail',true)) ->where('status = ?', 'approved') //只有通过审核的评论才能看回复可见内容 ->limit(1); $result= $db->fetchAll($sql); if($this->user->hasLogin() || $result) { $content= preg_replace("/\[hide\](.*?)\[\/hide\]/sm",'<div class="reply2view">$1</div>',$this->content); } else{ $content= preg_replace("/\[hide\](.*?)\[\/hide\]/sm",'<div class="reply2view">此处内容需要评论回复后方可阅读。</div>',$this->content); } echo $content ?>步骤二解决缩略内容和feed暴露问题。在functions.php中加入如下代码即可Typecho_Plugin::factory('Widget_Abstract_Contents')->excerptEx = array('myyodux','one'); Typecho_Plugin::factory('Widget_Abstract_Contents')->contentEx = array('myyodux','one'); class myyodux { public static function one($con,$obj,$text) { $text= empty($text)?$con:$text; if(!$obj->is('single')){ $text= preg_replace("/\[hide\](.*?)\[\/hide\]/sm",'',$text); } return $text; } }就是用插件接口，在缩略内容输出之前，隐藏掉或者替换掉回复可见内容，同时使用if判断，来针对非single页面进行隐藏。步骤三使用方法在写文章需要隐藏部分内容时用以下写法(去掉@)[@hide]要隐藏的内容[/hide]css参考样式.reply2view { background:#f8f8f8; padding:10px 10px 10px 40px; position:relative }心里话在写yodu模板的时候，因为网友需要，我就找了教程把回复可见功能加上了，当时也是知道这个东西的bug，但是自己不会修，最近写了个typecho的搜索插件，看了一些typecho的插件接口和源码，发现用插件接口很好的就能解决了，于是乎水文一下，希望能帮助到一些人。
