为你的 Typecho 博客添加阅读模式（适配Joe主题，其他主题自测） 最近一直在搞博客美化，虽说是美化，不妨说是为博客增添一些实用的小功能。今天 UP主 为大家带来了让Typecho博客支持阅读模式，更纯粹的文章阅读页面，让大家沉浸在阅读的乐趣当中！效果展示食用教程添加后台开关本教程以 Joe 主题为例，首先打开Joe主题根目录的 functions.php 文件，添加如下代码：（或者在 public/custom.php 文件里添加，前提是你创建并引用了这个文件）// 是否启用阅读模式 $ReadBook = new Typecho_Widget_Helper_Form_Element_Select( 'ReadBook', array( 'off' => '关闭（默认）', 'on' => '开启'), 'off', '请选择是否启用阅读模式', '介绍：开启后，文章页可以进入阅读模式' ); $ReadBook->setAttribute('class', 'joe_content joe_custom'); //没有joe_custom就改成joe_other $form->addInput($ReadBook->multiMode());添加开关按钮在Joe主题 public/footer.php 文件的 <div class="joe_action"> 内部添加入以下代码：<!-- 阅读模式 --> <?php if ($this->options->ReadBook === 'on' && $this->is('post')) : ?> <!-- 检测是否为文章页 --> <div class="joe_action_item read_book" title="阅读模式"> <svg t="1651294208728" class="icon-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"> <path d="M170.666667 128a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h161.664a213.333333 213.333333 0 0 1 118.314666 35.84l61.354667 40.874666 61.354667-40.874666A213.333333 213.333333 0 0 1 691.626667 810.666667H853.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-161.664c-17.706667 0-44.672 7.68-67.413333 20.906667-11.008 6.4-18.944 12.928-23.637333 18.346666a23.978667 23.978667 0 0 0-3.413334 4.821334V682.666667a42.666667 42.666667 0 0 1-85.333333 0V170.666667c0-24.746667 11.861333-44.970667 24.192-59.221334a178.688 178.688 0 0 1 45.354667-36.352c32.384-18.773333 74.026667-32.426667 110.250666-32.426666H853.333333a128 128 0 0 1 128 128v597.333333a128 128 0 0 1-128 128h-161.664a128 128 0 0 0-70.997333 21.504l-84.992 56.661333a42.666667 42.666667 0 0 1-47.36 0l-84.992-56.661333A128 128 0 0 0 332.330667 896H170.666667a128 128 0 0 1-128-128V170.666667a128 128 0 0 1 128-128h161.664a213.333333 213.333333 0 0 1 118.314666 35.84 42.666667 42.666667 0 0 1-47.317333 70.997333A128 128 0 0 0 332.330667 128H170.666667z" p-id="9868" fill="var(--minor)" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path> <path d="M213.333333 384a42.666667 42.666667 0 0 1 42.666667-42.666667h128a42.666667 42.666667 0 0 1 0 85.333334H256a42.666667 42.666667 0 0 1-42.666667-42.666667zM256 554.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 0 85.333333H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666z" fill="var(--minor)" p-id="9869" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path> </svg> <svg t="1651294208728" class="icon-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"> <path d="M170.666667 128a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h161.664a213.333333 213.333333 0 0 1 118.314666 35.84l61.354667 40.874666 61.354667-40.874666A213.333333 213.333333 0 0 1 691.626667 810.666667H853.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-161.664c-17.706667 0-44.672 7.68-67.413333 20.906667-11.008 6.4-18.944 12.928-23.637333 18.346666a23.978667 23.978667 0 0 0-3.413334 4.821334V682.666667a42.666667 42.666667 0 0 1-85.333333 0V170.666667c0-24.746667 11.861333-44.970667 24.192-59.221334a178.688 178.688 0 0 1 45.354667-36.352c32.384-18.773333 74.026667-32.426667 110.250666-32.426666H853.333333a128 128 0 0 1 128 128v597.333333a128 128 0 0 1-128 128h-161.664a128 128 0 0 0-70.997333 21.504l-84.992 56.661333a42.666667 42.666667 0 0 1-47.36 0l-84.992-56.661333A128 128 0 0 0 332.330667 896H170.666667a128 128 0 0 1-128-128V170.666667a128 128 0 0 1 128-128h161.664a213.333333 213.333333 0 0 1 118.314666 35.84 42.666667 42.666667 0 0 1-47.317333 70.997333A128 128 0 0 0 332.330667 128H170.666667z" p-id="9868" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path> <path d="M213.333333 384a42.666667 42.666667 0 0 1 42.666667-42.666667h128a42.666667 42.666667 0 0 1 0 85.333334H256a42.666667 42.666667 0 0 1-42.666667-42.666667zM256 554.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 0 85.333333H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666z" p-id="9869" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path> </svg> </div> <?php endif; ?>添加JS{callout color="#f0ad4e"}首先说明，因为我使用的Joe主题自带jQuery框架，如果你是其他主题，请自行引入jQuery或者将以下代码修改为原生js{/callout}在Joe主题 assets/js/joe.post_page.min.js 文件最后一个 }); 前加入以下代码：当然你也可以加在 assets/js/joe.post_page.js 里，再使用minify进行压缩。$(".joe_action div").hasClass("read_book")&&($(".joe_container div").hasClass("joe_post")&&($(".joe_action_item.read_book").addClass("active"),$(".joe_action_item.read_book .icon-1").addClass("active")),$(".joe_action_item.read_book").on("click",function(){$(".joe_action_item.read_book svg").hasClass("icon-1 active")?($(".joe_header").css("display","none"),$(".HeaderImg").css("display","none"),$(".joe_aside").css("display","none"),$(".joe_detail").css("backgroundColor","#bfa"),$(".joe_detail__related").css("display","none"),$(".joe_comment").css("display","none"),$(".joe_footer").css("display","none"),$(".joe-stretch").css("display","none"),$(".joe_detail__article").css("font-size","20px")):($(".joe_header").removeAttr("style"),$(".HeaderImg").removeAttr("style"),$(".joe_aside").removeAttr("style"),$(".joe_detail").removeAttr("style"),$(".joe_detail__related").removeAttr("style"),$(".joe_comment").removeAttr("style"),$(".joe_footer").removeAttr("style"),$(".joe-stretch").removeAttr("style"),$(".joe-stretch").removeAttr("style"),$(".joe_detail__article").removeAttr("style")),$(".joe_action_item.read_book .icon-1").toggleClass("active"),$(".joe_action_item.read_book .icon-2").toggleClass("active")}))添加CSS在Joe主题 assets/css/joe.post.min.css 里加入以下代码：.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}{callout color="#f0ad4e"}教程很简单，就是隐藏一些组件和更换页面底色！ 没有固定的方法，只有固定的思维，所以一定要多思考、多变通。 {/callout}

