搜索到
3
篇与
的结果
-
typecho博客Joe主题修改首页滚动广告及加入文章顶部广告 一、添加后台打开 functions.php 添加以下代码{tabs}{tabs-pane label="代码"}$JADPost = new Typecho_Widget_Helper_Form_Element_Textarea( 'JADPost', NULL, NULL, '文章页顶部广告', '介绍：用于设置文章页顶部广告 <br /> 格式：广告图片 || 跳转链接 （中间使用两个竖杠分隔）<br /> 注意：如果您只想显示图片不想跳转，可填写：广告图片 || javascript:void(0) <br /> 其他：一行一个，一行代表一个轮播广告图' ); $JADPost->setAttribute('class', 'joe_content joe_post'); $form->addInput($JADPost);{/tabs-pane}{tabs-pane label="代码位置"} {/tabs-pane}{/tabs}这是文章页的代码，因为首页广告主题自带了二、添加滚动广告栏{tabs}{tabs-pane label="首页"}因为首页已经有广告位了，所以直接替换就行了将主题 index.php 的以下代码直接替换为新代码 <div class="joe_index__ad"> <?php $index_ad = []; $index_ad_text = $this->options->JIndex_Ad; if ($index_ad_text) { $index_ad_arr = explode("\r\n", $index_ad_text); if (count($index_ad_arr) > 0) { for ($i = 0; $i < count($index_ad_arr); $i++) { $img = explode("||", $index_ad_arr[$i])[0]; $url = explode("||", $index_ad_arr[$i])[1]; $index_ad[] = array("img" => trim($img), "url" => trim($url)); }; } } ?> <?php if (sizeof($index_ad) > 0) : ?> <div class="swiper-container"> <div class="swiper-wrapper"> <?php foreach ($index_ad as $item) : ?> <div class="swiper-slide"> <a class="item" href="<?php echo $item['url'] ?>" target="_blank" rel="noopener noreferrer nofollow"> <img width="100%" class="image lazyload" src="<?php _getLazyload() ?>" data-src="<?php echo $item['img'] ?>" /> </a> </div> <?php endforeach; ?> </div> <div class="swiper-pagination"></div> <span class="icon">广告</span> </div> <?php endif; ?> </div>{/tabs-pane}{tabs-pane label="文章页"}文章页直接在主题的 post.php 文件内合适的地方加入以下代码 <div class="joe_post__ad"> <?php $JADPost = []; $JADPost_text = $this->options->JADPost; if ($JADPost_text) { $JADPost_arr = explode("\r\n", $JADPost_text); if (count($JADPost_arr) > 0) { for ($i = 0; $i < count($JADPost_arr); $i++) { $img = explode("||", $JADPost_arr[$i])[0]; $url = explode("||", $JADPost_arr[$i])[1]; $JADPost[] = array("img" => trim($img), "url" => trim($url)); }; } } ?> <?php if (sizeof($JADPost) > 0) : ?> <div class="swiper-container"> <div class="swiper-wrapper"> <?php foreach ($JADPost as $item) : ?> <div class="swiper-slide"> <a class="item" href="<?php echo $item['url'] ?>" target="_blank" rel="noopener noreferrer nofollow"> <img width="100%" class="image lazyload" src="<?php _getLazyload() ?>" data-src="<?php echo $item['img'] ?>" /> </a> </div> <?php endforeach; ?> </div> <div class="swiper-pagination"></div> <span class="icon">广告</span> </div> <?php endif; ?> </div>{/tabs-pane}{/tabs}三、修改广告栏样式{tabs}{tabs-pane label="首页"}直接在 Joe/assets/css 打开 joe.index.min.css 然后在最后添加以下代码.joe_index__ad .swiper-container{height: 180px!important;border-radius: var(--radius-inner);}.joe_index__ad .swiper-container .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}@media (max-width: 768px){.joe_index__ad .swiper-container{height: 120px!important}.joe_index__ad .swiper-container .image{height: 120px;object-fit: cover;border-radius: var(--radius-inner);}}{/tabs-pane}{tabs-pane label="文章页"}直接在 Joe/assets/css 打开 joe.post.min.css 然后在最后添加以下代码.joe_post__ad .swiper-container{height: 180px!important;margin-top:15px;border-radius: var(--radius-inner);}.joe_post__ad .swiper-container .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}@media (max-width: 768px){.joe_post__ad .swiper-container{height: 120px!important}.joe_post__ad .swiper-container .image{height: 120px;object-fit: cover;border-radius: var(--radius-inner);}}{/tabs-pane}{/tabs}四、添加滚动效果首页的修改已经结束，到后台填入广告信息就可以了文章页首先在主题的 post.php 文件内 <head> 标签内加入以下代码<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css" /> <script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>然后再在 Joe/assets/js 打开 joe.post_page.min.js 然后在最后添加以下代码if(0!==$(".joe_post__ad .swiper-container").length){let e="vertical";new Swiper(".swiper-container",{keyboard:!1,direction:e,loop:!0,autoplay:!0,mousewheel:!0,pagination:{el:".swiper-pagination"},})} -
Joe主题美化记录【持续更新】 这个主题固然是好，但我就是喜欢折腾这篇用于记录美化记录，改的多了难免会忘大家也可参考关闭前台登陆/注册这个操作只是让用户无法登陆/注册，对管理站点没影响修改路径：/usr/themes/Joe/public/headr.php删除<?php else 登陆后台在域名后面＋/admin就可以进入禁用F12修改路径：/usr/themes/Joe/public/footer.php在最后面加上代码即可<!--禁用F12--> <script> function fuckyou(){ window.close(); //关闭当前窗口(防抽) window.location="about:blank"; //将当前窗口跳转置空白页 } function click(e) { if (document.all) { if (event.button==2||event.button==3) { alert("禁止拿代码"); oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { fuckyou(); document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=click; document.oncontextmenu = new Function("return false;") document.onkeydown =document.onkeyup = document.onkeypress=function(){ if(window.event.keyCode == 123) { fuckyou(); window.event.returnValue=false; return(false); } } </script>添加版权信息效果就是在站内复制文文字后，会默认在复制内容中加入版权信息修改路径：/usr/themes/Joe/public/footer.php在最后面添加即可<!--版权提示开始--> <script> document.body.addEventListener('copy', function (e) { if (window.getSelection().toString() && window.getSelection().toString().length > 42) { setClipboardText(e); notie({ type: 'info', text: '商业转载请联系作者获得授权，非商业转载请注明出处，谢谢合作。', autoHide: true }) } }); function setClipboardText(event) { var clipboardData = event.clipboardData || window.clipboardData; if (clipboardData) { event.preventDefault(); var htmlData = '' + '著作权归作者所有。<br>' + '本站所有文章使用CC BY-NC-SA 4.0许可协议，转载请注明出处。<br>' + '作者：老K博客<br>' + '来源：' + window.location.href + '<br>' + '链接：https://laokbk.cn/<br><br>' + window.getSelection().toString(); var textData = '' + '著作权归作者所有。\n' + '本站所有文章使用CC BY-NC-SA 4.0许可协议，授权转载请注明出处。\n' + '作者：老K博客\n' + '来源：' + window.location.href + '\n' + '链接：https://laokbk.cn/\n\n' + window.getSelection().toString(); clipboardData.setData('text/html', htmlData); clipboardData.setData('text/plain',textData); } } </script> <!--版权提示结束-->注意把信息修改成自己的修改颜色及透明度在主题设置的自定义css处填写body { --theme: #ff6800; --background: rgba(255,255,255,0.85) }theme：主题颜色，可随意修改颜色参照表：http://tool.txav.cn/rgb_colorrgba最后面的0.85即为透明度，修改值0-1，0则全透1则不透。若只想单改透明度 则填写内容为body { --background: rgba(255,255,255,0.8) }透明值同样修改最后面的0.8颜色包裹效果文章颜色包裹文字代码实现底部按钮美化先复制下面的代码，在主题的全局设置，粘贴到自定义底部栏左、右侧内容里，把内容改一下<a class="github-badge" target="_blank" href="https://www.laokbk.cn/friends.html" title="友情链接"> <span class="badge-subject"></span> <span class="badge-value bg-blue">友情链接</span> </a> | <a class="github-badge" target="_blank" href="/sitemap.xml" title="老K博客"> <span class="badge-subject">Powered</span> <span class="badge-value bg-purple"></span>站点地图 </a>
-
CC BY-NC-ND