舰娘漂流——「翻滚吧舰娘！」，火喵修改完善版
前言说起来这个「翻滚吧舰娘！」，最早是来自萌购的页面底部，但是一直也没去用它。后来看到大鹅的博客主页有这个漂流舰娘，也在许多其他人的博客上看到过，但是那会不会呀，觉得老有难度了。后来大鹅用了好久，也鸽了好久。近期我打算把博客改成航海主题（误 ，但是寻找大鹅博客时发现几个月前就换掉了！ （╯‵□′）╯︵┴─┴ 好在大鹅找到了源码，发给了我w当我打开源码，发现了有好几处的bug，比如小窗口拖拽有问题啦，经常会自动消失啊等等。于是在大鹅的建议下，在github上找到了原搬运作者（貌似），一看已经是八年前的东西了，那会还是用的jquery1.7.1的老古董。为了能用上这个特效，喵喵折腾了整整一晚上，游戏都没打 (｡•ˇ‸ˇ•｡) ，现在改成可以用最新的jquery3.6.0，而且修复了bug，还加上了消失循环，总之是非常完美了，可以直接移植拿去用hhh代码最近打算整整微信公众号，也无意间发现了有个关注公众号回复解密可见的小插件，本打算这次用上，但是想想，博客互动还是很重要的，就暂时不用了，以后再说吧~ 但是但是，点击左上方侧边栏的33娘，就可以关注火喵小站的公众号啦（虽然公众号暂时什么都没有，但是不介意的话还是期待能关注一下w）主体html<link rel="stylesheet" type="text/css" href="kancolle.css" />
<div class="kankore-bath">
<div style="animation: 10s linear 0s normal none infinite waves-r2l;" class="water">
</div>
<div class="kan" href="javascript:;">
<img src="https://static01.imgkr.com/temp/545d56b5fe9d49ea82e0b6fcb6cc99e0.webp">
</div>
<div class="kan" href="javascript:;">
<img src="https://static01.imgkr.com/temp/2a7dc137b56a410594ef3322cbfedba7.webp">
</div>
<div class="kan" href="javascript:;">
<img src="https://static01.imgkr.com/temp/624d47381074406f9b95bec6318b1ad1.webp">
</div>
<div class="kan" href="javascript:;">
<img src="https://static01.imgkr.com/temp/f1699778e2b644169827d166c6acd581.webp">
</div>
<div class="kan" href="javascript:;">
<img src="https://static01.imgkr.com/temp/ce90cf778eb148cb9599e1b5dfbbf280.webp">
</div>
<div class="kan" href="javascript:;">
<img src="https://static01.imgkr.com/temp/ccee2dcf304e4ded8f6e4805d01fba57.webp">
</div>
</div>
<script type="text/javascript" src="kancolle.js"></script>找一个合适的位置，把html代码选取需要，拆开放置，也可以复制到新文件查看效果。图片建议换成本地图片保存，以防图片失效。如果网站没有引入过jquery，需要在开头插入一行引入代码<script type="text/javascript" src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>相关csscss没怎么动，但是精简了一点，注意里面的图片的地址，和舰娘的一样，建议换成本地图片保存，以防图片失效（也可以下载文章最后的打包，里面有图片）{alert type="info"}新建文件，起名kancolle.css（可自己换个），放入与html同级目录{/alert} - 隐藏内容 - 相关js{alert type="info"}新建文件，起名kancolle.js（可自己换个），放入与html同级目录{/alert} - 隐藏内容 - 打包 - 隐藏内容 -
网站被首次访问时，显示独立弹窗信息
标题起的很简短，其实就是根据记录的cookie，在每次新用户访问站点的时候，弹出一次性的公告，免去每次刷新页面都会出现是尴尬。这之前也是在别人站点看到的，用了一段时间，现在分享给大家另外说一句，最近好多人都来扒站，虽然我没说什么，也制止不了，简单的东西你说什么剽窃也有些小题大做，但是心里总归是很难受，毕竟是一点一点抠出来的东西。扒了就扒了，但是扒了之后改个颜色换换样式，文字内容也针对改改，写心得时提提火喵的名字，给小站引引流，我也就很感谢了。实际效果方法这个是通用的教程，任何html+css+js的博客都可以使用。html首先要知道，一般访问博客都是先从主页访问，所以我们这个代码就添加在主页文件（index.html）中即可。若是你觉得首次访问的内页也要显示的话，那就放在页面顶部（header.html）就好了。在<body>标签内合适的位置添加： - 隐藏内容 - 如果显示 不正常，先确认有没有重复的样式明或id，对应修改即可。对于csscss这个没什么好说的，每个人审美不同，想要的样式也不同。为了修改方便，我贴出本站现在用的样式 - 隐藏内容 - javascriptjs这个文件也是放在哪里就好了。 - 隐藏内容 -
JOE主题添加全屏头图显示（通用）
最近也是经常有小伙伴问我，全屏的头图怎么做。因为之前我用的是图片，后来改成了视频，但是视频的文件我已经修改了很多牵扯到自定义的部分，不能通用，我现在就从备份中扒出来之前的那份纯图片的文件，现在整理一下分享给大家文件的大部分内容是从一个国外的免费模板扒的，但是找不到出处了。2021年11月自查发现，当年不是很懂代码，杂余垃圾较多，可以自行取舍，我就懒得搞了 |´・ω・)ノ参考因为我已经把图片换成了视频了，图片没办法参考我的网站了，各位可以参考使用本方案的 这个链接 （已失效），来查看效果css内容如下： - 隐藏内容 - html需创建一个html文件，填入以下内容 - 隐藏内容 - 引入字体这一步如不需要可以省略<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico|Inconsolata:400,700">引入至主题将上述内容整合成一个html，假设命名为lalala.html定位到主题的index.php文件，在适当位置引入html，比如查找定位<?php $this->need('public/header.php'); ?>，在其下方引入：<?php
include ("public/lalala.html");
?>将lalala.html放在public文件夹下即可追加-注意如不清楚如何整合，可以下载我整理好的html文件，直接引入即可（上面的前三项都不用看了）： - 隐藏内容 - {card-describe title="已知问题："}和侧边栏的3D标签云共用可能会产生bug，建议关闭侧边栏的3D标签云。{/card-describe}
使用API，为博客添加“随机一篇美文”的功能
上一次，我们是用ALPAI制作了 首页显示新闻早报API，可每日更新 的功能，这一次将随机一篇美文也放出来方法，效果可以参考下图。方法很简单，如果你有之前调用新闻早报的经验，那么这次会非常简单~效果图方法这次也选择ALPAI，随机美文的网址在这里：https://alapi.cn/api/view/36方法和新闻早报的方法一样，可以去翻看之前的文章。需要注意的是，这次也同样从\usr\themes\Joe复制出一份page.php，并在头部添加<?php
/**
* 每日一文
*
* @package custom
*
**/
?>将内部<?php $this->need('public/article.php'); ?>代码替换成api的示例代码，别忘了换token在$err = curl_error($curl);下添加一行$a=json_decode($response,true);效果为：$err = curl_error($curl);
$a=json_decode($response,true);将echo $response;替换为以下代码 - 隐藏内容 - 保存（具体图片可参考上期）后台新建页面，假设自定义的地址是readnews.html，模板选择每日一文查看新页面是否显示正常注意事项之前写的注意事项总有人不看，再写一遍——修改前记得备份不显示文章记得查看是否更改token，可查看图片中token形式。结尾的?>是否忘记跳转错误记得修改成自己的内页链接
joe主题首页添加夹子装饰
前言步骤添加图片定位到\usr\themes\Joe\assets\js\joe.index.min.js在第大概28行添加 - 隐藏内容 - 添加样式随便创建一个css，写入以下内容，记得要在include.php引用 - 隐藏内容 - 大功告成啦！！图片样式图片位置可以替换成自己喜欢的图片默认图片大小30x170，其中有图的中心内容30x130，上下留白各20px，以下素材可以自行替换如果你有更好看的样式欢迎分享样式图片作者链接档案夹火喵/猫猫爪HYTNHYTN.TOP猫爪书签HYTNHYTN.TOP
好看的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>提示框美化css代码/* 特殊字体 */
@font-face {
font-family: 'Font Awesome 5 Free';
src: url('https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.1/webfonts/fa-solid-900.woff2') format('woff2');
}
/*提示栏样式*/
.tip {
position: relative;
color: #fff;
background: #20a0ff;
background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
background: linear-gradient(90deg,#20a0ff,#20b8ff);
padding: 6px 20px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
box-shadow: 0 3px 5px rgba(32,160,255,.5);
margin-bottom: 20px;
}
.tip.success {
background: #61be33;
background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
background: -webkit-linear-gradient(left,#61be33,#8fce44);
background: linear-gradient(90deg,#61be33,#8fce44);
text-shadow: 0 -1px #61be33;
-webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5);
box-shadow: 0 3px 5px rgba(104,195,59,.5);
}
.tip.error {
background: #ff4949;
background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
background: -webkit-linear-gradient(left,#ff4949,#ff7849);
background: linear-gradient(90deg,#ff4949,#ff7849);
text-shadow: 0 -1px #ff4949;
-webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
box-shadow: 0 3px 5px rgba(255,73,73,.5);
}
.tip.warning {
background: #ff953f;
background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
background: -webkit-linear-gradient(left,#ff953f,#ffb449);
background: linear-gradient(90deg,#ff953f,#ffb449);
text-shadow: 0 -1px #ff953f;
-webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
box-shadow: 0 3px 5px rgba(255,154,73,.5);
}
.tip:before {
background: #20a0ff;
background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
background: linear-gradient(0deg,#0092ff,#20b8ff);
border-radius: 50%;
color: #fff;
content: "\f129";
font-size: 12px;
position: absolute;
width: 24px;
height: 24px;
line-height: 24.5px;
left: -12px;
top: -12px;
-webkit-box-shadow: 0 0 0 2.5px #fff;
box-shadow: 0 0 0 2.5px #fff;
font-weight: 600;
font-family: "Font Awesome 5 Free";
text-align: center;
}
.tip.success:before {
background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
background: linear-gradient(0deg,#52bb1d,#95d34b);
content: "\f00c";
text-shadow: 0 -1px #61be33;
}
.tip.error:before {
background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
background: linear-gradient(0deg,#ff3838,#ff7849);
content: "\f00d";
text-shadow: 0 -1px #ff4949;
}
.tip.warning:before {
background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
background: linear-gradient(0deg,#ff8f35,#ffc149);
content: "\f12a";
text-shadow: 0 -1px #ff953f;
}
