『教程』首页及文章页滚动广告栏 前言因为之前在很多网站上都能看到广告，虽然但是，这对很多博主来说也是一笔额外的收入，我一直是入不敷出！:@(吐血倒地) 然后我看到了执念博客的首页广告栏，虽然曝光确实大，但是用户体验极其不好，因为要翻很多广告才能翻到文章，就像这样：所以我就想到了滚动广告，一个广告的位置，能够显示多条广告成果展示{tabs}{tabs-pane label="首页"}{/tabs-pane}{tabs-pane label="文章页"}{/tabs-pane}{/tabs}教程开始灵感及相关代码来自于Joe主题的首页轮播图一、添加后台打开 functions.php 添加以下代码$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}{tabs-pane label="首页"} 因为首页已经有广告位了，所以直接替换就行了将主题 index.php 的以下代码直接替换为新代码{collapse}{collapse-item label="代码位置" open}{/collapse-item}{collapse-item label="新代码"}隐藏内容，请前往内页查看详情{/collapse-item}{/collapse}{/tabs-pane}{tabs-pane label="文章页"}文章页直接在主题的 post.php 文件内合适的地方加入以下代码{collapse}{collapse-item label="代码位置" open}{/collapse-item}{collapse-item label="代码"}隐藏内容，请前往内页查看详情{/collapse-item}{/collapse}{/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}四、添加滚动效果{tabs}{tabs-pane label="首页"}首页因为引入了滚动效果，所有不需要设置，会直接调用首页轮播图的滚动效果但是会根据首页轮播图的滚动方式滚动，效果不太好，暂时没想到比较好的解决方法{/tabs-pane}{tabs-pane label="文章页"}首先在主题的 post.php 文件内 标签内加入以下代码<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"},})}添加位置{/tabs-pane}{/tabs}教程结束大功告成，快刷新你的网站看看效果吧！

好久不见之网站底部样式 好久不见之本站同款网站底部样式，效果见本站。1.修改footer.php首先，在页脚文件footer.php文件的最下面放入以下代码：隐藏内容，请前往内页查看详情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位相遇的小伙伴……这里的实现看这里：在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)']); }4.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; ?>{callout color="#ef6d4d"}转载来源： {abtn color="#ff0d00" href="https://chenyu.me/1422.html" content="醉书生"/}{/callout}

