搜索到
36
篇与
的结果
-
-
浅写joe主题美化记录 主题css修改/*主题css设计*/ body { --theme: #ff6800; --background: rgba(255,255,255,0.55); --main: #303133; --routine: #606266; --minor: #909399; --seat: #c0c4cc; --classA: #dcdfe6; --classB: #e4e7ed; --classC: #ebeef5; --classD: #f2f6fc; --radius-wrap: 12px; --radius-inner: 8px; --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22); }描述--theme: #409eff;--theme 冒号后面的是颜色的色彩值，这个色彩值可以用常见的颜色格式。例如 #ff6800、rgba(0,0,0,1) 等等都可以明白上面的意思后，接下来对上面的每个属性做一个描述--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_container{ max-width: 1260px; }描述1260px是宽度可进行调节头像呼吸灯/*头像呼吸光环和鼠标悬停旋转放大*/ .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;} }描述全部头像发出呼吸灯 自定义鼠标右键<!-- 调用js --> <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script> <!-- 自定义右键菜单美化 --> <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="https://www.wxword.cn/"><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.wxword.cn/links.html"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li> <li><a href="https://www.wxword.cn/word.html"><i class="fa fa-pencil-square-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>描述自定义js 底部美化footer文件 <!-- 好久不见 --> <div class="chenyuyc"> <div class="footer-fav"> <div class="container"> <div class="fl site-info"> <h2><a href="https://www.wxword.cn/" target="_blank">忘心博客</a></h2> <div class="site-p"> <p>忘心【听闻远方有她，便策马扬鞭万里！】</p> </div> <div class="fr site-fav"> <a href="https://www.wxword.cn/" class="btn btn-fav btn-orange">Ctrl+D收藏本站</a></div> </div> <div class="site-girl"> <div class="girl fl"> <i class="thumb " style="background-image:url(https://cdn.jsdelivr.net/gh/cy-j/chenyu/img/cyxy.png);"></i> </div> <div class="girl-info hide_md"> <h4>绿水本无忧，因风皱面</h4> <h4>青山原不老，为雪白头</h4> </div> </div> </div> </div> </div> header文件<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cy-j/chenyu@1.6.0/css/cydibu.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cy-j/chenyu/css/bootstrap-grid.min.css">描述美化框添加自定义css#zm_mhz,#zm_xgh,#zm_tkzj,#zm_xyz,#zm_gll ,#zm_xty,#zm_yyz,#zm_szh,#zm_wbk{ /*圆角值,在此定义*/ border-radius: 8px; } /*迷幻紫*/ #zm_mhz{ color: #555555; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(190, 196, 252), -6px 0 12px -5px rgb(189, 196, 252); background-color: #8EC5FC; background-image: linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%); background-image: -webkit-linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%); } /*西瓜红*/ #zm_xgh{ color: #555555; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(255, 176, 172), -6px 0 12px -5px rgb(255, 161, 174); background-color: #ff9a8b66; background-image: linear-gradient(220deg,#FF9A8B 0%,#ff6a8838 55%,#FF99AC 100%); background-image: -webkit-linear-gradient(220deg,#ff9a8b7a 0%,#ff6a88ab 55%,#ff99ac82 100%); } /*华为P30 天空之境*/ #zm_tkzj { color: #555555; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243); background-color: #FFDEE9; background-image: linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); background-image: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); } /*小宇宙*/ #zm_xyz { color: #eeeeee; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(12, 85, 141), -6px 0 12px -5px rgba(10, 58, 93, 0); background-image: radial-gradient( circle 263px at 100.2% 3%, rgba(12,85,141,1) 31.1%, rgba(205,181,93,1) 36.4%, rgba(244,102,90,1) 50.9%, rgba(199,206,187,1) 60.7%, rgba(249,140,69,1) 72.5%, rgba(12,73,116,1) 72.6% ); } /*橄榄绿*/ #zm_gll { color: #eeeeee; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(68, 110, 92), -6px 0 12px -5px rgb(204, 212, 163); background-image: linear-gradient( 102deg, rgba(68,110,92,1) 17.4%, rgba(107,156,120,1) 49.3%, rgba(154,183,130,1) 83.4%, rgba(247,237,191,1) 110.3% ); } /*小太阳*/ #zm_xty { color: #ffffff; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; /*border-radius: 10px; */ box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243); background-image: radial-gradient( circle farthest-corner at -8.9% 51.2%, rgba(255,124,0,1) 0%, rgba(255,124,0,1) 15.9%, rgba(255,163,77,1) 15.9%, rgba(255,163,77,1) 24.4%, rgba(19,30,37,1) 24.5%, rgba(19,30,37,1) 66% ); } /*优雅紫*/ #zm_yyz { color: #ffffff; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(175, 160, 208), -6px 0 12px -5px rgba(177, 161, 207, 0); background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(95,117,227,1) 0%, rgba(188,167,205,1) 90% ); } /*深邃黑*/ #zm_szh { color: #c7c7c7; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; /*border-radius: 5px;*/ box-shadow: 6px 0 12px -5px rgb(155, 170, 185), -6px 0 12px -5px rgba(177, 161, 207, 0); background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(0,0,0,1) 0%, rgba(64,64,64,1) 90.2% ); } /*无边框*/ #zm_wbk { color: #000000; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; } #zm_xyz a , #zm_gll a{ color: #eeeeee; } #zm_szh a{ color: #c7c7c7; } #zm_xty a, #zm_yyz a{ color: #ffffff; }## 描述 ## 调用方法：<div id="zm_mhz"> 迷幻紫</div> <div id="zm_xgh"> 西瓜红</div> <div id="zm_tkzj">天空之境</div> <div id="zm_xyz">小宇宙</div> <div id="zm_gll">撖榄绿</div> <div id="zm_xty">小太阳</div> <div id="zm_yyz">优雅紫</div> <div id="zm_szh">深邃黑</div> <div id="zm_wbk">无边框</div>复制时提示版权post文件<!--版权声明--> <script> document.body.addEventListener('copy', function (e) { if (window.getSelection().toString() && window.getSelection().toString().length > 10) { setClipboardText(e); } }); function setClipboardText(event) { var clipboardData = event.clipboardData || window.clipboardData; if (clipboardData) { event.preventDefault(); var htmlData = '' + '著作权归作者所有。<br>' + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>' + '作者：<?php $this->author() ?><br>' + '链接：' + window.location.href + '<br>' + '来源：<?php $this->options->siteUrl(); ?><br><br>' + window.getSelection().toString(); var textData = '' + '著作权归作者所有。\n' + '商业转载请联系作者获得授权，非商业转载请注明出处。\n' + '作者：<?php $this->author() ?>\n' + '链接：' + window.location.href + '\n' + '来源：<?php $this->options->siteUrl(); ?>\n\n' + window.getSelection().toString(); clipboardData.setData('text/html', htmlData); clipboardData.setData('text/plain',textData); } } </script>描述实现友链自动检测修改friends.php文件第一处<?php $max_allow_links = 100; // 最大许可检查的链接数目 function my_file_get_contents($url, $timeout = 30) { if (function_exists('curl_init')) { $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout); $file_contents = curl_exec($ch); curl_close($ch); } else if (ini_get('allow_url_fopen') == 1 || strtolower(ini_get('allow_url_fopen')) == 'on') { $file_contents = @file_get_contents($url); } else { $file_contents = ''; } return $file_contents; } function isExistsContentUrl($url, &$retMsg, $mydomain = "") { if (!isset($url) || empty($url)) { $retMsg = "配置URL为空"; return false; } if (!isset($mydomain) || empty($mydomain)) { $mydomain = $_SERVER['SERVER_NAME']; } $resultContent = my_file_get_contents($url); if (trim($resultContent) == '') { $retMsg = "网站无法访问"; return false; } if (strripos($resultContent, $mydomain)) { $retMsg = "友链正常"; return true; } else { $retMsg = "未添加本站"; return false; } } ?>第二处$friendsUrl = explode("||", $friends_arr[$i])[4]; if($friendsUrl) { $friends[] = array("name" => trim($name), "url" => trim($url), "avatar" => trim($avatar), "desc" => trim($desc), "friendsUrl" => trim($friendsUrl)); } else { $friends[] = array("name" => trim($name), "url" => trim($url), "avatar" => trim($avatar), "desc" => trim($desc), "friendsUrl" => trim($url)); } ### 第三处 ### <span class="title" style="float: right;<?php if(Helper::options()->JFriendsSwitch !== 'on') echo 'display:none;' ?>"> <?php if(Helper::options()->JFriendsSwitch !== 'off') { $result = ""; $ret = isExistsContentUrl($item['friendsUrl'], $result, null); echo $result; } ?> </span>修改functions.php文件$JFriendsSwitch = new Typecho_Widget_Helper_Form_Element_Select( 'JFriendsSwitch', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '是否开启友链检测功能', '介绍：开启后友链界面可以自动检测对方站点是否添加本站友链' ); $JFriendsSwitch->setAttribute('class', 'joe_content joe_other'); $form->addInput($JFriendsSwitch->multiMode()); $JFriends = new Typecho_Widget_Helper_Form_Element_Textarea( 'JFriends', NULL, 'Joe的博客 || https://78.al || https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/assets/img/link.png || Eternity is not a distance but a decision || 友链页面地址（可不填写）', '友情链接（非必填）', '介绍：用于填写友情链接 <br /> 注意：您需要先增加友联链接页面（新增独立页面-右侧模板选择友联），该项才会生效 <br /> 格式：博客名称 || 博客地址 || 博客头像 || 博客简介 || 友链页面地址 <br /> 其他：一行一个，一行代表一个友联' ); $JFriends->setAttribute('class', 'joe_content joe_other'); $form->addInput($JFriends); # 文章目录插件及样式修改 # ### 插件下载 ###隐藏内容，请前往内页查看详情CSS样式修改新建css文件，然后在include.php中引入/*文章目录样式,针对joe7主题修改*/ .index-menu { width: 250px; position: fixed; top:120px; left:30px; background: var(--background); border-radius: var(--radius-wrap); box-shadow: var(--box-shadow); max-height:600px; overflow-y:auto; } .index-menu-link{ color: var(--main); text-shadow: var(--text-shadow); } .index-menu-list{ margin-bottom:10px!important; margin-top:5px!important; } @media screen and (max-width:1900px) { .index-menu{ display:none; } }文章内调用修改 \admin\write-post.php 或 write-page.php 内，想要的位置添加代码位置自由调节<section class="typecho-post-option"> <label class="typecho-label"><?php _e('文章目录 <!-- index-menu -->'); ?></label> </section>调用在文章内加入 这行就会生成目录
-
-
-
-