【实践】Typecho Joe主题 更换404页面模板 想必大家的博客或者网站，都会有相对应的404页面，不过有时候那些模板往往跟不上审美就想换掉🤷‍♂️，我用的Joe主题404页面亦是如此，虽然样式很好看但是没有实际用途，所以说毫无意义。我打开源文件看到了一串代码🤦‍♂️不是说无用简直就是无用，为了展现一张图片搞那么多代码太浪费咯！今天 UP主 就为大家基于Joe主题魔改一款简洁大方的404页面。（网上虽然有很多实用的404页面源码，大家都是直接替换成 404.php 文件并不适配Joe主题）效果展示https://www.ailmu.cn/404.php404页面创建首先我们创建一个单独的页面来作为404页面，从 \usr\themes\Joe 主题根目录复制出一份 page.php 文件，把文件中的以下代码删掉（注意删除的内容，包括文章模块和评论模块这里不需要用到）隐藏内容，请前往内页查看详情删除后的位置，可添加你需要的404页面内容，这里不再赘述因为每个人的想法不一样，不懂的可参考一下，下面的全量代码。{callout color="#f0ad4e"}把刚才复制的 page.php 文件重命名为 404.php 然后把之前的404文件删除，重新上传新的404文件到Joe主题根目录，即可。{/callout}404页面全量代码为了演示， UP主 把自己魔改的404页面全量代码发了出来，大家自行参考。（我在网上随便找的代码，有点乱懒得整理🤷‍♂️）<!DOCTYPE html> <html lang="zh-CN"> <head> <?php $this->need('public/include.php'); ?> <?php if ($this->options->JPrismTheme) : ?> <link href="<?php $this->options->JPrismTheme() ?>" rel="stylesheet"> <?php else : ?> <link href="<?php _getAssets('assets/lib/prism/prism.min.css'); ?>" rel="stylesheet"> <?php endif; ?> <script src="<?php _getAssets('assets/lib/clipboard@2.0.11/clipboard.min.js'); ?>"></script> <script src="<?php _getAssets('assets/lib/prism/prism.min.js'); ?>"></script> <script src="<?php _getAssets('assets/js/joe.post_page.min.js'); ?>"></script> <style> body{ margin:0;padding:0; font-family: Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,sans-serif"; } a, button.submit { color:#6E7173; text-decoration:none; -webkit-transition:all .1s ease-in; -moz-transition:all .1s ease-in; -o-transition:all .1s ease-in; transition:all .1s ease-in; } a:hover, a:active { color:#6E7173; } .body404{ position: absolute; height: 100%; width: 100%; background:#fff; background-size: auto 100%; text-shadow:1px 1px 0 #fff; } .body-about .body404{ background:#fff; } .site-name404 { margin: 0 auto; text-align: center; letter-spacing: 2px; font: normal 150px/1 “Helvetica Neue”, Helvetica, Arial; color:#444; } .site-name404 h1{ margin: 0 0 10px; font-size:50px; line-height:1.2; } .title404 span{ font-size: 15px; width: 2px; } .site-name404 i { font-style: normal; } .title404 p{ font-size: 20px; line-height:1.5; margin:0; color:#444; } .info404{ position: absolute; top: 30%; text-align: center; width: 100%; margin-top: -160px; } .body-about .info404{ margin-top: -180px; } #footer404{ margin-top:30px; font-size:10px; } .index404 { margin-top: 24px; display: inline-block; white-space: nowrap; cursor: pointer; background: #444; letter-spacing: 1px; font-size: 14px; -moz-user-select: -moz-none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; text-shadow: none; border: 1px solid #ccc; line-height: 36px; text-align: center; height: 36px; padding: 0 25px; border-radius: 16px; -webkit-transition-duration: 400ms; transition-duration: 400ms; background-color: #fff; color: #999; } .index404:hover{ color: #F77B83; border-color: #F77B83; outline-style: none; } .icon-about{ padding: 10px 0 25px; } .icon-about a{ font-size: 20px; margin: 5px; color: #fff; background-color: #000; border-radius: 100%; padding: 6px; } </style> </head> <body> <div id="Joe"> <?php $this->need('public/header.php'); ?> <div class="joe_container"> <div class="joe_main"> <div class="body404"> <div class="info404"> <header id="header404" class="clearfix"> <div class="site-name404"><i>404</i> </div> </header> <section> <div class="title404"> <p>哎呀！找 不 到 页 面 了 ！</p> <br> <div class="widget widget_ui_textads"><img src="https://www.yuanxiapi.cn/api/img/" width="50%" style="border-radius: 20px;"></div> </div><a href="/" class="index404">返回首页</a>&nbsp;<a href="javascript:location.reload();"class="index404">点击刷新</a> <br> </section> </div> </div> </div> <?php $this->need('public/aside.php'); ?> </div> <?php $this->need('public/footer.php'); ?> </div> </body> </html>

