首页
电视
统计
留言
更多
关于
友链
Search
1
本站同款主题
5,282 阅读
2
文章颜色包裹文字代码实现
4,780 阅读
3
社会主义核心价值观
4,713 阅读
4
Joe主题付费插件
4,550 阅读
5
Joe首页添加大图
4,221 阅读
Typecho
Joe主题
杂乱无章
生活日记
技术分享
登录
Search
标签搜索
css
Joe
美化
源码
Typecho
js
美化代码
主题
Typecho
累计撰写
30
篇文章
累计收到
123
条评论
首页
栏目
Typecho
Joe主题
杂乱无章
生活日记
技术分享
页面
电视
统计
留言
关于
友链
搜索到
8
篇与
的结果
2023-07-07
Typecho伪静态去掉index.php
1.进入网站后台设置-永久链接开启地址重写功能,然后点击保存设置隐藏内容,请前往内页查看详情3.刷新网站,即可发现index.php已经去掉
2023年07月07日
1,810 阅读
6 评论
5 点赞
2023-05-22
Joe主题付费插件
支付演示{ZhinianPay money=0.01}测试付费内容{/ZhinianPay}前言{message type="success" content="作者开发不易,授权仅需3元"/}教程开始1. 本插件测试版本为Typecho的Joe主题和默认主题,其他程序和主题未进行测试1.1 插件开启后编辑器如果没有显示付费阅读按钮,可以在文章里直接添加如下代码,money后面是金额: 2 .本插件支持实时到账和提现到账两种,提现到账需要到https://dy.zhinianboke.com/ 的支付管理-商户信息菜单进行提现操作,将收取3%手续费,请根据自身考虑是否使用 3 .插件使用步骤,下载的插件,文件夹命名为 ZhinianPay ,上传至usr/plugins目录,后台开启插件,在插件设置中填写支付插件授权码,授权码在https://dy.zhinianboke.com/ 的授权管理-授权码管理里面申请; 4 .至此,属于自己网站的付费阅读即可使用了; 5 .插件下载地址:{cloud title="Github地址" type="github" url="https://github.com/zhinianboke/ZhinianPay" password=""/}
2023年05月22日
4,550 阅读
1 评论
7 点赞
2023-05-18
Joe首页添加大图
演示图 {message type="success" content="改变代码之前请备份数据库和站点目录,数据无价。弄错之后你还有机会恢复到更改只之前。"/}步骤目录1.复制代码2.修改index.php3.增加css文件4.引入css文件{lamp/} 1. 下面是index.php的代码,更改目录在:usr/themes/Joe/index.php<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>2. 修改index.php复制1.部分的相关的代码进行下图的放置: 3. css文件代码,复制之后去新建一个文件粘贴下面的css代码即可(文件名随便你取,但是文件的后缀必须以css结束。)添加路径: assets/css目录下.Reward{text-align:center;margin-left:30px;color:var(--minor);font-size:12px}.Reward .footer_flex{width:42px;height:42px;background-color:#f56c6c;border-radius:50%;position:relative;z-index:10;display:flex;justify-content:center;align-items:center;margin-bottom:8px}.Reward .footer_flex:hover{background-color:var(--theme);cursor:pointer}.Reward .footer_flex:hover .flex_rows{display:block}.Reward .footer_flex .flex_rows{box-shadow:0px 1px 4px 2px var(--theme);cursor:auto;height:200px;width:170px;position:absolute;top:-215px;background:var(--background);display:none;border-radius:8px}.Reward .footer_flex .flex_rows::after{content:"";position:absolute;bottom:-16px;left:0;right:0;margin:auto;width:0px;border:18px solid transparent;border-bottom:none;border-top-color:var(--background);filter:drop-shadow(0px 4px 2px var(--theme))}.Reward .footer_flex .flex_rows .flex-footer{overflow:hidden;margin:10px;position:relative;width:150px;height:180px}.Reward .footer_flex .flex_rows .flex-footer .RewardImg{width:900px;position:absolute;left:0}.Reward .footer_flex .flex_rows .flex-footer .RewardImg li{float:left;overflow:hidden}.Reward .footer_flex .flex_rows .flex-footer .RewardImg li img{width:150px;border-radius:2px}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn{display:inline-flex;border-radius:5px;position:absolute;border:1px solid var(--classC);bottom:0px;left:0}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn li:nth-of-type(n + 2){border-left:1px solid var(--classC)}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn li div{height:20px;font-size:12px;color:var(--routine);padding:2px;border-radius:2px}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn li:hover{cursor:pointer}.imgUpload_btn{margin:-10px auto 5px;text-align:right}.imgUpload_btn span{cursor:pointer;margin-right:5px}.top-social{position:relative;padding:5px 0;width:250px;display:flex;flex-wrap:wrap;background:var(--background);justify-content:space-around;margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow)}.top-social li{width:50px;text-align:center;position:relative;height:32px}.top-social li a{height:100%}.top-social li div{height:100%}.top-social li img{height:100%}.top-social li .WeChatInner{display:none;position:absolute;box-shadow:0px 1px 4px 2px var(--theme);border-radius:var(--radius-wrap);transition:.7s all ease;background:var(--background);-webkit-transition:.7s all ease;top:-180px;left:-50px;transform:translate3d(0, 16px, 0);width:150px;height:150px;z-index:2}.top-social li .WeChatInner::before{content:"";position:absolute;bottom:-16px;left:0;right:0;margin:auto;display:inline-block;width:0px;border:18px solid transparent;border-bottom:none;border-top-color:var(--background);filter:drop-shadow(0px 4px 2px var(--theme))}.top-social li .WeChatInner img{border-radius:2px;width:140px;height:auto;margin:5px;background:none}.top-social li:hover .WeChatInner{display:block}.pe-social{width:100%}.joe_comment__respond-form .foot{justify-content:flex-start}.joe_comment__respond-form .foot .joe_owo__contain{position:static}.joe_comment__respond-form .foot .joe_owo__contain .box{position:absolute;bottom:100%;margin-bottom:6px;left:0px;padding-top:5px;border:1px solid rgba(0,0,0,.15);border-color:transparent;box-shadow:0 0 10px 8px rgba(116,116,116,.08)}.joe_comment__respond-form .foot .comment_box{cursor:pointer;text-align:center;color:var(--routine);height:26px;line-height:26px;background:var(--background);opacity:.85;border-radius:13px;width:70px;margin-left:5px}.joe_comment__respond-form .foot .comment_box:hover{background:var(--theme);color:#fff}.joe_comment__respond-form .foot .comment_box .dropdown-menu{cursor:default;position:absolute;top:auto;bottom:100%;margin-bottom:6px;z-index:10;display:none;min-width:160px;padding:5px 0;font-size:14px;text-align:left;list-style:none;background-color:var(--background);color:var(--minor);background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-color:transparent;border-radius:4px;box-shadow:0 0 10px 8px rgba(116,116,116,.08)}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image{width:250px;padding:8px 10px}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image p{margin:0 0 10px}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image p textarea{resize:vertical}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .form-control{display:block;width:100%;padding:6px 12px;font-size:14px;line-height:1.42857143;border:1px solid #ccc;border-radius:4px;border-color:transparent;background:var(--classD);color:#4e5358;max-height:200px;min-height:90px;box-shadow:none;transition:border-color ease-in-out .15s,background ease-in-out .15s,box-shadow ease-in-out .15s,opacity ease-in-out .3s}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right{text-align:right}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .error{float:left;color:var(--theme);-webkit-animation:5s ease-in-out 0s infinite normal none running shaked;animation:5s ease-in-out 0s infinite normal none running shaked}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .but{border-radius:4px;display:inline-block;line-height:1.44;background:var(--theme);color:#fff;padding:.3em 1em}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .but:hover{-webkit-animation:5s ease-in-out 0s infinite normal none running shaked;animation:5s ease-in-out 0s infinite normal none running shaked}.joe_comment__respond-form .foot .press-down{background:var(--theme) !important;color:#fff !important}.HeaderImg{position:relative;width:100%;height:50rem;display:flex;margin-top:-4rem;justify-content:center;align-items:center;flex-direction:column;height: calc(70vh + 70px);}.HeaderImg.minImg{max-width:83rem;height:25rem;margin:auto}.HeaderImg.minImg .infomation .desctitle{font-size:1.5rem}.HeaderImg img{-o-object-fit:cover;object-fit:cover}.HeaderImg .infomation{position:absolute;line-height:2}.HeaderImg .infomation .title{font-size:2rem;font-weight:700;color:#fff;text-align:center;text-shadow:0 .1875rem .3125rem #1c1f21;letter-spacing:.3rem}.HeaderImg .infomation .desctitle{display:flex;align-items:center;justify-content:center;text-align:center;color:#f3f3f3;font-size:1rem;padding:0 1rem;text-shadow:0 .1875rem .3125rem #1c1f21}.HeaderImg .HeaderImg_bottom{width:100%;position:absolute;left:0;bottom:-5px}.HeaderImg .HeaderImg_bottom .waves-svg{width:100%;height:3rem}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use{-webkit-animation:move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;animation:move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:first-child{-webkit-animation-delay:-2s;animation-delay:-2s;-webkit-animation-duration:7s;animation-duration:7s;fill:var(--background);opacity:.9}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:nth-child(2){-webkit-animation-delay:-3s;animation-delay:-3s;-webkit-animation-duration:10s;animation-duration:10s;fill:var(--background);opacity:.8}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:nth-child(3){-webkit-animation-delay:-4s;animation-delay:-4s;-webkit-animation-duration:13s;animation-duration:13s;fill:var(--background);opacity:.9}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:nth-child(4){-webkit-animation-delay:-5s;animation-delay:-5s;-webkit-animation-duration:20s;animation-duration:20s;fill:var(--background)}@-webkit-keyframes move-forever{0%{transform:translate3d(-90px, 0, 0)}to{transform:translate3d(85px, 0, 0)}}@keyframes move-forever{0%{transform:translate3d(-90px, 0, 0)}to{transform:translate3d(85px, 0, 0)}}.HeaderImg:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=)}@media(max-width: 768px){.HeaderImg{height:15rem;margin-top:0;height: calc(35vh + 35px);}.HeaderImg.minImg{width:100%;height:15rem}.HeaderImg .infomation .title{font-size:1.5rem}.HeaderImg .infomation .desctitle{font-size:0.9rem}.HeaderImg .HeaderImg_bottom .waves-svg{height:3rem}}.joe_aside.inactive{display:none}.joe_main{position:relative}@media(max-width: 768px){.joe-stretch{display:none}}.joe-stretch{height:100%;position:absolute;top:0;right:0;padding:40px 0}.joe-stretch .contain{position:-webkit-sticky;position:sticky;transition:top .5s;-webkit-animation:swingIconSet 2s infinite linear alternate;animation:swingIconSet 2s infinite linear alternate;z-index:333}@-webkit-keyframes swingIconSet{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes swingIconSet{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}.joe-stretch .contain::before{content:"";position:absolute;top:0;left:0;width:10px;height:25px;border-top:2px solid var(--minor);border-right:2px solid var(--minor);transition:border .35s}.joe-stretch .contain svg{position:absolute;top:25px;left:-3px;width:24px;height:24px;fill:var(--minor);cursor:pointer;transition:fill .35s}.joe-stretch .contain:hover{-webkit-animation-play-state:paused;animation-play-state:paused}.joe-stretch .contain:hover svg{fill:var(--theme)}.joe-stretch .contain:hover::before{border-color:var(--theme)}.joe-stretch.active{display:block}.joe_action_item.read_book{visibility:hidden;transform:scale(0)}.joe_action_item.read_book.active{visibility:visible;transform:scale(1)}.joe_action_item.read_book svg{transform:scale(0);opacity:0;transition:transform .85s,opacity .85s}.joe_action_item.read_book svg.active{transform:scale(1);opacity:1}4. 引入css代码引入外部css代码link标签代码如下<link rel="stylesheet" href="/usr/themes/Joe/assets/css/bigimg.css">将这个代码放在网站主题后台的全局设置自定义head里面即可
2023年05月18日
4,221 阅读
3 评论
13 点赞
2023-05-14
为Joe主题 添加背景颜色渐变效果
演示效果 方法一:把下面代码加入到全局设置-自定义CSS里即可,180是角度,上下渐变,或者左右渐变自己调!body::before { background: linear-gradient(180deg, #fed6e3, #c0efec) ; }方法二:放在 header 或者 footer 里,或者后台自定义css填写框里。<style>body::before { background: linear-gradient(180deg, #fed6e3, #c0efec) ; }</style>
2023年05月14日
2,017 阅读
1 评论
14 点赞
2023-05-06
快去给你的网站加个樱花飘屏代码吧
{tabs}{tabs-pane label="代码下载"} https://pan.nmssb.cn/down.php/b84e062effdce4a478d5fce14448bce3.js{/tabs-pane}{tabs-pane label="代码位置"} 下载js文件后放在你主题静态文件js目录下,目录地址:/usr/themes/Joe-master/assets/js{/tabs-pane}{/tabs} 下载之后引入位置Joe主题在后台自定义body后引入即可。代码块里面放你下载好的js文件:<script src="js文件路径"></script>注意js文件过多的话会导致其他js文件或本次js失效。
2023年05月06日
491 阅读
0 评论
7 点赞
1
2