Custom - BBCode sử dụng Regex cho SMM
Trước đây, khi xử lý bbcode với twig, mình có tham khảo code của @mrducz95, nhưng mình thấy tốc độ truy vấn của nó tốn khả nhiều thời gian, nhất là khi mình đưa nó qua một hàm custom description để lấy mô tả bài viết, thời gian tải trang RẤT LÂU. Nhận thức được vấn đề đó, mình và @Dai đã vận dụng và sử dụng Regex thay cho code cũ. Và tụi mình cũng có tham khảo cách xử lý hình ảnh danh sách smile của @tiaxgame, và thấy bó cũng rất dài dòng, nên tụi mình cũng đã thay thế chúng bằng cách sử dụng Regex để ràng buộc.
SAU ĐÂY LÀ CODE
Tạo file _bbcode
{% macro bb_img(nd) %} {% set pattern = '/\\[img\\](.*?)\\[\\/img\\]/' %} {% set loaderror = "https://i.imgur.com/806SpRu.png" %} {% set replacement = '<a href="$1" class="swipebox"><img loading="lazy" class="bb_img LoadImage" src="$1" border="2" onerror="this.onerror=null;this.src='~loaderror~'"/></a>' %} {{ nd|preg_replace(pattern, replacement)|replace({'https://i.imgur.com/': 'https://hwz.pages.dev/'})|raw }} {% endmacro %} {#================================================#} {% macro bb_url(nd) %} {% set pattern = '/\\[url=(.+?)\\](.*?)\\[\\/url\\]/' %} {% set replacement = "<i class='fa fa-link fa-spin'></i><a rel='nofollow' href='$1'>$2</a>" %} {{ nd|preg_replace(pattern, replacement)|raw }} {% endmacro %} {#================================================#} {% macro bb_vid(nd) %} {% set pattern = '/\\[vid\\](.*?)\\[\\/vid\\]/' %} {% set replacement = '<div class="video-wrapper" style="text-align: center;"><iframe loading="lazy" src="/video-embed?link=$1" height="315" width="560" scrolling="no" allowfullscreen="" frameborder="0"></iframe></div>' %} {{ nd|preg_replace(pattern, replacement)|raw }} {% endmacro %} {#================================================#} {% macro bb_simple(nd) %} {# định dạng văn bản #} {% set pattern = '/\\[(b|i|u|s|h1|h2|h3|h4|h5|h6|strong|em)\\](.*?)\\[\\/\\1\\]/' %} {% set replacement = '<$1>$2</$1>' %} {{ nd|preg_replace(pattern, replacement)|raw }} {% endmacro %} {% macro bb_align(nd) %} {# căn lề #} {% set pattern_align = '/\\[(center|left|right)\\](.*?)\\[\\/\\1\\]/' %} {% set replacement_align = '<div style="text-align:$1;">$2</div>' %} {{ nd|preg_replace(pattern_align, replacement_align)|raw }} {% endmacro %} {% macro bb_color1(nd) %} {# văn bản màu #} {% set pattern_color = '/\\[(red|blue|purple|green|orange|darkorange)\\](.*?)\\[\\/\\1\\]/' %} {% set replacement_color = '<span style="color:$1;">$2</span>' %} {{ nd|preg_replace(pattern_color, replacement_color)|raw }} {% endmacro %} {% macro bb_color2(nd) %} {% set pattern_color = '/\\[color=(.+?)\\](.*?)\\[\\/color\\]/' %} {% set replacement_color = '<span style="color:$1;">$2</span>' %} {{ nd|preg_replace(pattern_color, replacement_color)|raw }} {% endmacro %} {% macro bb_color3(nd) %} {% set pattern_color = '/\\[bcolor=(.+?)\\](.*?)\\[\\/bcolor\\]/' %} {% set replacement_color = '<span style="color:$1;font-weight:700">$2</span>' %} {{ nd|preg_replace(pattern_color, replacement_color)|raw }} {% endmacro %} {% macro bb_d(nd) %} {# tải xuống #} {% set pattern_d = '/\\[d\\](.*?)\\[\\/d\\]/' %} {% set replacement_d = '<center><a href="$1"><button class="btn btn-primary"><i class="fa fa-download"></i> Download</button></a></center>' %} {{ nd|preg_replace(pattern_d, replacement_d)|raw }} {% endmacro %} {#================================================#} {% macro smile(string) %} {% set arr_emo_name = ["ami", "anya", "aru", "aka", "dauhanh", "dora", "le", "menhera", "moew", "nam", "pepe", "qoobee", "qoopepe", "thobaymau", "troll", "dui", "firefox", "conan"] %} {% for emo_name in arr_emo_name %} {% if ":"~emo_name in string %} {% set pattern = '/[:]'~emo_name~'(\\d+)[:]/' %} {% set replacement = '<img loading="lazy" src="https://dorew-site.github.io/assets/smileys/'~emo_name~'/'~emo_name~'$1.png" alt="$1"/>' %} {% set string = string|preg_replace(pattern, replacement) %} {% endif %} {% endfor %} {{string|raw}} {% endmacro %} {#=======================================================================#} {% macro bbcode(nd) %} {% set nd = system_bb_code(nd) %} {% set nd = cancel_xss(nd) %} {% set nd = nd|nl2br %} {% set nd = _self.bb_img(nd) %} {% set nd = _self.bb_vid(nd) %} {% set nd = _self.bb_simple(nd) %} {% set nd = _self.bb_align(nd) %} {% set nd = _self.bb_color1(nd) %} {% set nd = _self.bb_color2(nd) %} {% set nd = _self.bb_color3(nd) %} {% set nd = _self.bb_d(nd) %} {% set nd = nd|replace({'<[>': '[','<:>': ':','<@>':'@','<=>':'=','[br]':'<br/>','<enter>' :'<br/>',' ,':','}) %} {% set nd = _self.bb_url(nd) %} {{_self.smile(html_decode(nd))|raw}} {% endmacro %}
Tạo file video-embed ngang hàng root/index
{% macro checkExtension(one) %} {% if one|split('.')|last == 'jpg' or one|split('.')|last == 'png' or one|split('.')|last == 'webp' or one|split('.')|last == 'psd' or one|split('.')|last == 'heic' %}file-image-o{% elseif one|split('.')|last == 'mp4' or one|split('.')|last == 'mkv' or one|split('.')|last == 'webm' or one|split('.')|last == 'flv' or one|split('.')|last == '3gp' %}file-video-o{% elseif one|split('.')|last == 'mp3' or one|split('.')|last == 'mkv' or one|split('.')|last == 'm4a' or one|split('.')|last == 'flac' or one|split('.')|last == 'wav' %}file-audio-o{% elseif one|split('.')|last == 'docx' or one|split('.')|last == 'doc' or one|split('.')|last == 'txt' or one|split('.')|last == 'md' or one|split('.')|last == 'odt' %}file-text-o{% elseif one|split('.')|last == 'txt' or one|split('.')|last == 'md' %}file-text-o{% elseif one|split('.')|last == 'docx' or one|split('.')|last == 'doc' or one|split('.')|last == 'odt' %}file-word-o{% elseif one|split('.')|last == 'xls' or one|split('.')|last == 'xlsx' %}file-excel-o{% elseif one|split('.')|last == 'ppt' or one|split('.')|last == 'pptx' %}file-powerpoint-o{% elseif one|split('.')|last == 'pdf' %}file-pdf-o{% elseif one|split('.')|last == 'zip' or one|split('.')|last == 'rar' or one|split('.')|last == '7z' or one|split('.')|last == 'tar' %}file-archive-o{% elseif one|split('.')|last == 'cpp' or one|split('.')|last == 'cs' or one|split('.')|last == 'php' or one|split('.')|last == 'html' or one|split('.')|last == 'js' or one|split('.')|last == 'py' %}file-code-o{% elseif one|split('.')|last == 'sql' %}database{% else %}file-o{% endif %} {% endmacro %} {% set fullurl0 = api.r.get['link'] %} <style>body{margin:0}</style> {% if 'youtube' in fullurl0|lower or 'youtu.be/' in fullurl0|lower %} {% set vidUrl = get_youtube_id(fullurl0) %} <iframe id="ytplayer" type="text/html"allowfullscreen="" width="100%" height="100%" src="https://youtube.076.ne.jp/embed/{{ vidUrl }}" frameborder="0"></iframe> {% elseif _self.checkExtension(fullurl0) == 'file-audio-o' or _self.checkExtension(fullurl0) == 'file-video-o' %} <div id="dplayer"></div> <script src="https://cdn.statically.io/gh/kn007/DPlayer-Lite/00dab19fc8021bdb072034c0415184a638a3e3b2/dist/DPlayer.min.js"></script> <script> const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: '{{fullurl0}}', }, }); </script> {% else %} <div id="place"></div> <script> fetch("https://noembed.com/embed?url={{fullurl0}}") .then(x => x.json()) .then(y => { document.getElementById("place").innerHTML = y.html; console.log(y.html) } ); </script> {% endif %}
Cách sử dụng:
{% from '_bbcode' import bbcode %} {{bbcode('nội dung')}}
Ngoài ra, các bạn có thể sử dụng danh sách smile có trong đoạn code trên bằng cách repo hoặc dùng link trực tiếp từ github: https://github.com/dorew-site/dorew-site.github.io/tree/main/assets/smileys
Chia sẻ
|
|
|