Typecho Joe主题 RSS方式呈现“新闻早报”（扩展篇） 前段时间写了一篇关于Typecho Joe 主题，怎么添加新闻早报页面的文章，详细文章请看：https://www.ailmu.cn/technique/11.html今天 UP主 为大家带来了它的扩展功能，设置首页文章流，为了使新闻看起来更加自然方便，我们在首页添加新闻文章，使其看起来和文章浑然一体，此方法仅限Joe 7.x 主题。效果展示学习姿势修改Joe主题根目录 index.php 文件， Ctrl+F 查找如下代码：<div class="joe_index__list" data-wow="<?php $this->options->JList_Animate() ?>">在此代码上方位置粘贴如下代码： <li class="joe_list__item wow default" style="visibility: visible;"> <div class="line"> </div> <a href="/news.html" class="thumbnail" title="艾霂's Blog - 新闻导读" rel="noopener noreferrer"> <img width="100%" height="100%" class=" lazyloaded" src="/usr/themes/Joe/assets/img/news.gif" data-src="/usr/themes/Joe/assets/img/news.gif" alt="艾霂's Blog - 新闻导读"> <time> <?php echo date('Y-m-d'); ?> </time> </a> <div class="information"> <a href="/news.html" class="title" title="艾霂's Blog - 新闻导读" rel="noopener noreferrer"> <span class="badge" style="display: inline-block; background-image: -webkit-linear-gradient(0deg,#a9ff00 0%,#007b14 100%);"> 最新 </span> 艾霂's Blog - 新闻导读 </a> <a class="abstract" href="/news.html" title="新闻摘要" rel="noopener noreferrer"> 艾霂's Blog - 新闻导读，为保证每位用户的阅读体验感，采用中国新闻网即时新闻RSS源，为广大用户带来最好的体验！ </a> <div class="meta"> <ul class="items"> <li> <?php echo date('Y年m月d日'); ?> </li> <li> 新闻导读 </li> </ul> <div class="last" style="display: flex"> <span class="link"> <svg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='15' height='15'><path d='M512.2 564.743a76.818 76.818 0 0 1-30.973-6.508L108.224 393.877c-26.105-11.508-42.56-35.755-42.927-63.272-.384-27.44 15.356-52.053 41.042-64.232l373.004-176.74c20.591-9.737 45.16-9.755 65.75.017L917.68 266.39c25.668 12.188 41.39 36.792 41.024 64.231-.384 27.5-16.821 51.73-42.908 63.237l-372.57 164.377a77.18 77.18 0 0 1-31.025 6.508zM139.843 329.592l370.213 163.241c1.291.56 3.018.567 4.345-.009l369.758-163.128-369.706-175.464v-.01c-1.326-.628-3.158-.636-4.502 0l-370.108 175.37zm748.015 1.858h.175-.175zM512.376 941.674c-10.348 0-20.8-2.32-30.537-6.997L121.05 778.624c-18.113-7.834-26.454-28.87-18.62-46.983 7.835-18.112 28.862-26.488 46.993-18.61l362.08 156.629 345.26-156.366c17.939-8.166 39.14-.253 47.324 17.746 8.166 17.964.227 39.157-17.729 47.324l-344.51 156.61c-9.196 4.449-19.281 6.7-29.471 6.7z' fill='#444'></path><path d='M871.563 515.449L511.81 671.775 152.358 515.787v73.578a34.248 34.248 0 0 0 20.76 31.48l301.518 129.19c11.806 5.703 24.499 8.546 37.175 8.546s25.367-2.843 37.174-8.546L850.82 620.534a34.248 34.248 0 0 0 20.744-31.474V515.45z' fill='#ff6a18'></path></svg> 新闻导读 </span> </div> </div> </div> </li>{callout color="#f0ad4e"}记得修改代码中，相对应的页面链接地址。要不然全部都是我的链接喽🥱{/callout}注意事项修改前，一定记得备份！图片链接最好更换成自己的图片链接！跳转错误记得修改成自己的内页链接，你可能需要将 /news.html 改成 /index.php/news.html （网站开启伪静态的可省略...）

