主题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>
调用
在文章内加入
这行就会生成目录
少时诵诗书所