搜索到
31
篇与
的结果
-
Joe主题自定义搭配色教程 本文转载于 Joe主题自定义搭配色教程 -Jeo的博客 - HaoOuBa今天看到每个使用本站主题的用户，全部用的都是主题默认样式，如何自定义一套自己的色彩风格？此篇文章适合非常非常白的小白（萌新）阅读，不适用于大佬前言本篇教程无任何技术类的知识，只需对颜色有些了解即可！第一步打开主题外观设置 - 全局设置 - 自定义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主题友情链接卡片高度不一致 我们都知道Joe主题里面的友情链接卡片介绍的字数多了之后它就会换行直到把卡片撑满，如果字数不多的话还是正常的，所以要解决这一问题，我们就要先从css入手。首先我们看一下未修复前，友情链接卡片介绍字数多的效果修复教程1.找到你网站的以下路径： usr/themes/Joe/assets/css 找到 joe.global.min.css 文件并打开，搜索： desc{margin-right:10px} 关键词2.搜索之后会出现 desc{margin-right:10px} ，我们需要在出现的 desc{margin-right:10px} 里面加入以下代码;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;3.把上述代码加在我们搜索到的关键词中 10px;的后面（添加完成后如下方所示）.desc{margin-right:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} 4.保存 joe.global.min.css 文件，清理缓存并刷新友情链接页面，可以看到和之前明显的变化就是多出的字就是用省略号表示了，如下图所示这样的话就做到了高度和宽度都是统一的卡片了
-
Joe主题为头像添加呼吸灯 效果图登陆网站后台 - 主题设置 - 全局设置 - 自定义增加<head></head>里内容（非必填），将下列代码放置其中并保存设置<style> /*头像呼吸光环和鼠标悬停旋转放大*/ .avatar { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .avatar:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;} } </style>
-
如何让Joe主题实现logo扫光效果 效果图登录网站后台 - 主题设置 - 全局设置 - 自定义CSS（非必填），将下列代码放置其中并保存设置.joe_header__above-logo{ overflow:hidden; display: block; } .joe_header__above-logo:before { content: ""; position: absolute; top: -50px; left: -15px; width: 250px; height: 12px;/**光标的宽度，可根据实际调整（建议默认）**/ background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: flashlights 1s ease-in 1s infinite; -o-animation: flashlights 1s ease-in 1s infinite; animation: flashlights 1.5s ease-in 1s infinite;/**1.5数字参数控制扫光速度，数字越大越慢，默认也是可以的。**/ } @-webkit-keyframes flashlights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } @-o-keyframes flashlights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } @-moz-keyframes flashlights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } @keyframes flashlights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } }
-
Typecho实现评论时自动随机输入一条评论功能 {mtitle title="第一步"/}修改 core/function.php打开function.php文件，找到下方代码function _getVersion() { return "7.7.1"; };将以下代码复制粘贴到后边function random_comment() { $comments = array('对小白真的很友好，写的很全面', '终于找到这篇文章了，感谢作者的分享', '喜欢这篇文章，作者666，文章真棒', '支持博主，一定多分享', '这篇文章写的真不错，真详细，点个赞', '这篇文章肯定会火，作者666大顺', '受益匪浅，感谢博主', '学习到了，感谢博主'); return $comments[rand(0,count($comments)-1)]; }{mtitle title="第二步"/}修改 public/comment.php打开comment.php文件找到下方代码（在第33行左右），将下方代码<textarea class="text joe_owo__target" name="text" value="" autocomplete="new-password" placeholder="说点什么吧，点击右上方切换成画图试试？"></textarea>替换为以下代码<textarea class="text joe_owo__target" name="text" value="" autocomplete="new-password" placeholder="说点什么吧，点击右上方切换成画图试试？"><?php echo random_comment(); ?></textarea>
-
给Typecho更换utf8mb4字符集以支持Emoji表情 Typecho默认使用的是UTF8字符集，仅占用3字节，这样就不能支持最新的Emoji扩展字符。这次给Typecho更新字符集，每个字占用4字节，就可以正常存储Emoji了。准备MySQL 5.5.3或更高或MariaDB 10.0或更高为方便起见，可以使用GUI：phpMyAdmin 4.3或更高更新SQL配置修改 my.cnf 配置文件，在各项之下加入[client] default-character-set = utf8mb4 [mysql] default-character-set = utf8mb4 [mysqld] character-set-server = utf8mb4 collation-server = utf8mb4_unicode_ci保存后重载配置或重启服务即可。检查数据库变量进入数据库终端，执行SHOW VARIABLES WHERE Variable_name LIKE 'character_set_%' OR Variable_name LIKE 'collation%';不出所料会得到以下结果：character_set_client utf8mb4 character_set_connection utf8mb4 character_set_database utf8mb4 character_set_filesystem binary character_set_results utf8mb4 character_set_server utf8mb4 character_set_system utf8 collation_connection utf8mb4_unicode_ci collation_database utf8mb4_unicode_ci collation_server utf8mb4_unicode_ci更新数据表进入数据库终端，执行更新数据库ALTER DATABASE <database_name> CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;其中， <database_name> 更换为你的数据库名。更新数据表ALTER TABLE <table_name> CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;其中， <table_name> 更换为你的数据库表名。Typecho可以参照以下语句（默认表前缀是 typecho_ ）：ALTER TABLE typecho_comments CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; ALTER TABLE typecho_contents CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; ALTER TABLE typecho_fields CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; ALTER TABLE typecho_metas CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; ALTER TABLE typecho_options CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; ALTER TABLE typecho_relationships CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; ALTER TABLE typecho_users CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;修改Typecho配置编辑 config.inc.php 文件，将数据库 charset 改成 utf8mb4 即可。
-
Typecho博客自定义右键 前言简单来说就是花里胡哨，没别的意思，看着喜欢就拿去效果截图第一步：复制下列代码,引入 layer.js<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>第二步：依次进入控制台 – 外观 – 设置外观 – 自定义 <body></body> 末尾位置内容（非必填），将以下代码加入到自定义 <body></body> 末尾位置内容（非必填），部分内容自行修改即可。<!-- 自定义右键菜单美化 --> <style type="text/css"> a {text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;} div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block} div.usercm ul li{margin:0px;padding:0px;line-height:35px;} div.usercm ul li a{color:#666;padding:0 15px;display:block} div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)} div.usercm ul li a i{margin-right:10px} a.disabled{color:#c8c8c8!important;cursor:not-allowed} a.disabled:hover{background-color:rgba(255,11,11,0)!important} div.usercm{background:#fff !important;} </style> <div class="usercm" style="left: 199px; top: 5px; display: none;"> <ul> <li><a href="http://www.lyx6.com/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li> <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li> <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li> <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li> <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li> <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li> <li><a href="https://www.lyx6.com/"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li> </ul> </div> <script type="text/javascript"> (function(a) { a.extend({ mouseMoveShow: function(b) { var d = 0, c = 0, h = 0, k = 0, e = 0, f = 0; a(window).mousemove(function(g) { d = a(window).width(); c = a(window).height(); h = g.clientX; k = g.clientY; e = g.pageX; f = g.pageY; h + a(b).width() >= d && (e = e - a(b).width() - 5); k + a(b).height() >= c && (f = f - a(b).height() - 5); a("html").on({ contextmenu: function(c) { 3 == c.which && a(b).css({ left: e, top: f }).show() }, click: function() { a(b).hide() } }) }) }, disabledContextMenu: function() { window.oncontextmenu = function() { return !1 } } }) })(jQuery); function getSelect() { "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy") } function baiduSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a) } $(function() { for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) { d = !1; break } d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu()) }); </script>
-
多个Typecho站点共享同一用户数据库 本人看到聊天群里面有人发多个Typecho站点共享同一用户数据库然后我就百度了一下就发现是可以实现的，跟我的想法差不多。思路直接修改typecho用户表路径（table.users）。而为了不出错， 我们原则上对Typecho进行最小改动。此外我们要知道，Typecho支持多种数据库adaptor：MysqlMysqliMysql PDOPgSqlSQLLite教程第一步在这里首先需要找到对应Adaptor的对应路径：[Typecho根目录]/var/Typecho/Db/如果博客用的是Mysql就看mysql.php， PDO就看pdo.php，我们这里使用的是PDO Adaptor为例。第二步在145行处（如果没有这个文件或没有这行可跳过）public function parseSelect(array $sql) { if (!empty($sql['join'])) { foreach ($sql['join'] as $val) { list($table, $condition, $op) = $val; $sql['table'] = "{$sql['table']} {$op} JOIN {$table} ON {$condition}"; } } $sql['limit'] = (0 == strlen($sql['limit'])) ? NULL : ' LIMIT ' . $sql['limit']; $sql['offset'] = (0 == strlen($sql['offset'])) ? NULL : ' OFFSET ' . $sql['offset']; return 'SELECT ' . $sql['fields'] . ' FROM ' . $sql['table'] . $sql['where'] . $sql['group'] . $sql['having'] . $sql['order'] . $sql['limit'] . $sql['offset']; }第三步public function parseSelect(array $sql) { //添加这一行 //主数据表就是需要使用的数据表， 从数据表就是本来默认自行创建的用户数据表。 //这里需要带前缀， 具体数据表名字要到数据库里去看。 if($sql['table'] == '###从数据表###') { $sql['table'] = '###主数据表###'; } if (!empty($sql['join'])) { foreach ($sql['join'] as $val) { list($table, $condition, $op) = $val; $sql['table'] = "{$sql['table']} {$op} JOIN {$table} ON {$condition}"; } } $sql['limit'] = (0 == strlen($sql['limit'])) ? NULL : ' LIMIT ' . $sql['limit']; $sql['offset'] = (0 == strlen($sql['offset'])) ? NULL : ' OFFSET ' . $sql['offset']; return 'SELECT ' . $sql['fields'] . ' FROM ' . $sql['table'] . $sql['where'] . $sql['group'] . $sql['having'] . $sql['order'] . $sql['limit'] . $sql['offset']; }第四步对 [Typecho根目录]/var/Typecho/Db/Pdo/Mysql.php 进行第三步同样的操作。第五步到这一步位置， 用户表已经替换掉了， 但是还是无法登录， 因为用户表里的authCode不属于这个站点， 会造成问题。 因此我们找到：[Typecho根目录]/var/Widget/User.php这一文件， 打开并修改： 第146行：$user['authCode'] = $authCode;替换为（也可以注释掉在下方添加）：$authCode = $user['authCode'];结束终结按照这个步骤是可以实现滴，这个步骤改一下也可以实现多样化玩法自己研究吧！
-
-
如何让Joe主题实现半透明 在Joe主题，全局设置 → 自定义css粘贴下面这个代码body { --background: rgba(255,255,255,0.8) }其中 0.8 表透明度，这个值越低，其越透明这个 0.8 只是我加上的数值，同理：如果想半透明，只需把 0.8 改为 0.5body { --background: rgba(255,255,255,0.5) }body { --background: rgba(255,255,255,0.5) }如果想完全透明，只需把 0.8 改为 0.0 就好了body { --background: rgba(255,255,255,0.0) }
