前言
主要是结合自己实践,总结遇到的问题和做个备份
成果展示
{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&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}
转自
请登录后查看评论内容