Typecho掘金编辑器《Typecho_Plugin_JJEditor》
前言 逛掘金的时候发现官方把自己的编辑器开源出来了,于是抽空整了个typecho插件,把官方默认的编辑器换掉,并且和之前写的掘金主题一起联动,文章主题的切换可以即时的预览到,还是挺好的。 可惜就是在编辑器中无法预览在markdown中插入的原生html标签,等找到合适的解决方案再修复吧! Github:Typecho_Plugin_JJEditor 预览图

前言 最近发现主题的目录树很多地方不是很满意,一方面是自己对于php的知识不是很好,大部分都是从网上分析的代码中拿取cv一下就用了,加上重构主题是一个比较大的工程,所以有些地方都是奔着先跑起来再说的思路。 像极了项目开发时的场景,先上线再说,用户量大了我们再优化! 昨晚我看了下typecho的目录树,都使用了一个全局变量: global $catalog; $catalog是一个扁平化的数组,里面存放着按顺序提取的页面h1-h6标题数据,由于php的数组可视化巨难看,我们先通过ts的方式去了解和实现这个处理。 教程 [hide] $catalog的数据结构大致如下: const cata...
前言 经过半个月的努力,主题更新到2.0版本了,增加了Typecho 1.2的支持,以及众多改动,基本上是重构了一遍,采用了热门的Typescript来做类型约束,模块化的设计使得维护更加轻松了。 更新日志 2023-03-18 webpack5 + typescript 重构主题 支持 Typecho 1.2 模块化结构 兼容到 320px 分辨率 修复 1.0 版本备案信息无法展示 bug 新增表情 文章与独立页支持切换主题 支持更多的代码类型高亮 文章内容支持 iframe 了 优化了灯箱逻辑 更加准确的分类菜单高亮 更好的定位跳转 更新了 UI 有彩蛋哦 还有很多变化需细细品味...
前言 目前个人认为最合适的一个判定了,但是我的做法只支持二级分类,如果你有多级分类,就需要自行调整了。 先上个实际html渲染图: 可以看到,我进入的是HTML子分类,那么对应的子分类class上已经有active类名了,而它的父级分类前端,在类名上也存在了active。 教程 不多说,直接上源码 [hide] <div class="nav-list"> <?php $this->widget('Widget_Metas_Category_List')->to($category);?> <?php while ($category-...
前言 主题的切换研究过好久了,个人认为目前最好的两种实现: 原生css变量实现,性能好,但是不太兼容旧设备 利用预处理scss这种做一个主题类名,通过最上层类名变化从而改变嵌套的子类名的颜色,兼容性好,但是需要把所有的类都抽出来单独设置。 本着简单+性能的目标,我采用了第一种方案,这种方案也是大佬张鑫旭提供了,文章是:《link rel=alternate网站换肤功能最佳实现》 有兴趣弄的话可以先看看大佬的文章了解原理。 封装 主题的链接引入采用如下格式: <!-- theme --> <link href="<?php $this->options-&...
前言 一直想把基于webpack5的多页面打包整理一下,做成一个通用的typecho主题开发架子,之前在JJ主题上虽然以及由部分实现了,但是不是很理想,因为是第一次弄,所以还是有些粗糙。 现在离职后得了空闲,于是把这个架子给搭起来了,基于这个架子做前端开发还是很方便的,起码各种框架都能通过按照包的方式使用,能用上先进的打包机还是很棒的! 仓库地址 github地址:webpack-multiple-entry 觉得有用的话麻烦点个Star吧。 如果有什么问题可以提交Issues或者在该文章下面留言
起因 由于最近在了解前端js中length不准的问题,其中文章带有一些特殊字符,而typecho和mysql都只是支持UTF-8字符,但是这个utf-8并不是真正意义上的utf-8,它最多支持3个字节的内容,也就是24bit,而我文章中的特殊字符是需要4个字节来存储的,这就导致文章无法正常的展示和保存。 这个特殊字符和现在移动端常用的emoji表情差不多,emoji也是一种特殊字符,所以该教程同样适用于如何让typecho支持emoji表情。 教程 打开宝塔的phpmyadmin -> 找到typecho的数据库 -> 操作 -> 滑动到最底部找到排序规则 -> ...
以前写过一个关于自定义评论的文章,时至如今来看,还是有很多不足的,昨晚再新写主题的时候,也重新写了一次自定义评论,嗯,有了新的理解,因为其实真的很简单,仔细阅读本篇文章,相信你会有收获的。 [hide] 自定义评论模板到底要怎么做 很简单,可以理解为两步: 编写自定义评论的模板 通过php渲染出自定义模板评论 而为什么大多数人不会,其实就是因为官方的文档真的是,如果懂php的人,可能看了一两遍后明白了怎么回事,但是如果是小白入门,纯前端的童鞋,可能看的一脸蒙蔽。 就算是原封不动的copy官方的示例代码也还是会报错,心累... 因为,你不知道他要做什么,我编写了自定义模板函数thre...
Lay 是一个精心制作的侧边栏主题,提高了响应速度,优化了诸多地方 历经时间打磨,更贴合需求 预览 特性 基于Layui框架制作,模块化结构,异步加载js,加快页面响应 响应式布局 html5+css3+es5+es6 基于Layui框架 模块化结构 异步js加载 优秀的灯箱 比较全面的代码高亮,精选四种高亮主题,支持常用的语言,还支持:shell、sass、scss、styles、less、c++、go、php、nginx、等语言。 缩略文章无刷新加载,增加用户体验 支持主题可视化配置 侧边栏导航三种主题,可设置 支持微信、支付宝二维码赞助 符合国内的分享功...
之前写过一篇typecho上一篇下一篇的文章,但是当时是对官方的代码进行小改,虽然文章标题,链接都能获取到,但是没法获取到更多,包括文章缩略图。 为此我是绞尽脑汁啊,还参考了一些有这种效果的作品,发现,不行,没有我想要的效果。 他们的效果都是获取文章的自定义字段,也就是和自定义文章缩略图的那种路子,你只有设置了,他这里才能显示,他不能自动去获取,有的好像连个随机不够做吧。 终于,有一天晚上,我一时兴起,想解决下这个问题,于是有了这篇文章,首先我们需要两段代码,这两段代码我是通过网上的代码进行修改的,去掉了一些部分。 [hide] 获取文章上一篇,下一篇cid /** * 显示上一篇 * ...
typecho的缩略图,其实自己用了好久,最近才发现了一种最简单的组合,不用太多代码,有需要改改方法就行了。 目前我总结了一个对文章缩略图的获取顺序: 用户自定义缩略图 文章第一张缩略图 文章附件第一张图 文章随机图 是否开启cdn加速,使用加速地址前段 本地地址 基本上按照这个思路,所有的情况都能照顾到,当然我看了一些付费的主题,他会对用户自定义的缩略图进行定制,比如,大图,小图这些,其实我感觉挺麻烦的,哈哈 这里我们一步一步完善这三步 教程 [hide] 自定缩略图 自定义缩略图我们需要一个自定义字段,这个自定义字段也是在网上找的别人的分享技术,这里贴出来用法 直接在主题fu...
既然开放了注册,那么用户组就是一个问题,我们需要进行鉴权。 获取用户处在什么用户组 typecho有5个角色,一个是访客,我们通过是否登录来判断。 剩下四个为: administrator 管理员 editor 编辑 contributor 贡献者 subscriber 关注者 具体权限可以查看官方的这个说明: 用户组 <?php echo get_object_vars($this->user)['row']['group'];?> 通过这个可以判断当前用户的用户组是什么,管理员就输出administrator 鉴权 <?php $userGroup=...
以前台注册为例,他是一个独立页,所以输入地址是可以直接进入的,但是如果用户已经登录了,按道理,这个页面是不能进的,所以需要重定向。 于是乎我们需要在开头加上这么一句话 if ($this->user->hasLogin()) { header("Location:".$this->options->siteUrl); exit; } 这里以独立页做个演示: <?php /** * register * * @package custom */ if (!defined('__TYPECHO_ROOT_DIR__')) exit; i...
最近想给博客主题增加一个一键复制代码的功能,结果发现highlight.js并不支持一键复制,这就非常的可惜啊。 于是百度了下,找到一个不错的例子,根据其例子我自己写了一个通用的方式。 效果图 安装 [hide] 需要使用clipboard.js,所以需要js引入这个复制用的库 <script type="text/javascript" src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js"></script> 引入完毕后我们需要给每个代码块增加一个复制按钮,默认是没有按钮元素的...
大人,时代变了!目前typecho最完美的解决方案了,因为百度只能看到固定思维的代码。 先看看实际生成的html代码截图,干净到让人窒息 完全的自定义,包括给li元素加上class,给a元素加上class,给上一页下一页加上class,去除typecho自带用于表示更多的li标签。甚至里面的内容我也能添加一些文字。 废话不多说,上源码: [hide] <nav class="my-5"> <?php ob_start(); $this->pageNav('«','»', 1, '', ar...
默认情况下,官方给的代码<?php $this->category(','); ?>是一个a链接,然后多个则用第一个参数逗号分隔。 如果我们不想要a链接,可以给第二个参数传个false,这样输出的就是文本了。 <?php $this->category(',',false); ?> 即便是这样也不方便,因为我们可能需要对这个a元素添加class,但是官方这个生成的是定死的,不太方便,所以我搞了半天,写了个完全自定义的文章分类。 [hide] <?php $categories = $this->categories;?> ...
百度了好多篇文章,用起来都会报错,花了一天时间研究,终于搞明白自定义评论是怎么做的。 typecho的评论模板是comments.php文件,在这个文件,可能会有人在开头加上这句话: <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?> 事实上这句话是不需要的,记得删除它。 自定义评论的基本结构 很多人在看官方的文档时就会迷糊,说了那么多,到底自定义评论的完整结构是啥,这里我就简单列出来,就三个部分。 comments.php | ---- 自定义评论列表函数 | ---- 评论表单 | ---- 评论列表输出 其中评论表单...
终于把站点迁移过来了,期间遇到一些问题,很蛋疼,比如,把站点文件夹整个打包备份后,数据库也一并备份,然后还原的时候会遇到一个神奇的bug。 你的邮件回复提醒功能再也无法生效了,哪怕你重新设置账户信息。 [hide] 数据库备份 为此我试了好久,发现只有一个办法可以完美解决这问题,就是会比较麻烦一些,但是文章数据,评论,分类信息,标签都可以完美保留。 我们的效果就是,博客的设置信息全部丢弃,只保留文章数据,评论,分类信息,标签。 所以我们首先要进入数据库管理,找到对应的几个表: access comments contents fields metas relationships 如果...
主题名由来 大海中有一种鱼,名叫:䲟鱼;这种鱼靠吸附在大鱼身上周游世界,这种鱼被称为懒惰鱼,于是英文翻译就是Lazy fish;于是偷个懒就成了Lazy_F,233... 主题预览 主题介绍 Lazy_F集合了一些资讯类和个人博客主题的东西,个人经常发表大篇大篇的文章,因为之前使用过的主题整体ui下来并不方便阅读,为此我自己也根据资讯类的博客样式对主题做了相应调整,为此还针对md的书写做了样式优化,大部分样式都是根据 Cmd Markdown 这款在线编辑器做的,具体的变动下面会讲解到。 功能特性 [x]HTML5+CSS3响应式设计,适应320以上分辨率的设备 [x]Cm...
最近评论