Joe主题侧边栏添加奥运会奖牌排名教程 效果图请看侧边栏嵌入地址：https://act.e.mi.com/olympic/index.html在主题后台侧边栏设置中自定义侧边栏模块添加以下内容{mtitle title="代码"/}隐藏内容，请前往内页查看详情

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&amp;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}（三）第三段不要耍小聪明，放到include.php里去，不会显示弹幕的 {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=" include.php 文件"}<?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{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'); $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里就行了隐藏内容，请前往内页查看详情转自执念博客

【技巧】给网站添加pjax无刷新，换页音乐不中断 自从博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能 在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加pjax，于是又苦苦寻找并尝试了一番 最后发现网上实现pjax功能基本上是两种方法。方法一第一种方法是来自大佬友人C的博客。<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script> <script> $(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', { container: '#pjax-container', fragment: '#pjax-container', timeout: 8000 }) </script>将以上代码放入页脚文件foot.php或者footer.php文件的最下面。解释一下上面代码：是typecho的自带函数，调用本站的首页地址！也就是只对本站的，并且没有_blank属性的，标签里不含no-pjax的链接实行pjax！局部刷新的区域是#pjax-container的部分！其中#pjax-container是你的局部刷新部分，你可能没有这个div，你自己在添加一个包裹住你想局部刷新的部分就行了！方法二第二种方法是来自大佬保罗的小宇宙的博客。<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script> <script> var pjax = new Pjax({ elements: "a", // 在页面进行 PJAX 时需要被替换的元素或容器，一条一个 CSS 选择器，数组形式 selectors: [ "title", "meta[name=description]", // 如果是全部 meta 替换的话，只需要写 meta "main" ], cacheBust: false }) </script>和第一种方法一样，将以上代码放入页脚文件foot.php或者footer.php文件的最下面。局部刷新的区域是main的部分！其中main是你的局部刷新部分，你可能没有这个div，你自己在添加一个包裹住你想局部刷新的部分就行了！测试（joe主题）两种方法我这边都测试过了，最终第二种方法是成功的，然后由于我主题的特殊性，在成功之后出现跳转页面后出现内容显示不完全的BUG，解决的方法是把index.php文件和post.php文件中主体部分所有引用页面的部分全部都放在放在各自的页面里面。如index.php中引用的<!-- 列表 --> <?php $this->need('component/index.list.php'); ?>就把component/index.list.php文件里的所有代码全部复制到index.php文件的下面即可。由于joe主题引用的文件实在是太多，其实是懒得弄所以就此搁置！有兴趣的话自己可以尝试下。

Joe主题头像呼吸灯 在主题后台全局css里添加 /*头像呼吸光环和鼠标悬停旋转放大*/ .avatar { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .avatar:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;} }

Joe主题海报插件美化 生成海报

Joe 主题 6.xx 底部增强，显示标签及二维码分享 原理也简单，不细说了。直接上教程。下载二维码生成器https://wws.lanzous.com/iXmw5ng959c密码:ddsp解压后得到一个叫 poster 的文件夹，放到 joe 的主题目录里。添加 html找到 Joe/public/handle.php 在文件最下面添加 <footer class="entry-footer" id="footfix"> <div class="entry-bar-inner" style="width: auto;"> <div class="post-tags"> <?php $this->tags('', true, ''); ?> </div> <div class="readlist"> <div href="javascript:;" id="mClick" class="mobile_click"> <div class="share"> <div class="Menu-item"><a href="javascript:Share('tqq')"><svg t="1617016842691" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1271" width="20" height="20"><path d="M510.138606 62.785975c-247.246127 0-447.679066 200.431915-447.679066 447.679066S262.891456 958.144106 510.138606 958.144106s447.679066-200.431915 447.679066-447.679066S757.384733 62.785975 510.138606 62.785975zM725.157751 635.028011c-9.552563 5.081739-24.467251-6.489808-38.461987-27.720342-5.516644 23.134907-19.282159 44.057425-38.842657 60.886719 20.558222 7.739265 33.964556 20.400632 33.964556 34.704406 0 23.52581-36.31509 42.59819-81.136925 42.59819-40.400129 0-73.909313-15.502066-80.113619-35.821857-1.610684-0.026606-7.995091-0.026606-9.655917 0-6.178723 20.345374-39.660278 35.821857-80.08906 35.821857-44.819788 0-81.136925-19.044752-81.136925-42.59819 0-14.329357 13.422707-26.965142 33.965579-34.704406-19.588127-16.803711-33.301454-37.751812-38.842657-60.886719-13.996782 21.231557-28.950356 32.801057-38.487569 27.720342-13.829983-7.372921-11.031241-46.844911 6.195096-88.217181 13.509688-32.488948 31.936363-56.459896 45.880957-61.747319-0.179079-2.085498-0.25685-4.169973-0.25685-6.253424 0-12.58462 3.422959-24.178679 9.221012-33.638121-0.027629-0.728594-0.078795-1.483794-0.078795-2.213411 0-5.758144 1.341554-11.177574 3.664459-15.891945 3.515057-84.520999 57.476039-151.633512 144.80499-151.633512 87.277786 0 141.215232 67.113537 144.764058 151.633512 2.299369 4.689812 3.654226 10.108219 3.654226 15.891945 0 0.728594 0 1.483794-0.101307 2.213411 5.849218 9.458419 9.269108 21.079084 9.269108 33.638121 0 2.083451-0.103354 4.193509-0.305969 6.253424 14.045901 5.287423 32.407084 29.232788 45.944402 61.747319C736.266763 588.157517 738.996944 627.654067 725.157751 635.028011z" p-id="1272"></path></svg> QQ 分享</a></div> <div class="Menu-item"><a href="javascript:Share('sina')"><svg t="1617016892561" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2124" width="18" height="18"><path d="M428.465 463.138c-88.93 12.19-154.28 71.145-145.986 131.497 8.394 60.353 87.132 99.423 176.063 87.232 88.93-12.29 154.28-71.144 145.986-131.497-8.394-60.453-87.132-99.522-176.063-87.232z m26.68 175.463c-46.364 8.893-89.73-13.69-96.725-50.56-7.094-36.772 24.78-73.843 71.144-82.736 46.364-8.893 89.63 13.79 96.725 50.56 7.094 36.872-24.78 73.943-71.145 82.736z" p-id="2125"></path><path d="M512.3 0.8C229.72 0.8 0.7 229.82 0.7 512.4S229.72 1024 512.3 1024s511.6-229.021 511.6-511.6S794.78 0.8 512.3 0.8z m184.955 590.238c-23.282 71.744-160.075 182.658-347.928 115.61-76.94-31.176-126.7-102.72-95.625-185.455 55.057-136.494 249.505-211.235 246.907-106.317-1 19.185-1 30.076 27.878 14.788 83.635-42.367 115.91 21.384 96.125 60.253-12.59 19.885 14.089 14.09 14.089 14.09s89.63-20.785 58.554 87.031z m-21.583-138.192c5.396-69.845-60.852-58.154-65.049-57.655-4.197 0.5-9.792-3.197-10.592-9.792-0.9-6.595 4.197-11.091 11.691-11.89 99.123-10.493 83.735 80.336 82.835 87.031-0.999 6.695-4.496 13.99-13.39 11.791-8.992-2.298-4.496-13.19-5.495-19.485z m96.325 20.284c-3.997 11.591-12.99 26.68-27.479 23.082-15.987-4.296-13.49-24.98-10.292-38.47 23.282-122.804-104.018-115.91-130.698-115.91-7.194-0.699-21.483-9.392-21.383-22.681 0.1-13.39 16.287-19.585 23.482-20.884 227.122-14.689 168.268 161.474 166.37 174.863z" p-id="2126"></path><path d="M424.069 555.366c-15.988 0-28.978 11.091-28.978 24.68 0 13.69 12.99 24.682 28.978 24.682s28.977-10.992 28.977-24.681c0-13.59-12.89-24.68-28.977-24.68z m47.563-16.087c-5.996 0-11.991 7.194-11.991 15.987 0 8.893 6.095 16.088 11.99 16.088 5.996 0 12.091-7.195 12.091-16.088-0.1-8.793-6.195-15.987-12.09-15.987z" p-id="2127"></path></svg> 微博分享</a></div> <div class="Menu-item"><svg t="1617016924519" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3060" width="18" height="18"><path d="M710.4 511.36c16.64 0 29.44 10.88 29.44 24.32 0 10.88-12.8 21.76-29.44 21.76-12.8 0-23.68-10.88-23.68-21.76 0.64-13.44 11.52-24.32 23.68-24.32zM337.92 340.48c16.64 0 30.08 10.88 30.08 29.44 0 17.28-13.44 29.44-30.08 29.44-17.92 0-35.84-12.16-35.84-29.44 0-18.56 17.92-29.44 35.84-29.44z m165.12 58.24c-17.28 0-33.92-11.52-33.92-29.44 0-18.56 16.64-29.44 33.92-29.44 18.56 0 30.08 10.88 30.08 29.44 0 17.92-12.16 29.44-30.08 29.44z m76.8 112.64c17.28 0 30.08 10.88 30.08 24.32 0 10.88-12.8 21.76-30.08 21.76-11.52 0-23.68-10.88-23.68-21.76 0-13.44 11.52-24.32 23.68-24.32zM415.36 641.92c6.4 0 14.08 0 21.12-0.64-4.48-16.64-6.4-32.64-6.4-49.92 0-102.4 87.68-187.52 200.96-187.52 6.4 0 14.08 0.64 22.4 2.56-20.48-97.92-122.88-165.76-238.08-165.76-129.92 0-236.8 87.04-236.8 200.32 0 64 35.2 117.12 94.08 158.72l-24.32 71.68 84.48-42.88c28.8 8.32 51.84 13.44 82.56 13.44z m347.52 81.28c46.72-33.92 82.56-81.92 82.56-135.04 0-95.36-95.36-172.16-200.96-172.16-112 0-200.32 76.8-200.32 172.16s88.32 171.52 200.32 171.52c24.32 0 47.36-7.68 71.68-12.16l63.36 35.84-16.64-60.16zM512 0c282.88 0 512 229.12 512 512s-229.12 512-512 512S0 794.88 0 512 229.12 0 512 0z" p-id="3061"></path></svg> 微信分享<img src="<?php $this->options->themeUrl("poster/api.php"); ?>?url=<?php $this->permalink() ?>"> </div> </div> <div><svg t="1617016981855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3873" width="15" height="15"><path d="M826.48 660.9c-60.456 0-109.88 32.358-132.9 82.596L401.373 619.203c17.045-26.404 26.41-58.768 26.41-93.666 0-14.459-1.706-28.943-5.12-42.573l186.572-144.752c24.72 18.729 56.253 29.798 91.177 29.798 84.347 0 147.38-63.012 147.38-146.432 0-83.45-63.054-146.462-147.38-146.462-84.352 0-146.535 63.011-146.535 146.462 0 21.29 4.265 40.868 11.07 57.892L392.837 411.433c-34.068-51.087-90.301-86.856-154.194-86.856-104.192-0.26-188.866 83.989-189.122 188.18a23.803 23.803 0 0 0 0 0.856c-0.2 104.192 84.106 188.815 188.298 189.015h0.83c39.188 0 75.811-10.194 105.635-28.928l335.683 143.032c4.27 79.176 65.602 137.923 146.509 137.923 84.372 0 146.554-62.992 146.554-146.437s-63.058-147.313-146.529-147.313h-0.02z" p-id="3874" fill="#ffffff"></path></svg> 分享</div> </div> </div> </div> </footer> <script type="text/javascript"> $("#mClick").click(function (e) { if ($(this).hasClass('mobile_click')){ $(this).prop('class','mobile_close') }else{ $(this).prop('class','mobile_click') } }) function Share(pType){ var pTitle = "<?php $this->title(); ?>"; //待分享的标题 var pImage = "<?php $this->fields->thumb(); ?>"; //待分享的图片 var pContent = '<?php _e(str_replace(array("\r\n","\n","\r"),'<br/>',Typecho_Common::subStr(strip_tags($this->excerpt), 0, 80, '...')));?>'; //待分享的内容 var pUrl = window.location.href; //当前的url地址 var pObj = jQuery("div[class='yogo_hc']").find("h4"); if(pObj.length){ pTitle = pObj.text();} var pObj = jQuery("div[class='yogo_hcs']").find("em"); if(pObj.length){ pContent = pObj.text(); } var pObj = jQuery("div[class='con_cons']").find("img"); if(pObj.length){ pImage = jQuery("div[class='con_cons']").find("img",0).attr("src");} shareys(pType, pUrl, pTitle,pImage, pContent); } function shareys(a, c, b, e, d) { switch (a) { case "sina": c = "http://service.weibo.com/share/share.php?title\x3d" + encodeURIComponent(d + "\u300c" + b + "\u300d \u70b9\u8fd9\u91cc" + c) + "\x26pic\x3d" + e; window.open(c); break; case "tqq": c = "https://connect.qq.com/widget/shareqq/index.html?url\x3d" + encodeURIComponent(c) + "\x26title\x3d" + encodeURIComponent(b) + "\x26pics\x3d" + e; window.open(c); break; case "qzone": c = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url\x3d" + encodeURIComponent(c) + "\x26title\x3d" + encodeURIComponent(b) + "\x26site\x3d\x26pics\x3d" + encodeURIComponent(e) + "\x26desc\x3d" + encodeURIComponent(d) + "\x26summary\x3d" + encodeURIComponent(d); window.open(c); break; case "ren": c = "http://widget.renren.com/dialog/share?resourceUrl\x3d" + encodeURIComponent(c) + "\x26srcUrl\x3d" + e + "\x26title\x3d" + encodeURIComponent(b), NaN + d, window.open(c) } } </script>添加自定义cssbody #footfix.entry-footer { display: table; width: 100%; padding: 10px; } body #footfix.entry-footer .share { position: absolute; background: #fff; border: 1px solid #ebebeb; border-radius: 4px; -webkit-box-shadow: 0 5px 20px rgba(26, 26, 26, 0.1); box-shadow: 0 5px 20px rgba(26, 26, 26, 0.1); z-index: 203; padding: 15px 0; width: 110px; animation: left 0.5s; left: -43px; top: -200px; } body #footfix.entry-footer .share .Menu-item { display: block; width: 100%; padding: 0 15px; text-align: left; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; color: black; } body #footfix.entry-footer .share .Menu-item a { color: var(--main); } body #footfix.entry-footer .share .Menu-item img { max-width: 100%; height: auto; transition: opacity 0.3s; vertical-align: middle; } body #footfix.entry-footer .mobile_click .share { display: none; } body #footfix.entry-footer .post-tags a { margin-right: 15px; margin-bottom: 15px; line-height: 32px; display: inline-block; padding: 0 8px; background: var(--classC); border-radius: 3px; color: var(--minor); cursor: pointer; float: left; font-size: 11px; } body #footfix.entry-footer #mClick.mobile_click, body #footfix.entry-footer #mClick.mobile_close { float: right; color: #fff; padding: 0 10px; background: var(--theme); border-radius: 2px; font-size: 11px; line-height: 32px; cursor: pointer; } body #footfix.entry-footer #mClick.mobile_click, body #footfix.entry-footer #mClick.mobile_close { float: right; color: #fff; padding: 0 10px; background: var(--theme); border-radius: 2px; font-size: 11px; line-height: 32px; cursor: pointer; } body #footfix.entry-footer #mClick.mobile_close { position: relative; } body #footfix.entry-footer a#mClick, body #footfix.entry-footer a#mStats { opacity: 1; }本文转自： 即刻学术