Diễn đàn Flarum được phát triển theo hướng Single page nên khá phức tạp trong việc custom lại các chức năng.
Để thêm quảng cáo thì bạn có 2 cách.
1. Cách thứ nhất
Viết một trình extend cho Flarum và sử dụng nó, cách này các bạn kham khảo trong tài liệu của Flarum nha. Tài liệu có sẵn: https://docs.flarum.org/vi/extend/start/
2. Cách thứ hai
Thì mình viết đoạn js để can thiệp vào cấu trúc HTML của Flarum sau khi nó được render.
Tạo file js public/assets/ads.js với nội dung bên dưới:
(function(){
function render(start = false){
// Render banner in content
let content = document.querySelector('.PostStream');
let item = null;
for (let i = 1; i < 11; i++) {
if (content && !content.querySelector('[data-cpd-position="after-content-'+i+'"]')) {
item = document.querySelector('.PostStream > .PostStream-item:nth-child('+i+'):not(:last-child)');
if (item) {
// item.style.borderBottom = 'none';
item.insertAdjacentHTML('beforeEnd', '<div data-cpd-position="after-content-'+i+'">Nội dung quảng cáo</div>');
}
}
}
// Render banner in list of topic
if (start) event();
}
function event(){
var body = document.body;
var observer = new MutationObserver(function() {
render();
});
// Start observing the target node for configured mutations
observer.observe(body, { attributes: false, childList: true, subtree: true });
}
document.addEventListener("DOMContentLoaded", () => {
render(true);
});
})()
Sau đó vào trong file extend.php thêm đoạn:
use Flarum\Extend;
use Flarum\Frontend\Document;
return [
// Register extenders here to customize your forum!
(new Extend\Frontend('forum'))
->content(function (Document $document) {
$document->head[] = '<script src="'.app('flarum.config')['url'].'/assets/ads.js?v='.time().'"></script>';
})
];
Bạn thay thế nội dung quảng cáo tuỳ thích.
