搜索到
7
篇与
Typecho
的结果
-
Joe主题自定义搭配色教程 今天看到每个使用本站主题的用户，全部用的都是主题默认样式，如何自定义一套自己的色彩风格？此篇文章适合非常非常白的小白（萌新）阅读，不适用于大佬前言本篇教程无任何技术类的知识，只需对颜色有些了解即可！第一步打开主题外观设置 - 全局设置 - 自定义CSS，填写以下内容：body { --theme: #409eff; }填写完后如下图所示（复制粘贴不会的洗洗睡吧）：第二步随便百度一个颜色网站，例如：https://www.5tu.cn/colors/yansebiao.html复制自己喜欢的颜色色彩值，例如珊瑚色：#f8aba6。接着替换掉上面填写的颜色即可，上面的代码就如下所示：body { --theme: #f8aba6; }接着保存，去前台刷新就能看见变化了，这里只是举一个栗子进行说明。到这里纯小白的教程结束，下面的内容是更加强大的全套主题色补充。完整版内容首先打开主题外观设置 - 全局设置 - 自定义CSS，填写以下内容：不用管这一步的作用是什么，后面会逐个介绍body { --theme: #409eff; --background: #fff; --main: #303133; --routine: #606266; --minor: #909399; --seat: #c0c4cc; --classA: #dcdfe6; --classB: #e4e7ed; --classC: #ebeef5; --classD: #f2f6fc; --radius-wrap: 8px; --radius-inner: 4px; --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22); }首先随便拿上面的一个属性进行介绍，懂了一个后面都懂，dddd（懂的都懂 ::(阴险) ）例如：--theme: #409eff;--theme 这个不能修改，固定的主题调用语法。--theme 冒号后面的是颜色的色彩值，这个色彩值可以用常见的颜色格式。例如 #ff6800、rgba(0,0,0,1) 等等都可以{dotted startColor="#ff6c6c" endColor="#1989fa"/}明白上面的意思后，接下来对上面的每个属性做一个描述--theme顾名思义，主题色的意思，用于修改整个网站的主题色彩--background这个介绍不太好描述，用一个图形容下，比如下面这张图，他的背景色就是用的这个属性值（白色），如果想变成透明的话，可以填写 rgba 值，例如：rgba(255,255,255,0.5) 半透明--main这个是文字的颜色，颜色最深的--routine这个是文字的颜色，颜色稍微次于上面那个--minor这个是文字的颜色，颜色稍微次于上面那个--seat这个是文字的颜色，颜色稍微次于上面那个--classA这个主要用于横线、分割线用的颜色，颜色最深的--classB这个主要用于横线、分割线用的颜色，颜色稍微次于上面那个--classC这个主要用于横线、分割线用的颜色，颜色稍微次于上面那个--classD这个主要用于横线、分割线用的颜色，颜色稍微次于上面那个--radius-wrap这个主要用外层包裹的圆角度数的，如果不需要圆角，可以写0，例如--radius-inner这个主要用里层包裹的圆角度数的，如果不需要圆角，可以写0--text-shadow这个是文章标题的字体阴影，这个只在文章详情页用到，改不改区别不大--box-shadow这个是阴影，这个弄得好，网站炫酷的一批，例如拟态等都是通过这个实现的其他上面的设置都是控制主题白昼下的样式，黑夜模式的样式和这个修改方法一致 -
-
Joe — 一款个人类型Typecho主题 主题下载{card-default width="100%" label="主题下载"}1、QQ群下载：4573375792、GitHub下载（帮忙点个star）：https://github.com/HaoOuBa/Joe{/card-default}主题描述{card-default width="100%" label="主题亮点"}1、整包仅1.3Mb，却实现超强功能，极其迅速的响应（在开发时，都是使用30000篇文章进行开发测试）2、全站变量名、类名统一规范，重在方便更多人参与二开与拓展3、主题开箱即用，没有任何复杂的操作，无需像其他主题去特意创建个分类等。4、主题首发Typecho独家Joe编辑器5、主题响应式布局，不依赖任何响应式框架，采用 Joe 独家响应式6、主题在一切可能暴露的接口上，屏蔽sql注入、xss攻击风险，提供安全保障7、内置超强视频功能、包含直播功能、全网影视功能、文章内插入视频功能8、主题SEO极致优化，Lighthouse SEO跑分彪满100分9、主题色彩全局公用、小白轻松直接修改整站自定义主题色10、主题内置代码高亮、无需借助任何插件、支持200种语言11、主题首发极强画图回复功能，为你的博客带来用户互动，不再像传统博客那样，仅限文字12、主题内置sitemap、百度推送、友联、回复可见等，无需依赖任何插件{/card-default}编辑器演示（编辑器持续更新）下面为主题演示，无需担心您不会怎么写、怎么实现、以下的内容，主题自带编辑器均已集成、直接 插 入即可文本加粗那个女孩子 气喘吁吁 的打电话和你说：我在跑步文本倾斜你问她为什么有 啪啪啪 的声音，她和你说：我是穿拖鞋跑步的文本删除你明白了，此刻的头上正顶着个 率帽子 绿帽子行内代码远上寒山石径斜，白云生处有人家。停车 坐爱 枫林晚，霜叶红于二月花。横线引用那女孩对你说：你还不如跳蛋。有序列表杜蕾斯(durex)的优点如下：耐久（durability）可靠（reliability）优良（excellence）无序列表一个女朋友二个女朋友三个女朋友...N个女朋友卒超链接百度一下，你就凉了图片预览3行3列的表格表头表头表头鸡头鸭头龟头鸡头鸭头龟头鸡头鸭头龟头代码块const obj = { name: 'hi', age: 18 } // 判断某个属性是否在对象里 console.log('name' in obj) // 删除对象某个属性 console.log(delete obj.name) // 将对象的属性名提取成数组 console.log(Object.keys(obj))输出解析HTML 颜色大小 插入一个时间点2021-04-17 20:46:02 星期六段落缩进、空格 有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。 ----李七毛《我们都不擅长告别》特殊符号★ ╊ ➻ Ω... 这里有很多，就不全部演示了，编辑器上有这个按钮，直接 插 入就行了emoji表情这里需要改下数据库的存储格式才支持emoji，这里我没改，演示不了，改的教程网上都有，也很简单图片表情::(花心) :@(喜极而泣) ::(阴险) ୧(๑•̀⌄•́๑)૭... 这里有很多，就不全部演示了，编辑器上有这个按钮，直接 插 入就行了任务未完成{ } 每天都是崭新的一天哦！每天都要开心哦！任务已完成{x} 今天断气嗝屁了。居中标题{mtitle title="牛鞭牛鞭"/}插入一个m3u8或mp4视频（主题自带播发器，你也可以在后台修改成你自己的播放器）{dplayer src="https://cdn.jsdelivr.net/gh/renrenmi/m3u8/唐人街探案3.m3u8"/}插入bilibili视频{bilibili bvid="BV1Ui4y1P78R"/}网易云歌单{music-list id="6800335663" width="100%"/}网易云音乐{music id="1303046498" width="100%" /}多彩按钮下面的实现方式，无需去学习怎么实现，编辑器直接 插 入自定义自己想要的颜色 {abtn color="#409eff"/} 自定义图标，达6000+图标任你使用 {abtn icon="fa-bath"/}自定义圆角度数，最大17.5px {abtn radius="4px"/}搭配在一起任意使用 {abtn color="#409eff" icon="fa-bath" href="" radius="0" content=""/}便条按钮便条按钮不能自定义色彩，必须使用一个图标，其他的的和上面的多彩按钮一样{anote icon="" href="" type="secondary" content=""/}{anote icon="" href="" type="success" content=""/} {anote icon="" href="" type="warning" content=""/} {anote icon="" href="" type="error" content=""/} {anote icon="" href="" type="info" content=""/}彩色虚线{dotted startColor="#ff6c6c" endColor="#1989fa"/}自定义虚线颜色，支持任意颜色{dotted startColor="#1772e8" endColor="#4cd327"/}回复可见隐藏内容，请前往内页查看详情默认卡片自定义宽度的卡片{card-default width="80%"}{/card-default}嵌套其他内容的卡片{card-default label="" width=""}{anote icon="" href="" type="secondary" content=""/}<div></div>猪狗你{/card-default}消息提示{message type="success" content=""/}{message type="info" content=""/}{message type="warning" content=""/}{message type="error" content=""/}附件预览主题自带博客附件预览功能，访问地址：{anote icon="fa-link" href="https://as.js.cn/usr/themes/Joe/library/files.php" type="success" content="点击访问"/}进度条{progress percentage="" color="#ff6c6c"/}自定义颜色{progress percentage="30%" color="#3a9aee"/}标注{callout color="#f0ad4e"}标注内容{/callout}支持嵌入任意内容，及任意颜色{callout color="#ff6800"}表头表头表头表格表格表格表格表格表格表格表格表格<div> hello </div>{/callout}自定义外部音乐{mp3 url="http://mp4.ik123.com/Dj_www.ik123.com/2010//202102%2Fik123_2102A011.mp4?vsid=yd1c4ae18a70c9b3a159d652571fb100mp4&name=www.ik123.com" /}Tabs标签页{tabs}{tabs-pane label="标签一"}<div>啊哈哈哈哈我是大傻逼！</div>{/tabs-pane}{tabs-pane label="标签二"}啊啊啊啊啊！哦哦哦哦哦？哈哈哈哈哈！{/tabs-pane}{/tabs}卡片列表{card-list}{card-list-item} 列表一内容{/card-list-item}{card-list-item} 列表二内容{/card-list-item}{card-list-item} 列表三内容{/card-list-item}{card-list-item} 列表四内容{/card-list-item}{/card-list}时间轴{timeline}{timeline-item color="#19be6b"} 1.0.0版本正式上线{/timeline-item}{timeline-item color="#19be6b"} 更新2.0.0版本{/timeline-item}{timeline-item color="#ed4014"} 删库跑路{/timeline-item}{/timeline}点击复制链接：https://pan.baidu.com/s/14wKBhs4geqSLETvpYhxGZQ 提取码：{copy showText="点击复制" copyText="z451"/}复制这段内容后打开百度网盘手机App，操作更不方便哦描述性卡片{card-describe title="卡片描述"}卡片内容{/card-describe}跑马灯{lamp/}折叠面板{collapse}{collapse-item label="折叠标题一" open} 折叠内容一{/collapse-item}{collapse-item label="折叠标题二"} 折叠内容二{/collapse-item}{/collapse}云盘下载{cloud type="default" url="" password=""/}{cloud type="360" url="" password=""/}{cloud type="bd" url="" password="zk6f"/}{cloud type="ty" url="" password=""/}{cloud type="ct" url="" password=""/}{cloud type="wy" url="" password=""/}{cloud type="github" url="" password=""/}{cloud type="lz" url="" password=""/}宫格3列，间距15px的宫格{gird column="3" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}警告提示{alert type="info"}警告提示{/alert}{alert type="success"}警告提示{/alert}{alert type="warning"}警告提示{/alert}{alert type="error"}警告提示{/alert}注意事项！！！以上全部功能，都无需担心怎么实现，编辑器上有按钮，一键 深入 插入!!!
-
Typecho开启Gzip压缩加速网站 Gzip简介GZip压缩，是一种网站速度优化技术，也是一把SEO优化利器，许多网站都采用了这种技术，以达到提升网页打开速度、缩短网页打开时间的目的。网站采用Gzip压缩，还有一个好处，就是让你少了一份流量超标的担心。因为Gzip开启以后会将输出到用户浏览器的数据进行压缩的处理，这样就会减小通过网络传输的数据量，而这个，也正是提升网页打开时间的原因所在。首先看未开启的效果（本主题为例）从上图可以看到，这个api接口的大小是21kb，请求时间539ms接着开启gzip压缩很明显的可以看到区别，压缩后只有4.5kb大小，并且时间缩短到了99ms，极大的优化了网站速度开启方法打开typecho目录下的 index.php，并在开头添加 ob_start('ob_gzhandler'); 即可。
-
Joe主题实现自动更新 Joe主题更新到5.0.0版本后，因为属于重构版本，所以很多功能没有加上，需要频繁更新，但是每次更新都需要下载，然后删除老版本，在上传新版本，今天群里有个人分享的自动更新教程写的很好，于是我把补充的详细点{mtitle title="START"/}第一步，克隆主题1、首先进入博客的 themes 文件夹下2、点击 终端 按钮，出现一个黑色的窗口3、 在这个窗口内输入以下指令并回车git clone https://github.com/HaoOuBa/Joe.git出现下图的样子，表示成功4、刷新当前页面，会发现多出一个叫 Joe 的目录第二步，设置自动更新主题1、进入宝塔 计划任务 页面2、任务类型选择 Shell 脚本3、任务名称，可以随便写一个，例如我写的是：Joe主题更新4、执行周期，就是多久更新一次，这个可以随便写，例如我设置的是每30分钟检测一次更新5、脚本内容，填写如下，注意需要将网站目录替换成你的#!/bin/sh cd /www/wwwroot/网站目录/usr/themes/Joe git pull完整的设置内容如下第四步，判断是否正常1、上面步骤都完成后，点击这里的 执行2、然后点击 执行 右侧的 日志 按钮，如果内容显示如下，则代表没有任何问题{mtitle title="END"/}
-
Typecho自定义后台编辑器功能 首先看下效果图{message type="info" content="上面的增加按钮很简单，append一个li标签就可以实现，主要是在于向文本框中插入内容，以及输入键盘按键也能实现插入对应的功能。在网上百度了一番，都是互相抄袭，而且也不封装一下，有bug都没人解决，很无奈自己折腾了一个"/}使用方法{message type="warning" content="首先在你的主题 functions.php 里增加一个插件函数，这个函数的用途是在编辑文章和编辑页面里面引入自定义JS"/}Typecho_Plugin::factory('admin/write-post.php')->bottom = array('Editor', 'edit'); Typecho_Plugin::factory('admin/write-page.php')->bottom = array('Editor', 'edit'); class Editor { public static function edit() { echo "<script src='" . Helper::options()->themeUrl . '/typecho/editor/joe.extend.js' . "'></script>"; echo "<script src='" . Helper::options()->themeUrl . '/typecho/editor/joe.editor.js' . "'></script>"; } }下面的 joe.extend.js 没压缩也没加密，下面是 joe.extend.js 源码(function ($) { $.fn.extend({ /* 按键盘实现插入内容 */ shortcuts: function () { this.keydown(function (e) { var _this = $(this); e.stopPropagation(); if (e.altKey) { switch (e.keyCode) { case 67: _this.insertContent('[code]' + _this.selectionRange() + '[/code]'); break; } } }); }, /* 插入内容 */ insertContent: function (myValue, t) { var $t = $(this)[0]; if (document.selection) { this.focus(); var sel = document.selection.createRange(); sel.text = myValue; this.focus(); sel.moveStart('character', -l); var wee = sel.text.length; if (arguments.length == 2) { var l = $t.value.length; sel.moveEnd('character', wee + t); t <= 0 ? sel.moveStart('character', wee - 2 * t - myValue.length) : sel.moveStart('character', wee - t - myValue.length); sel.select(); } } else if ($t.selectionStart || $t.selectionStart == '0') { var startPos = $t.selectionStart; var endPos = $t.selectionEnd; var scrollTop = $t.scrollTop; $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length); this.focus(); $t.selectionStart = startPos + myValue.length; $t.selectionEnd = startPos + myValue.length; $t.scrollTop = scrollTop; if (arguments.length == 2) { $t.setSelectionRange(startPos - t, $t.selectionEnd + t); this.focus(); } } else { this.value += myValue; this.focus(); } }, /* 选择 */ selectionRange: function (start, end) { var str = ''; var thisSrc = this[0]; if (start === undefined) { if (/input|textarea/i.test(thisSrc.tagName) && /firefox/i.test(navigator.userAgent)) str = thisSrc.value.substring(thisSrc.selectionStart, thisSrc.selectionEnd); else if (document.selection) str = document.selection.createRange().text; else str = document.getSelection().toString(); } else { if (!/input|textarea/.test(thisSrc.tagName.toLowerCase())) return false; end === undefined && (end = start); if (thisSrc.setSelectionRange) { thisSrc.setSelectionRange(start, end); this.focus(); } else { var range = thisSrc.createTextRange(); range.move('character', start); range.moveEnd('character', end - start); range.select(); } } if (start === undefined) return str; else return this; } }); })(jQuery);上面的shortcuts方法主要用于实现按下键盘插入内容接着看 joe.edit.js的内容/* 增加自定义功能 */ const items = [ { title: '回复可见', id: 'wmd-hide-button', svg: '<svg t="1612402690962" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15751" width="20" height="20"><path d="M554.666667 438.101333V277.333333h-85.333334v160.768L330.112 357.717333l-42.666667 73.898667L426.666667 512l-139.221334 80.384 42.666667 73.898667L469.333333 585.898667V746.666667h85.333334v-160.768l139.221333 80.384 42.666667-73.898667L597.333333 512l139.221334-80.384-42.666667-73.898667L554.666667 438.101333z" p-id="15752" fill="#9b9b9b"></path></svg>', text: '\n[@hide]这里的内容回复后才能看见[/hide]\n' } ]; items.forEach(_ => { let item = $(`<li class="wmd-button" id="${_.id}" title="${_.title}">${_.svg}</li>`); item.on('click', function () { $('#text').insertContent(_.text); }); $('#wmd-button-row').append(item); });
-
Typecho实现评论显示操作系统和评论来源 {message type="info" content="首先打开 functions.php 文件，粘贴下面的代码" /}// 获取浏览器信息 function getBrowser($agent) { if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) { $outputer = 'Internet Explore'; } else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Firefox/', $regs[0]); $FireFox_vern = explode('.', $str1[1]); $outputer = 'FireFox'; } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Maxthon/', $agent); $Maxthon_vern = explode('.', $str1[1]); $outputer = 'MicroSoft Edge'; } else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) { $outputer = '360 Fast Browser'; } else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Edge/', $regs[0]); $Edge_vern = explode('.', $str1[1]); $outputer = 'MicroSoft Edge'; } else if (preg_match('/UC/i', $agent)) { $str1 = explode('rowser/', $agent); $UCBrowser_vern = explode('.', $str1[1]); $outputer = 'UC Browser'; } else if (preg_match('/QQ/i', $agent, $regs)||preg_match('/QQ Browser\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('rowser/', $agent); $QQ_vern = explode('.', $str1[1]); $outputer = 'QQ Browser'; } else if (preg_match('/UBrowser/i', $agent, $regs)) { $str1 = explode('rowser/', $agent); $UCBrowser_vern = explode('.', $str1[1]); $outputer = 'UC Browser'; } else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) { $outputer = 'Opera'; } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Chrome/', $agent); $chrome_vern = explode('.', $str1[1]); $outputer = 'Google Chrome'; } else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Version/', $agent); $safari_vern = explode('.', $str1[1]); $outputer = 'Safari'; } else{ $outputer = 'Google Chrome'; } echo $outputer; } // 获取操作系统信息 function getOs($agent) { $os = false; if (preg_match('/win/i', $agent)) { if (preg_match('/nt 6.0/i', $agent)) { $os = 'Windows Vista · '; } else if (preg_match('/nt 6.1/i', $agent)) { $os = 'Windows 7 · '; } else if (preg_match('/nt 6.2/i', $agent)) { $os = 'Windows 8 · '; } else if(preg_match('/nt 6.3/i', $agent)) { $os = 'Windows 8.1 · '; } else if(preg_match('/nt 5.1/i', $agent)) { $os = 'Windows XP · '; } else if (preg_match('/nt 10.0/i', $agent)) { $os = 'Windows 10 · '; } else{ $os = 'Windows X64 · '; } } else if (preg_match('/android/i', $agent)) { if (preg_match('/android 9/i', $agent)) { $os = 'Android Pie · '; } else if (preg_match('/android 8/i', $agent)) { $os = 'Android Oreo · '; } else { $os = 'Android · '; } } else if (preg_match('/ubuntu/i', $agent)) { $os = 'Ubuntu · '; } else if (preg_match('/linux/i', $agent)) { $os = 'Linux · '; } else if (preg_match('/iPhone/i', $agent)) { $os = 'iPhone · '; } else if (preg_match('/mac/i', $agent)) { $os = 'MacOS · '; }else if (preg_match('/fusion/i', $agent)) { $os = 'Android · '; } else { $os = 'Linux · '; } echo $os; }{message type="warning" content="comments.php 中找到合适位置（比如评论作者的后面）添加以下代码" /}<?php getOs($comments->agent); ?><?php getBrowser($comments->agent); ?>
