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里就行了

{hide}
{cloud title=”barrager” type=”github” url=”https://cos.aiyo99.com/2022/10/30/1667115238.zip” password=””/}
{/hide}

转自

执念博客