Tpecho的Joe主题添加评论弹幕功能(限PC)

主要是结合自己实践,总结遇到的问题和做个备份

效果图

Tpecho的Joe主题添加评论弹幕功能(限PC),Typecho,Typecho教程,第1张

Tpecho的Joe主题添加评论弹幕功能(限PC),Typecho,Typecho教程,第2张



修改header.php文件

新增代码,文件路径:usr/themes/Joe/public/header.php

第一段

<!-- 弹幕 -->
<?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; ?>

代码位置

Tpecho的Joe主题添加评论弹幕功能(限PC),2394982597.png,Typecho,Typecho教程,第3张


第二段

<!-- 弹幕 -->
<?php if ($this->options->JBarragerStatus === 'on') : ?>
    <div class="item">
        <input id="barrager" class="barrager" type="checkbox" title="开启/关闭弹幕">
    </div>
<?php endif; ?>

代码位置

Tpecho的Joe主题添加评论弹幕功能(限PC),2789616006.png,Typecho,Typecho教程,第4张


第三段

不要耍小聪明,放到include.php里去,不会显示弹幕的

<!-- 弹幕 -->
<?php if ($this->options->JBarragerStatus === 'on') : ?>
    <script src="<?php $this->options->themeUrl('library/barrager/joe.barrager.js'); ?>"></script>
<?php endif; ?>


代码位置

Tpecho的Joe主题添加评论弹幕功能(限PC),490030556.png,Typecho,Typecho教程,第5张


修改include.php文件

新增如下代码;文件路径:usr/themes/Joe/public/include.php

<?php if ($this->options->JBarragerStatus === 'on') : ?>
    <link rel="stylesheet" href="<?php $this->options->themeUrl('library/barrager/joe.barrager.css'); ?>">
<?php endif; ?>

代码位置

Tpecho的Joe主题添加评论弹幕功能(限PC),490030556.png,Typecho,Typecho教程,第6张

修改functions.php

文件路径usr/themes/Joe/functions.php

$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());

代码位置

Tpecho的Joe主题添加评论弹幕功能(限PC),164501085.png,Typecho,Typecho教程,第7张

如果创建过 custom.php 文件,直接放到 custom.php 里就行了

但是记得要在 functions.php 引入 custom.php 哦


修改config.php文件

文件路径:usr/themes/Joe/public/config.php

添加代码

/* 弹幕 */
DOCUMENT_BARRAGER: '<?php echo $this->options->JBarragerStatus === 'on' ? 'on' : 'off' ?>',


代码位置

Tpecho的Joe主题添加评论弹幕功能(限PC),1018199740.png,Typecho,Typecho教程,第8张


上传CSS和JS

将下载文件,放在usr/themes/Joe/library里就行了

「小礼物走一走?华子可乐来一个!」

还没有人赞赏,支持一下吧

哇~真是太棒了 感谢大佬支持

可乐华子奶茶傍一矿泉水
支付宝
内容投诉

下载说明:

1.本站资源都是白菜价出售,同样的东西,我们不卖几百,也不卖几十,甚至才卖几块钱,一个永久VIP能下载全站会员专属源码了,所以单独购买也好,会员也好均不提供相关技术服务。

2.如果源码下载地址失效请 提交留言(点击我)进行补发。

3.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!

4.本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,【晓梦云】对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。

5.请您认真阅读上述内容,购买即以为着您同意上述内容。


晓梦云资源网 » Tpecho的Joe主题添加评论弹幕功能(限PC)

发表评论

您需要后才能发表评论

晓梦云资源站、分享更多优质有趣的源码!

特权介绍 留言处理