搜索到
5
篇与
的结果
-
Joe主题添加 好久不见之网站底部样式 - 筱铭云博客 好久不见之本站同款网站底部样式，效果见本站。 1、修改footer.php首先，在页脚文件/usr/themes/Joe/public/footer.php文件的最下面放入以下代码：<!-- 好久不见 --> <div class="chenyuyc"> <div class="footer-fav"> <div class="container"> <div class="fl site-info"> <h2><a href="https://www.50dg.cn/" target="_blank">筱铭云博客</a></h2> <div class="site-p"> <p>筱铭云【白茶清欢无别事，我在等风也等你】</p> <p><a href="javascript:;" id="chenyutime">风风雨雨N年，你是第N位相遇的小伙伴</a></p> </div> </div> <div class="fr site-fav"> <a href="ttps://www.50dg.cn/" class="btn btn-fav btn-orange">Ctrl+D收藏本站</a></div> <div class="site-girl"> <div class="girl fl"> <i class="thumb " style="background-image:url(/cyxy.png);"></i> </div> <div class="girl-info hide_md"> <h4>绿水本无忧，因风皱面</h4> <h4>青山原不老，为雪白头</h4> </div> </div> </div> </div> </div> Joe主题开启显示建站时间Joe主题开启显示建站时间后，并配置好“网站访问量暨与小伙伴们的N次相遇”小伙伴。<p><a href="javascript:;" id="chenyutime">风风雨雨N年，你是第N位相遇的小伙伴</a></p>修改为： <p><?php if ($this->options->JBirthDay) : ?> <div class="item run"> <span>风风雨雨 <strong class="joe_run__day">00</strong> 天 <strong class="joe_run__hour">00</strong> 时 <strong class="joe_run__minute">00</strong> 分，你是第<?php echo theAllViews();?>位相遇的小伙伴</span> </div> <?php endif; ?> </p>修改好后，请删除原有的建站时间显示（第六行到第十行），不然会重复显示。 <?php if ($this->options->JBirthDay) : ?> <div class="item run"> <span>已运行 <strong class="joe_run__day">00</strong> 天 <strong class="joe_run__hour">00</strong> 时 <strong class="joe_run__minute">00</strong> 分 <strong class="joe_run__second">00</strong> 秒</span> </div> <?php endif; ?>{dotted startColor="#ff6c6c" endColor="#1989fa"/}2.修改include.php新增CSS样式，在/usr/themes/Joe/public/include.php的19-29行之间新增如下代码：<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">3.备注风风雨雨1年266天3小时23分，你是第45,355位相遇的小伙伴……这里的实现看这里：在 /usr/themes/Joe/core/core.php最下面添加//门前大路上，走过一群小伙伴，快来数一数：2，4，6，7，8…… function theAllViews() { $db = Typecho_Db::get(); $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`'); echo number_format($row[0]['SUM(VIEWS)']); } -
Joe主题 新增分页功能 - 筱铭云博客 对于Joe主题无法实现分页按钮分页设计可能有很多人无法接收，本教程将实现首页分页按钮可实现分页功能 {tabs}{tabs-pane label="首页"}{/tabs-pane}{tabs-pane label="后台设置"}{/tabs-pane}{/tabs}1.新建文件 pagination.php，文件路径：usr/themes/Joe-master/public{tabs}{tabs-pane label="添加代码"}<?php if ($this->options->JPageStatus === 'default') : ?> <?php $this->pageNav( '<svg class="icon icon-prev" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z"/><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312.512zm-564.224-63.488c0-3.584 0-7.68.512-11.264h-.512v-714.24h.512c-.512-3.584-.512-7.168-.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-.512 11.264h.512v714.24h-.512c.512 3.584.512 7.168.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"/></svg>', '<svg class="icon icon-next" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z"/><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312.512zm-564.224-63.488c0-3.584 0-7.68.512-11.264h-.512v-714.24h.512c-.512-3.584-.512-7.168-.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-.512 11.264h.512v714.24h-.512c.512 3.584.512 7.168.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"/></svg>', 1, '...', array( 'wrapTag' => 'ul', 'wrapClass' => 'joe_pagination', 'itemTag' => 'li', 'textTag' => 'a', 'currentClass' => 'active', 'prevClass' => 'prev', 'nextClass' => 'next' ) ); ?> <?php else : ?> <div class="j-joe_load" data-type="article"> <div class="joe_load">查看更多</div> </div> <?php endif ?>{/tabs-pane}{tabs-pane label="添加位置截图"}{/tabs-pane}{/tabs}2.修改index.php，文件路径：usr/themes/Joe-master第一部分：{tabs}{tabs-pane label="添加代码"}<script> document.addEventListener('DOMContentLoaded', () => { window.Joe.PAGE_INDEX = '<?php echo $this->_currentPage; ?>' || 1; }); </script>{/tabs-pane}{tabs-pane label="添加位置截图"}{/tabs-pane}{/tabs}第二部分，删掉一行，添加一行{tabs}{tabs-pane label="添加代码"}<?php $this->need('public/pagination.php'); ?> <!--<div class="joe_load">查看更多</div>-->{/tabs-pane}{tabs-pane label="添加位置截图"}{/tabs-pane}{/tabs}3.修改usr/themes/Joe-master/public/custom.php，如果不存在则修改usr/themes/Joe-master/functions.php{tabs}{tabs-pane label="添加代码"}$JPageStatus = new Typecho_Widget_Helper_Form_Element_Select( 'JPageStatus', array('default' => '按钮切换形式（默认）', 'ajax' => '点击加载形式'), 'default', '选择首页的分页形式', '介绍：选择一款您所喜欢的分页形式' ); $JPageStatus->setAttribute('class', 'joe_content joe_custom'); // 如果无法显示设置，将joe_custom替换为joe_other $form->addInput($JPageStatus->multiMode());{/tabs-pane}{tabs-pane label="添加位置截图"}{/tabs-pane}{/tabs}4.修改usr/themes/Joe-master/assets/js/joe.index.min.js{tabs}{tabs-pane label="添加代码"}window.Joe.PAGE_INDEX{/tabs-pane}{tabs-pane label="添加位置截图"}{/tabs-pane}{/tabs}
-
Typecho的Joe主题添加实现评论弹幕（PC端） {tabs}{tabs-pane label="后台"}{/tabs-pane}{tabs-pane label="前端"}{/tabs-pane}{/tabs}一、修改header.php文件新增代码，文件路径：usr/themes/Joe/public/header.php（一）①第一段，放在最上面{tabs}{tabs-pane label="放在最上面"}<!-- 弹幕 --> <?php if ($this->options->JBarragerStatus === 'on') : ?> <?php $this->widget('Widget_Comments_Recent@index', 'ignoreAuthor=true&pageSize=15')->to($comments); ?> <ul class="j-barrager-list"> <?php if ($comments->have()) : ?> <?php while ($comments->next()) : ?> <li> <span class="j-barrager-list-avatar" data-src="<?php _getAvatarByMail($comments->mail) ?>"></span> <span class="j-barrager-list-content"><?php _parseAsideReply($comments->content); ?></span> </li> <?php endwhile; ?> <?php endif; ?> </ul> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}②第二段，放在登录旁{tabs}{tabs-pane label="放在登录旁"}<!-- 弹幕 --> <?php if ($this->options->JBarragerStatus === 'on') : ?> <div class="item"> <input id="barrager" class="barrager" type="checkbox" title="开启/关闭弹幕"> </div> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}③第三段，放在最后面{tabs}{tabs-pane label="放在最后面"}<!-- 弹幕 --> <?php if ($this->options->JBarragerStatus === 'on') : ?> <script src="<?php $this->options->themeUrl('library/barrager/joe.barrager.js'); ?>"></script> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}二、修改include.php文件新增如下代码；文件路径：usr/themes/Joe/public/include.php {tabs}{tabs-pane label="添加代码"}<?php if ($this->options->JBarragerStatus === 'on') : ?> <link rel="stylesheet" href="<?php $this->options->themeUrl('library/barrager/joe.barrager.css'); ?>"> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}三、修改functions.php文件路径usr/themes/Joe/functions.php ；如果无法显示设置，则将以下joe_custom修改为joe_other {tabs}{tabs-pane label="添加代码"}$JBarragerStatus = new Typecho_Widget_Helper_Form_Element_Select( 'JBarragerStatus', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '是否开启弹幕功能（仅限PC）', '介绍：开启后，网站将会显示评论弹幕功能，该功能采用CSS动画引擎，并非传统JS操作DOM，无任何性能消耗。' ); $JBarragerStatus->setAttribute('class', 'joe_content joe_custom'); //如未生效，需将joe_custom换成joe_other $form->addInput($JBarragerStatus->multiMode());{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}如果创建过 custom.php 文件，直接放到 custom.php 里就行了 但是记得要在 functions.php 引入 custom.php 哦四、修改config.php文件文件路径：usr/themes/Joe/public/config.php {tabs}{tabs-pane label="添加代码"}/* 弹幕 */ DOCUMENT_BARRAGER: '<?php echo $this->options->JBarragerStatus === 'on' ? 'on' : 'off' ?>',{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}五、上传CSS和JS将以下文件，放在usr/themes/Joe/library里就行了 {cloud title="" type="lz" url="https://52xm.lanzouc.com/iuEOB0xt9b7a" password=""/}
-
Typecho博客Joe主题实现打赏设置 - 筱铭云博客 1.新增一个php文件，用于以后新增自定义设置文件名：custom.php；文件路径：usr/themes/Joe-master/public {tabs}{tabs-pane label="添加代码"}<?php // 收款设置 $ZNPaySet = new Typecho_Widget_Helper_Form_Element_Select( 'ZNPaySet', array( 'on' => '开启（默认）', 'off' => '关闭', ), 'on', '是否启用打赏功能', '介绍：开启后，文章底部展示打赏功能 <br />' ); $ZNPaySet->setAttribute('class', 'joe_content joe_custom'); $form->addInput($ZNPaySet->multiMode()); $ZNAlipay = new Typecho_Widget_Helper_Form_Element_Text( 'ZNAlipay', NULL, NULL, '支付宝收款码', '介绍：填写此处，打赏界面展示支付宝收款码，图片地址 <br />' ); $ZNAlipay->setAttribute('class', 'joe_content joe_custom'); $form->addInput($ZNAlipay->multiMode()); $ZNWeChat = new Typecho_Widget_Helper_Form_Element_Text( 'ZNWeChat', NULL, NULL, '微信收款码', '介绍：填写此处，微信界面展示微信收款码，图片地址 <br />' ); $ZNWeChat->setAttribute('class', 'joe_content joe_custom'); $form->addInput($ZNWeChat->multiMode()); $ZNQqPay = new Typecho_Widget_Helper_Form_Element_Text( 'ZNQqPay', NULL, NULL, 'QQ收款码', '介绍：填写此处，QQ界面展示QQ收款码，图片地址 <br />' ); $ZNQqPay->setAttribute('class', 'joe_content joe_custom'); $form->addInput($ZNQqPay->multiMode()); ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}2.修改handle.php文件，底部新增代码，放在最后一行上面，文件路径：usr/themes/Joe-master/public {tabs}{tabs-pane label="添加代码"}<style> /*弹出*/ .footer_flex { width: 42px; height: 42px; background-color: #f56c6c; border-radius: 50%; cursor: pointer; position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; color:#909399; font-size:12px} .footer_flex:hover { background-color: #409eff; } /*top*/ .footer_flex:hover .flex-footer { display: block; } .footer_flex .flex-footer { box-shadow: 0px 0px 5px 0px #409eff; border-radius: 8px; width: 156px; height: 166px; position: absolute; left: -52px; top: -175px; text-align: center; padding-top: 15px; background: #fff; display: none; } .flex-footer input{vertical-align:middle; margin-bottom:3px; *margin-bottom:3px;} </style> <script language="javascript" type="text/javascript"> function zfb(){ var obj=document.getElementById("ewm"); obj.src=`<?php $this->options->ZNAlipay() ?>`; }; function wx(){ var obj=document.getElementById("ewm"); obj.src=`<?php $this->options->ZNWeChat() ?>`; }; function qq(){ var obj=document.getElementById("ewm"); obj.src=`<?php $this->options->ZNQqPay() ?>`; }; </script> <div style="text-align: center; margin-left:30px; <?php if(Helper::options()->ZNPaySet !== 'on') echo 'display:none;' ?>"> <div class="footer_flex"> <img src="https://tu.50dg.cn/xm/2023/afe.png" width="20px" height="20px"> <div class="flex-footer"> <img id="ewm" src="<?php $this->options->ZNAlipay() ?>" width="120px" height="120px"> <div style="margin-top:5px;"> <label><input name="pay" type="radio" value="wx" checked="checked" onclick="wx()">微信</label> <label style="margin-left:3px; display:block-inline"><input name="pay" type="radio" value="zfb" onclick="zfb()" checked>支付宝</label> <label style="margin-left:3px;"><input name="pay" type="radio" value="qq" onclick="qq()">QQ</label> </div> <div style="height:40px; background:rgba(0,0,0,0);"></div> </div> </div> <p style="margin-top:5px; color:#909399; font-size:12px">打赏</p> </div>{/tabs-pane}{tabs-pane label="添加位置"}{/tabs-pane}{/tabs}3.修改functions.php文件，加入打赏设置菜单和底部引入新建的php文件，文件路径：usr/themes/Joe-master {tabs}{tabs-pane label="添加代码"}<li class="item" data-current="joe_custom">自定义设置</li> // 自定义设置 require_once("public/custom.php");{/tabs-pane}{tabs-pane label="添加位置1"}{/tabs-pane}{tabs-pane label="添加位置2"}{/tabs-pane}{/tabs}4.为打赏按钮增加跳动特效，将以下代码放在主题的全局设置-自定义CSS里面{tabs}{tabs-pane label="添加代码"}.footer_flex { animation: star 0.5s ease-in-out infinite alternate; } @keyframes star { from { transform: scale(1); } to { transform: scale(1.1); } }{/tabs-pane}{tabs-pane label="添加位置"}{/tabs-pane}{/tabs}
-
本站同款主题 Typecho — Joe主题 本站同款主题，该文档会随着Joe主题作者同步更新，保证之前实现的功能不被覆盖。{dotted startColor="#ff6c6c" endColor="#1989fa"/}{card-list}{card-list-item}主题下载{/card-list-item}{card-list-item}GitHub下载：https://github.com/HaoOuBa/Joe{/card-list-item}{/card-list}主题描述{card-list}{card-list-item}主题亮点{/card-list-item}{card-list-item}1、整包仅1.3Mb，却实现超强功能，极其迅速的响应（在开发时，都是使用30000篇文章进行开发测试）2、全站变量名、类名统一规范，重在方便更多人参与二开与拓展3、主题开箱即用，没有任何复杂的操作，无需像其他主题去特意创建个分类等。4、主题首发Typecho独家Joe编辑器5、主题响应式布局，不依赖任何响应式框架，采用 Joe 独家响应式6、主题在一切可能暴露的接口上，屏蔽sql注入、xss攻击风险，提供安全保障7、内置超强视频功能、包含直播功能、全网影视功能、文章内插入视频功能8、主题SEO极致优化，Lighthouse SEO跑分彪满100分9、主题色彩全局公用、小白轻松直接修改整站自定义主题色10、主题内置代码高亮、无需借助任何插件、支持200种语言11、主题首发极强画图回复功能，为你的博客带来用户互动，不再像传统博客那样，仅限文字12、主题内置sitemap、百度推送、友联、回复可见等，无需依赖任何插件{/card-list-item}{/card-list}{message type="success" content="基线版本 Joe 7.3.7"/}
