标签网站美化下的文章 - 我在人间凑数的日子

2022-08-07

『原创』Joe主题标题导航栏合并教程 Joe主题标题导航栏合并教程效果图展示前言：同时也增加了手机端的管理后台登入按钮，修改前建议先备份源文件教程很简单，修改 header.php 文件，文件目录 Joe主题文件/public/header.php 把以下代码全部替换进去即可，是把 header.php 内的所有代码替换隐藏内容，请前往内页查看详情

2022年08月07日
95 阅读
6 评论
1 点赞

2022-07-21

网站樱花飘落代码网站樱花飘落代码复制下面代码，将其放置在网站footer.php或者header.php任意底部位子即可 <script src="https://blog.xccx.cc/usr/themes/Joe-master/assets/js/yinghua.js"> </script>

2022年07月21日
74 阅读
1 评论
1 点赞

2022-07-20

网站底部自定义按钮美化网站底部自定义按钮美化效果如图第一步后台添加自定义CSS样式代码/*CSS 网站底部自定义按钮美化开始*/ :root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge { display: inline-block; border-radius: 4px; text-shadow: none; font-size: 12px; color: #fff; line-height: 15px; margin-bottom: 5px; } .badge-subject { display: inline-block; background-color: #4d4d4d; padding: 4px 4px 4px 6px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .github-badge .bg-blue { background-color: #007ec6; } .github-badge .bg-brightgreen { background-color: #4dc820; } .github-badge .bg-blueviolet { background-color: #8833d7; } .github-badge .badge-value { display: inline-block; padding: 4px 6px 4px 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .github-badge .bg-orange { background-color: orange; } .github-badge .bg-red { background-color: red; } /*CSS 网站底部自定义按钮美化结束 blog.sxchl.cn*/ 第二步网站底部自定义链接,添加以下代码 <div class="github-badge"> <span class="badge-subject bg-blue"> <a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a> </span>- <span class="badge-subject bg-brightgreen"> <a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a> </span>- <span class="badge-subject bg-green"> <a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a> </span>- <span class="badge-subject bg-orange"> <a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a> </span>- <span class="badge-value bg-blueviolet"> <a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a> </span>- <span class="badge-value bg-red"> <a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a> </div>

2022年07月20日
109 阅读
0 评论
2 点赞

2022-07-20

给网站加一个复制提醒弹窗给网站加一个复制提醒弹窗效果如图复制下面代码，将其放置在网站footer.php或者header.php任意底部位子即可 <link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" /> <script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script> <script> document.body.oncopy = function() { swal("复制成功！", "若要转载请保留原文链接，感谢支持！", "success"); }; </script>

2022年07月20日
87 阅读
0 评论
0 点赞

2022-07-19

网站自定义右键选项代码网站自定义右键选项代码代码放入 <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:#f391a9} 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> <br> <li><a href="https://blog.xccx.cc/"><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: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> </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 googleSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? layer.msg("请选择需要谷歌的内容！") : window.open("https://www.google.com/search?q=" + 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>

2022年07月19日
107 阅读
0 评论
3 点赞

2022-07-10

『原创』Joe主题给首页和文章页顶部加一个大图 Joe主题给首页和文章页顶部加一个大图文章页顶部效果图展示首页顶部效果图展示先给首页顶部加一个大图第一步修改 index.php 文件，文件目录 Joe主题文件/index.php 下面两个是我推荐的，放在图片地址里即可同步侧边栏博主背景壁纸代码：<?php $this->options->JAside_Author_Image() ?> 随机高清背景图API：https://blog.xccx.cc/api/tp/index.php{tabs}{tabs-pane label="代码"}代码第一行自行填写图片地址，<div class="HeaderImg" style="background: url(这里填写你的图片地址) center;background-size:cover;"> <div class="infomation"> <div class="title"><?php $this->options->title(); ?></div> <div class="desctitle"> <span class="motto joe_motto"</span> </div> </div> <section class="HeaderImg_bottom"> <svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> <defs> <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="48" y="0"></use> <use xlink:href="#gentle-wave" x="48" y="3"></use> <use xlink:href="#gentle-wave" x="48" y="5"></use> <use xlink:href="#gentle-wave" x="48" y="7"></use> </g> </svg> </section> </div>{/tabs-pane}{tabs-pane label="代码位子"} {/tabs-pane}{/tabs}第二步下载CSS文件放入服务器，然后后台代码引入CSS隐藏内容，请前往内页查看详情第三步设置全局透明度，这个看个人需求，也可以忽略此步骤{tabs}{/tabs-pane}{tabs-pane label="代码"}透明度自己改，数字就是，不会就百度 body {--background: rgba(255,255,255,0.8);}{/tabs-pane}{/tabs-pane}{tabs-pane label="代码位子"} {/tabs-pane}{/tabs}再给文章页顶部加一个大图友情提示：文章顶部图显示规则写成了与首页文章列表一样获取，会自动显示文章里的第一张图，文章无图的情况下会自动显示你后台设置的自定义缩略图，在后台图片设置选项添加，或者你也可以更换自己的api图库自行更换图库方法：下面第一行代码中 <?php echo _getThumbnails($this)[0] ?> 换成自己的图片地址即可教程方法修改 post.php 文件，文件目录 Joe主题文件/post.php 隐藏内容，请前往内页查看详情

2022年07月10日
916 阅读
40 评论
29 点赞

2022-07-07

Joe主题修复几个部分字体不渲染的问题 Joe主题修复一大部分地方字体不渲染的问题修复前提：以下方法基本可以解决所有的部分字体不渲染的问题，当然这个前提是你后台已经设置了自定义字体才会生效。友情提示：如果还有其他地方字体无法渲染的问题，并且此方法无法解决或者只想渲染单个部分字体的话可以在下方留言。　目前发现字体无法渲染的地方有{timeline}{timeline-item color="#ed4014"}评论框{/timeline-item}{timeline-item color="#ed4014"}代码块 {/timeline-item}{timeline-item color="#ed4014"}行内代码 {/timeline-item}{timeline-item color="#ed4014"}首页搜索框{/timeline-item}{/timeline}　修复方法修改CSS文件 joe.normalize.min.css 文件目录 Joe主题文件/assets/css/joe.normalize.min.css 把以下代码加入到最前面的 *{ 后面，也就是{的后面font-family: 'Joe Font';CSS修改完成后的样子*{font-family: 'Joe Font';再给大家送上一份本站正在使用的可商用字体字体大小：760kb字体格式：woff2隐藏内容，请前往内页查看详情

2022年07月07日
271 阅读
14 评论
2 点赞