Typecho Joe主题 RSS方式呈现“新闻早报”（功能可扩展） 前段时间 UP主 在网上冲浪，无意中找到了一篇关于《简单而完整的 PHP RSS 阅读器》的文章。经过小小的实验之后大为惊喜！这短短的20行代码也正好是我最近一直在找的。因为看到别人的博客都有 每天60秒读懂世界新闻早报 功能，感觉还是挺新鲜的😏，于是我把找到的代码在Joe主题上进行了测试，效果非常不错！于是决定分享出来给大家测试，此方法使用了简单的RSS引用方式，不必再受api资源的限制，而且可扩展性也非常强。{callout color="#f0ad4e"}注意：感觉效果不错的话，转载请注明出处哦！（本人支持转载，但一定要带上本文链接）{/callout}为何选用 RSS 方式更加比 api 具有优势呢？rss订阅源丰富，更新节奏快，api更新不稳定，我之前的方法就经常中午才更新，这还能叫早报么api大部分都有调用次数显示，比如前段时间看到的一篇文章，Joe主题首页显示新闻早报API，可每日更新（功能可扩展） 中使用的ALAPI，每日仅1000次调用次数rss的源不仅仅是新闻，更加丰富的订阅来源，而api也就那几种了。效果图预览这里页面名可自定义，虽然叫新闻早报，当然也可以改成其他的🧑‍💻 新闻页面创建首先我们创建一个单独的页面来作为新闻页，从 \usr\themes\Joe 主题根目录复制出一份 page.php 文件，并在头部添加以下代码。（这里把 page.php 文件重命名为 news.php 重新上传到Joe主题根目录）<?php /** * 新闻导读 * * @package custom * **/ ?>在你复制的 page.php 文件中，寻找到以下代码：<?php $this->need('public/article.php'); ?> <?php $this->need('public/handle.php'); ?>在上述两行代码之间，添加以下代码：<?php $rss = simplexml_load_file('https://www.chinanews.com.cn/rss/scroll-news.xml'); $title = $rss->channel->title; ?> <title><?php echo $title; ?></title> <h1 style="text-align:center;"> 艾霂's Blog - 新闻导读 </h1> <?php echo "<article class='joe_detail__article'><ol>"; foreach ($rss->channel->item as $item) { echo "<li>"; echo "<h6><a style='color: var(--minor); display: block; margin: 10px;' target='_blank' href='" . $item->link . "'>" . $item->title . "</a></h6>"; echo "<div>" . $item->description . "</div><br>"; echo "</li>"; } echo "</ol></article>"; ?> <p style="text-align:right;"> 内容来源：<?php echo $title; ?><br> Made&nbsp;by&nbsp;<a href="/" target="_blank">艾霂's Blog</a> </p>其中第二行就是我们选择的rss订阅地址，这里 UP主 用的是中国新闻网 – 即时新闻，当然你也可以换成别的，比如文章最后推荐的几个源都非常不错，你也可以自行百度。在后台新建页面，模板选择 新闻导读 ，地址栏可以填写 news 当然自己diy其他链接也是可以的，然后发布查看效果。我的新闻导读页面： 艾霂's Blog - 新闻导读 欢迎来踩！如果感觉标题多余，可以删除代码中的<h1 style="text-align:center;"> 艾霂's Blog - 新闻导读 </h1>或者<?php $this->need('public/batten2.php'); ?>这里我没做删除，我感觉不影响哈哈哈哈...RSS新闻源推荐如果你还不清楚去哪找RSS源 https://www.zhihu.com/question/19580096如果你想找更多的源 https://docs.rsshub.app/{dotted startColor="#ff6c6c" endColor="#1989fa"/}奇客Solidot https://www.solidot.org/index.rss36氪 https://36kr.com/feed月光博客 https://www.williamlong.info/rss.xml中国新闻网 https://www.chinanews.com.cn/rss/index.shtml

