首页
网站文档
素材技术
Typecho
闲言碎语
各类源码
网站源码
闪念笔记
朋友圈
留言板
关于我
赞助榜
更多
恋爱日记
站点导航
精选壁纸
站点统计
测试输出
关键词搜索
搜索
标签搜索
网站美化
网站源码
Joe
css
Typecho
恋爱
api
js
饭后茶余
诗句
ip属地
近期浏览
热门文章
1
Joe主题 给首页和文章页顶部加一个大图
2,235 阅读
2
分享自己搭建的API 头像源丶背景图片丶随机一言
1,656 阅读
3
Xc主题 全量文件 更新历史
1,631 阅读
4
Joe主题 更换评论框样式，填写QQ自动获取昵称邮箱
1,119 阅读
5
干净个人主页html源码
951 阅读
6
Joe主题 标题导航栏合并教程
929 阅读
7
搭建一个属于自己的api随机图教程
842 阅读
8
Emoji 可复制静态表情符号
712 阅读
9
Joe主题修复几个部分字体不渲染的问题
621 阅读
狱长
Xc主题 交流QQ群：
751620634
狱长
昨天 18:57
在线
累计撰写
40
篇文章
累计收到
821
条评论
首页
栏目
网站文档
素材技术
Typecho
闲言碎语
各类源码
网站源码
页面
闪念笔记
朋友圈
留言板
关于我
赞助榜
恋爱日记
站点导航
精选壁纸
站点统计
测试输出
用户登录
登录
注册
“网站美化” 共(19)篇
title标签输出美化
alt和title提示美化，jquery的特效，记录一次美化美化教程效果图： 教程也很简单，创建一个js和一个css引用到网站即可，这里就不教怎么引用了，很多文章都写过教程第一步 创建一个js文件 把以下内容放进去var sweetTitles = { x: 10, y: 20, tipElements: "a,span,img,div ", noTitle: false, init: function() { var b = this.noTitle; $(this.tipElements).each(function() { $(this).mouseover(function(e) { if (b) { isTitle = true } else { isTitle = $.trim(this.title) != '' } if (isTitle) { this.myTitle = this.title; this.title = ""; var a = "<div class='Xc_title'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='Xc_title_inside'>" + this.myTitle + "</div></div>"; $('body').append(a); $('.Xc_title').css({ "top": (e.pageY + 20) + "px", "left": (e.pageX - 20) + "px" }).show('fast') } }).mouseout(function() { if (this.myTitle != null) { this.title = this.myTitle; $('.Xc_title').remove() } }).mousemove(function(e) { $('.Xc_title').css({ "top": (e.pageY + 20) + "px", "left": (e.pageX - 20) + "px" }) }) }) } }; $(function() { sweetTitles.init() });第二步 创建一个css文件 把以下内容放进去.Xc_title{font-size:13px;position:absolute;padding:10px;z-index:100000;opacity:.8;font-family:Microsoft Yahei} .tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:0px dashed #000;top:4px;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:0;border-left-color:transparent;border-right-color:transparent} .tipsy-arrow-n{border-bottom-color:#232323e0} .Xc_title_inside{background-color:#000000e3;color:#FFF;max-width:350px;padding:8px 8px 8px 8px;border-radius: 10px;text-align:center;border-radius:5px}
2022年12月29日
162
5
4
给网站加一个背景颜色渐变效果
效果图 可以在任意网站使用，这里就以Joe主题做教程以下代码加入到全局设置-自定义CSS里即可，180是角度，上下渐变，或者左右渐变自己调body::before { background: linear-gradient(180deg, #fed6e3, #c0efec) ; }方法二：放在header 或者footer，或者后台的自定义css填写框里<style>body::before { background: linear-gradient(180deg, #fed6e3, #c0efec) ; }</style>
2022年11月28日
316
9
2
Joe主题 对接腾讯位置服务 展示IP属地
Joe主题 对接腾讯位置服务 展示IP属地第一步：注册账号打开腾讯位置服务官网，点击登录，直接使用QQ登录或微信登录即可。第二步：创建应用打开控制台，左侧有一个应用管理，创建应用，应用名称丶应用类型随意选。第三步：添加Key这时候我们选择 WebService API 服务即可，选择后有三种方案，域名白名单、授权 IP、签名校验，一般我们会部署在服务器上，所以可以选择授权 IP，这样方便一些；域名白名单和签名校验限制有些多，且我们这次对接博客也是以授权 IP 为主。 添加后我们就能拿到一个 Key，下面开始对接博客展示博友访客 IP 属地信息。一个应用可以添加多个 Key，一个 Key 每日可调用 10000 次，并发 5 次每秒。第四步：接入以下代码代码位置： Joe主题/core/function.php 在末尾添加以下代码 function curl_tencentlbs_ip($ip) { //应用Key也就是腾讯位置服务申请到的Key，修改成自己的Key即可 $key = 'XXX-XXX-XXX'; $url = 'https://apis.map.qq.com/ws/location/v1/ip?ip='.$ip.'&key='.$key; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_BINARYTRANSFER, 1); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_AUTOREFERER, 1); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1); curl_setopt($ch, CURLOPT_HTTPGET, true); curl_setopt($ch, CURLOPT_REFERER, $url); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36'); $content = curl_exec($ch); curl_close($ch); if($content) { $json = json_decode($content,true); if($json['status'] == 0 ) { $resjson = $json['result']['ad_info']; if($resjson['province']=='北京市'||$resjson['province']=='天津市'||$resjson['province']=='上海市'||$resjson['province']=='重庆市') { return $resjson['province'].$resjson['city']; } return $resjson['province'].$resjson['city']; } } return ''; } 第五步：评论处调用代码评论代码位置： Joe主题/public/comment.php 在自己合适的位置添加以下代码（自己找位子）最后再说明一点，展示IP属地可能会拖慢有评论区板块的网页速度！！！<?php echo curl_tencentlbs_ip($comments->ip); ?>最终成品的样子
2022年11月14日
565
26
3
Joe主题 侧边栏添加一个微博热搜
加密文章，请前往内页查看详情
2022年09月26日
382
0
7
Joe主题 更换评论框样式，填写QQ自动获取昵称邮箱
Joe主题 更换评论框样式，填写QQ自动获取昵称邮箱效果图展示 前言：由于为了美观感去除了画图模式，至于怎么加上画图模式会在文章最后给出详细教程。同时也去除了填写网址选项，这个暂时无添加教程，关键没有合适的添加位子。话不多说，直接开始教程！下载文件包，解压完会得到3个文件，上传至对应目录位子{cloud title="Joe评论框文件" type="default" url="https://pan.xccx.cc/pan/%E7%BD%91%E7%AB%99%E6%96%87%E4%BB%B6/Joe%E8%AF%84%E8%AE%BA%E6%A1%86%E7%BE%8E%E5%8C%96%E6%96%87%E4%BB%B6.zip" password=""/}压缩包名：qq_comment.zip 上传到文件目录 Joe主题文件/public/ 然后解压文件名：comment.php 上传覆盖到文件目录 Joe主题文件/public/comment.php （建议自己备份原文件）文件名：joe.responsive.min.css 上传覆盖到文件目录 Joe主题文件/assets/css/joe.responsive.min.css （建议自己备份原文件）添加画图模式教程修改文件comment.php，Ctrl+F快速搜索关键词 <div class="joe_comment__respond-type"> 大概在第20行下，把以下代码加入到关键词的下面<button class="item" data-type="draw">画图模式</button> <button class="item active" data-type="text">文本模式</button>
2022年09月03日
1,119
94
6
Joe主题 更换友情链接卡片样式
Joe主题 更换友情链接卡片样式效果图展示，详情可看本站 友情链接 第一步修改 friends.php 文件，文件目录 Joe主题文件/friends.php 把以下代码进行替换（友情提示：修改前先备份，不喜欢可以换回去）{tabs}{tabs-pane label="代码"} <ul class="joe_detail__friends evan-friends"> <?php foreach ($friends as $item) : ?> <li class="joe_detail__friends-item"> <a class="contain" href="<?php echo $item['url']; ?>" target="_blank" rel="noopener noreferrer" style="background: <?php echo $friends_color[mt_rand(0, count($friends_color) - 1)] ?>"> <div class="evan-f-left"> <div class="f-avatar"> <img width="40" height="40" class="avatar lazyload" src="<?php _getAvatarLazyload(); ?>" data-src="<?php echo $item['avatar']; ?>" alt="" /> </div> </div> <div class="evan-f-right"> <span class="title"> <span class="sub-text"><?php echo $item['name']; ?></span> <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18"> <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="25921"></path> <path d="M989.866667 512c0 263.918933-213.947733 477.866667-477.866667 477.866667S34.133333 775.918933 34.133333 512 248.081067 34.133333 512 34.133333s477.866667 213.947733 477.866667 477.866667z" fill="#FF7744" p-id="25922"></path> <path d="M787.114667 339.285333a51.2 51.2 0 0 1 0 72.362667l-307.2 307.2a51.2 51.2 0 0 1-72.362667 0l-170.666667-170.666667a51.2 51.2 0 0 1 72.362667-72.362666L443.733333 610.235733l271.018667-271.018666a51.2 51.2 0 0 1 72.362667 0z" fill="#FFFFFF" p-id="25923"></path> </svg> </span> <div class="content"> <div class="desc"><?php echo $item['desc']; ?></div> </div> </div> </a> </li> <?php endforeach; ?> </ul>{/tabs-pane}{tabs-pane label="需要替换的代码"} {/tabs-pane}{tabs-pane label="替换后的样子"} {/tabs-pane}{/tabs}第二步下载CSS文件放入服务器，然后后台代码引入CSS{cloud title="CSS文件" type="default" url="https://pan.xccx.cc/pan/css/evan-friends.min.zip" password=""/}{tabs}{tabs-pane label="代码"}<link rel="stylesheet" href="这里填写你的CSS文件直链地址">{/tabs-pane}{tabs-pane label="引入位子"} {/tabs-pane}{/tabs}
2022年09月01日
606
25
2
Joe主题 标题导航栏合并教程
Joe主题 标题导航栏合并教程效果图展示 前言：同时也增加了手机端的管理后台登入按钮，修改前建议先备份源文件教程很简单，修改 header.php 文件，文件目录 Joe主题文件/public/header.php 把以下代码全部替换进去即可，是把 header.php 内的所有代码替换隐藏内容，请前往内页查看详情
2022年08月07日
929
63
9
网站樱花飘落代码
网站樱花飘落代码复制下面代码，将其放置在网站footer.php或者header.php任意底部位子即可<!--樱花飘落开始--> <script src="https://www.xccx.cc/usr/themes/Xc/assets/js/yinghua.js"> </script> <!--樱花飘落结束-->
2022年07月21日
314
3
1
1
2
3