Typecho Joe主题 编辑器网易云音乐接口修复 哈喽大家好，最近新发现了一处Joe主题的BUG，虽然这个功能不常用，但是有总比没有强吧！众所周知Joe主题年久失更，市面上有很多魔改版的，有那么一些差强人意，今天携手 堡主 对Joe主题编辑器小BUG进行修复。好了，接下来 UP主 将对Joe主题编辑器，网易云音乐接口失效问题修复实操，进行一一讲解。问题所在问题所在如下图 上图是Joe主题作者的网站，这个错误显示的是一个接口出现 403 错误（据说api接口作者已经搬站了，所以导致接口失效！）修复方法找到问题所在目录 /usr/themes/Joe/assets/js/joe.short.min.js 文件，把失效接口链接 https://www.vvhan.com/usr/themes/Joe/NeteaseCloudMusicApi.php?id= 替换成我的的api接口，保存刷新即可！（本站承诺永不跑路） {mtitle title="api接口如下"/}https://www.ailmu.cn/usr/themes/Joe/NeteaseCloudMusicApi.php?id={mtitle title="替换完成后如下图"/} 效果展示{music id="2643172813" color="#1989fa" autoplay="autoplay"/}{callout color="#f0ad4e"}也不算是什么BUG了吧，只是api失效而已，顺便修复了一下。原文地址在这：https://www.nmssb.cn/post/88.html{/callout}

Typecho Joe主题 侧边栏添加仿mac操作栏 本站一直，致力追寻对Typecho博客Joe主题的美化和优化，这里 UP主 承诺为了不让博客美化过度只增加一些实用功能，并对Joe主题BUG进行优化修复，赋予它新的生命力！这不今天 ‌UP主 又带来了新的力作，很可能大家在别的主题或者其他系统都见过它，虽然不是很实用，但是绝对会为您的博客带来眼前一亮的感觉！今天为大家带来的是，给侧边栏添加仿mac操作栏🍵效果展示Mac样式CSS代码{callout color="#f0ad4e"}在Typecho后台 -- 设置外观 -- 全局设置 -- 自定义CSS -- 添加下面的样式{/callout}/*侧边栏添加Mac样式*/ .aimac { position: absolute; -webkit-border-radius: 50%; border-radius: 50%; background: #fc625d !important; width: 11px; height: 11px; box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; float: right; right: 55px; top: 17px; } 修改侧边栏模板侧边栏模板在Typecho根目录 /usr/themes/Joe/public/aside.php 这个文件（只有PC端才有侧边栏哟！）在每个侧边栏标题后面加一个 <span> </span> 标签，并且设置样式名和你添加的一致，我这里统一为 aimac ，代码如下：<span class="aimac"></span>具体添加位置看下图：（其它侧边栏类似）

Joe 主题对接腾讯 LBS 展示 IP 属地 偶然逛CSDN看到腾讯的LBS服务支持IP定位，而且还支持IPv6地址定位，这个是其他LBS供应商所不支持的 (百度地图、高德地图)，所以腾讯LBS服务还算良心。接下来 UP主 将用Joe主题为示例，出一个简单的教程教大家怎么样对接腾讯LBS展示IP属地！注册账号打开 腾讯位置服务 官网，点击登录，直接使用QQ登录或微信登录即可，使用QQ登录或微信登录后会提示注册或绑定账号，这个时候我们直接选择注册账户即可。创建应用打开控制台，左侧有一个应用管理，点击后可创建应用，输入应用名称和应用类型即可，无需输入域名、备案信息啥的，所以这方便无需担心。一个应用可以添加多个Key，一个Key每日可调用10000次，并发5次每秒。这时候我们选择 WebService API 服务即可，选择后有三种方案，域名白名单、授权IP、签名校验，这里为了方便展示我采用域名白名单效验。（三种方法随便大家自行选择，这里推荐授权IP效验）保存应用后我们就可以拿到一个Key，这里我们简称Ky，下面我们开始对接Joe主题展示博友访客IP属地信息。 Joe主题调用方法核心代码位置在 Joe/core/function.php 文件末尾添加以下代码：/* 腾讯Lbs IP定位服务 */ function curl_tencentlbs_ip($ip) { //应用Key也就是上面所说的Ky，修改成自己的Key即可 $key = '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['nation'].$resjson['city']; } return $resjson['nation'].$resjson['province']; } } return ''; }{callout color="#f0ad4e"}为了个人隐私，以上代码已去除城市和区县信息，仅显示国家和省份。{/callout}修改主题评论区代码评论代码位置在 usr/themes/Joe/public/comment.php 文件115行左右。具体位置如下： <?php if ($comments->authorId === $comments->ownerId) : ?> <i class="owner">作者</i> <?php endif; ?> <?php if ($comments->status === "waiting") : ?> <em class="waiting">（评论审核中...）</em> <?php endif; ?>在上方代码下面添加如下代码：<?php echo curl_tencentlbs_ip($comments->ip); ?>显示效果见本站！