hexo-theme-solitude 1.7.13 → 1.7.14

package/_config.yml

@@ -64,7 +64,6 @@ nav:
   right:
     random: false # 随机文章跳转 / random post button
     console: false #控制台 / console
-    top: false # 进度球 / Progress Ball
     # 自定义按钮
     # custom button
     # 左至右
@@ -711,7 +710,7 @@ katex:
 # comment
 comment:
   enable: false
-  type: # waline, twikoo
+  type: # waline, twikoo, valine, artalk
   commentBarrage: false # 热评开关 / Hot comment switch
   lazyload: true # 懒加载
   count: true # 评论数展示
@@ -740,7 +739,12 @@ comment:
     avatar:
     visitor: false
     option: # options list
-
+  # artalk 配置信息
+  # artalk settings
+  artalk:
+    server: # server url / 后端地址
+    site: # site name / 站点名
+    option: # options
 
 # 中控台扩展 ： 最新评论 + 标签 + 文章
 console_plus: false

package/languages/en.yml

@@ -101,6 +101,10 @@ console:
   switch_keyboard: Keyboard operation
   switch_music: Music switch
   archive_unit: Posts
+  newest_comment:
+    image: Image
+    link: Link
+    code: Code
 
 sidebar:
   function: Function

package/languages/zh-CN.yml

@@ -103,6 +103,10 @@ console:
   switch_keyboard: 键盘快捷键
   switch_music: 音乐开关
   archive_unit: 篇
+  newest_comment:
+    image: 图片
+    link: 链接
+    code: 代码
 
 sidebar:
   function: 功能

package/languages/zh-TW.yml

@@ -103,6 +103,10 @@ console:
   switch_keyboard: 鍵盤快捷鍵
   switch_music: 音樂開關
   archive_unit: 篇
+  newest_comment:
+    image: 圖片
+    link: 連結
+    code: 代碼
 
 sidebar:
   function: 功能

package/layout/includes/head/config.pug

@@ -56,6 +56,11 @@
                     item: '.vemojis i'
                 }
                 break
+            case "artalk":
+                comment.owo = {
+                    body: '.atk-grp',
+                    item: '.atk-item'
+                }
             default:
                 break
         }

package/layout/includes/inject/body.pug

@@ -16,10 +16,6 @@ div
     script(src=url_for(theme.cdn.waterfall))
     script(src=url_for(theme.cdn.pjax))
 
-    if theme.comment.enable && theme.comment.type === 'valine'
-        // md5
-        script(src=url_for(theme.cdn.blueimp_md5))
-
     if theme.mermaid
         script(src=url_for(theme.cdn.mermaid_js))
 
@@ -73,14 +69,15 @@ div
         case theme.comment.type
             when 'twikoo'
                 script(src=url_for(theme.cdn.twikoo))
+            when 'waline'
+                script(src=url_for(theme.cdn.waline_js))
+            when 'valine'
+                script(src=url_for(theme.cdn.blueimp_md5))
+                script(src=url_for(theme.cdn.valine))
+            when 'artalk'
+                script(src=url_for(theme.cdn.artalk_js))
         if theme.comment.commentBarrage
-            case theme.comment.type
-                when 'twikoo'
-                    script(src=url_for(theme.cdn.twikoo_commentBarrage))
-                when 'waline'
-                    script(src=url_for(theme.cdn.waline_commentBarrage))
-                when 'valine'
-                    script(src=url_for(theme.cdn.valine_commentBarrage))
+            script(src=url_for(theme.cdn.commentBarrage))
 
     if theme.music.enable
         script(src=url_for(theme.cdn.music_js))

package/layout/includes/inject/head.pug

@@ -17,6 +17,13 @@ if theme.lightbox && theme.fancybox
 if theme.katex && theme.katex.enable
     link(rel="stylesheet", href=url_for(theme.cdn.katex))
 
+if theme.comment.enable
+    case theme.comment.type
+        when 'waline'
+            link(rel="stylesheet" href=url_for(theme.cdn.waline_css))
+        when 'artalk'
+            link(rel="stylesheet" href=url_for(theme.cdn.artalk_css))
+
 // Open Graph
 include ../head/opengraph.pug
 
@@ -73,45 +80,11 @@ script.
                     document.documentElement.classList.remove('hide-aside')
                 }
             }
-
-            win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
-                const link = document.createElement('link')
-                link.rel = 'stylesheet'
-                link.href = url
-                if (id) link.id = id
-                link.onerror = reject
-                link.onload = link.onreadystatechange = function () {
-                    const loadState = this.readyState
-                    if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
-                    link.onload = link.onreadystatechange = null
-                    resolve()
-                }
-                document.head.appendChild(link)
-            })
-
-            win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
-                const script = document.createElement('script')
-                script.src = url
-                script.async = true
-                script.onerror = reject
-                script.onload = script.onreadystatechange = function () {
-                    const loadState = this.readyState
-                    if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
-                    script.onload = script.onreadystatechange = null
-                    resolve()
-                }
-
-                Object.keys(attr).forEach(key => {
-                    script.setAttribute(key, attr[key])
-                })
-
-                document.head.appendChild(script)
-            })
         }
     )(window)
 
     console.log(
-        "%c Program: Hexo %c Theme: Solitude %c Version: v1.7.13",
+        "%c Program: Hexo %c Theme: Solitude %c Version: v1.7.14",
         "border-radius:5px 0 0 5px;padding: 5px 10px;color:white;background:#ff3842;",
         "padding: 5px 10px;color:white;background:#3e9f50;",
         "border-radius:0 5px 5px 0;padding: 5px 10px;background:#0084ff;color:white;"

package/layout/includes/widgets/nav/right.pug

@@ -15,47 +15,10 @@ if theme.nav.right.console
     .nav-button#nav-console
         a.console_switchbutton(onclick="sco.showConsole()", title=_p('nav.console'), href="javascript:void(0);")
             i.solitude.st-dashboard-fill
-if theme.nav.right.top
-    .nav-button#nav-totop(onclick="sco.toTop()")
-        a.totopbtn
-            i.solitude.st-arrow-up-line
-            span#percent= "0"
-
-    script.
-        document.addEventListener('DOMContentLoaded', () => {
-            const percent = () => {
-                let scrollTop = document.documentElement.scrollTop || window.pageYOffset
-                let totalHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight
-                let scrollPercent = Math.round(scrollTop / totalHeight * 100)
-                let percentElement = document.querySelector("#percent")
-                let viewportBottom = window.scrollY + document.documentElement.clientHeight
-                let remainingScroll = totalHeight - scrollTop
-
-                if ((document.getElementById("post-comment") || document.getElementById("footer")).offsetTop < viewportBottom || scrollPercent > 90) {
-                    document.querySelector("#nav-totop").classList.add("long")
-                    percentElement.innerHTML = GLOBAL_CONFIG.lang.backtop
-                } else {
-                    document.querySelector("#nav-totop").classList.remove("long")
-                    if (scrollPercent >= 0) {
-                        percentElement.innerHTML = scrollPercent + ""
-                    }
-                }
-
-                let elementsToHide = document.querySelectorAll(".needEndHide")
-                if (remainingScroll < 100) {
-                    elementsToHide.forEach(function (element) {
-                        element.classList.add("hide")
-                    })
-                } else {
-                    elementsToHide.forEach(function (element) {
-                        element.classList.remove("hide")
-                    })
-                }
-
-                window.onscroll = percent
-            }
-            percent()
-        })
+.nav-button#nav-totop(onclick="sco.toTop()")
+    a.totopbtn
+        i.solitude.st-arrow-up-line
+        span#percent= "0"
 #toggle-menu
     a.site-page
         i.solitude.st-menu-line

package/layout/includes/widgets/post/postMeta.pug

@@ -52,6 +52,9 @@
                                 span.leancloud_visitors(id=url_for(page.path))
                                     span.leancloud-visitors-count
                                         i.solitude.st-loading-line
+                            when 'artalk'
+                                span#ArtalkPV
+                                    i.solitude.st-loading-line
                     else if theme.busuanzi
                         span#busuanzi_value_page_pv
                             i.solitude.st-loading-line
@@ -69,5 +72,8 @@
                             when "valine"
                                 span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount")
                                     i.solitude.st-loading-line
+                            when 'artalk'
+                                span.waline-comment-count#ArtalkCount
+                                    i.solitude.st-loading-line
 
 include ./wave

package/layout/includes/widgets/third-party/comments/artalk.pug

@@ -0,0 +1,50 @@
+- const { server, site, option } = theme.comment.artalk
+- const { lazyload, count } = theme.comment
+
+script.
+    async function initComment() {
+        let artalkItem = null
+        const initArtalk = () => {
+            artalkItem = Artalk.init({
+                el: '#comment',
+                server: '!{server}',
+                site: "!{site}",
+                pageKey: location.pathname,
+                darkMode: document.documentElement.getAttribute('data-theme') === 'dark',
+            }, !{JSON.stringify(option)})
+
+            if (GLOBAL_CONFIG.lightbox === 'null') return
+            artalkItem.on('list-loaded', () => {
+                const array = []
+                artalkItem.ctx.get('list').getCommentNodes().forEach(comment => {
+                    array.push({
+                        nick: comment.data.nick,
+                        content: comment.data.content_marked,
+                        mailMd5: comment.data.email_encrypted,
+                    })
+                    const $content = comment.getRender().$content
+                    utils.lightbox($content.querySelectorAll('img:not([atk-emoticon])'))
+                    sco.owoBig()
+                })
+                GLOBAL_CONFIG.comment.commentBarrage && PAGE_CONFIG.comment && initializeCommentBarrage(array)
+            })
+
+            const destroyArtalk = () => {
+                artalkItem.destroy()
+            }
+
+            utils.addGlobalFn('pjax', destroyArtalk, 'destroyArtalk')
+        }
+
+        const artalkChangeMode = theme => {
+            const artalkWrap = document.getElementById('comment')
+            console.log(artalkWrap, artalkWrap.children.length)
+            if (!(artalkWrap && artalkWrap.children.length)) return
+            const isDark = theme === 'dark'
+            artalkItem.setDarkMode(!isDark)
+        }
+
+        utils.addGlobalFn('themeChange', artalkChangeMode, 'artalk')
+
+        initArtalk()
+    }

package/layout/includes/widgets/third-party/comments/comment.pug

@@ -12,4 +12,6 @@
             when 'waline'
                 !=partial('includes/widgets/third-party/comments/waline',{}, {cache: true})
             when 'valine'
-                !=partial('includes/widgets/third-party/comments/valine',{}, {cache: true})
+                !=partial('includes/widgets/third-party/comments/valine',{}, {cache: true})
+            when 'artalk'
+                !=partial('includes/widgets/third-party/comments/artalk',{}, {cache: true})

package/layout/includes/widgets/third-party/comments/twikoo.pug

@@ -1,12 +1,13 @@
 script.
     async function initComment() {
-        var initOptions = Object.assign(
+        const initOptions = Object.assign(
             !{JSON.stringify(theme.comment.twikoo || {})},
             {
                 el: '#comment',
-                onCommentLoaded: function () {
+                onCommentLoaded: async function () {
                     GLOBAL_CONFIG.lightbox && utils.lightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
                     sco.owoBig()
+                    GLOBAL_CONFIG.comment.commentBarrage && PAGE_CONFIG.comment && initializeCommentBarrage(await fetchComments())
                 },
                 lang: '#{theme.comment.twikoo.lang}',
             }
@@ -28,4 +29,32 @@ script.
                 document.getElementById('twikoo-count').innerText = '加载错误'
             }
         }
+
+        async function fetchComments() {
+            try {
+                const response = await fetch("!{theme.comment.twikoo.envId}", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify({
+                        event: "COMMENT_GET",
+                        accessToken: "!{theme.comment.twikoo.accessToken}",
+                        url: window.location.pathname
+                    })
+                });
+                if (!response.ok) {
+                    throw new Error("HTTP error! status: " + response.status);
+                }
+                const data = await response.json();
+                return (data.data).map(item => Object.assign({
+                    content: item.comment,
+                    nick: item.nick,
+                    mailMd5: item.mailMd5,
+                    id: item.id
+                }))
+            } catch (error) {
+                console.error("An error occurred while fetching comments: ", error);
+            }
+        }
     }

package/layout/includes/widgets/third-party/comments/valine.pug

@@ -7,7 +7,7 @@ if site.data.valine
 
 script.
     async function initComment() {
-        const initValine = () => {
+        const initValine = async () => {
             const valine = new Valine(Object.assign({
                 el: '#comment',
                 appId: '#{appId}',
@@ -25,20 +25,52 @@ script.
             }
 
             sco.owoBig();
-        }
-
-        const loadValine = async () => {
-            if (typeof Valine === 'function') initValine()
-            else {
-                await getScript('!{url_for(theme.cdn.valine)}')
-                initValine()
-            }
+            GLOBAL_CONFIG.comment.commentBarrage && PAGE_CONFIG.comment && initializeCommentBarrage(await fetchComments())
         }
 
         if (!!{lazyload}) {
-            if (!{lazyload}) utils.loadComment(document.getElementById('comment'), loadValine)
-            else setTimeout(loadValine, 0)
+            if (!{lazyload}) utils.loadComment(document.getElementById('comment'), initValine)
+            else setTimeout(initValine, 0)
         } else {
-            await loadValine()
+            await initValine()
+        }
+
+        async function fetchComments() {
+            const url = new URL('#{serverURLs}' + '/1.1/classes/Comment');
+            const params = {
+                url: window.location.pathname,
+                order: '-createdAt'
+            };
+
+            for (const [key, value] of Object.entries(params)) {
+                url.searchParams.append(key, value);
+            }
+
+            try {
+                const response = await fetch(url, {
+                    method: "GET",
+                    headers: {
+                        "X-LC-Id": "#{appId}",
+                        "X-LC-Key": '#{appKey}',
+                        "Content-Type": "application/json"
+                    },
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const data = await response.json();
+                return (data.results.filter(item => item.url === window.location.pathname)).map(item =>
+                    Object.assign({
+                        content: item.comment,
+                        nick: item.nick,
+                        mailMd5: md5(item.mail),
+                        id: item.objectId
+                    })
+                )
+            } catch (error) {
+                console.error("An error occurred while fetching comments: ", error);
+            }
         }
     }

package/layout/includes/widgets/third-party/comments/waline.pug

@@ -19,27 +19,54 @@ script.
             const walineInstance = Fn(walineOptions);
 
             utils.addGlobalFn('pjax', () => walineInstance.destroy(), 'destroyWaline');
-        }
 
-        async function loadWalineCSSAndJS() {
-            if (!walineInitFunction) {
-                await getCSS('!{url_for(theme.cdn.waline_css)}');
-                const {init} = await import('!{url_for(theme.cdn.waline_js)}');
-                walineInitFunction = init || Waline.init;
-                window.walineFn = walineInitFunction;
+            if (GLOBAL_CONFIG.lightbox) {
+                utils.lightbox(document.querySelectorAll('#comment .wl-content img:not(.wl-emoji)'));
             }
-            initWaline(walineInitFunction);
+
+            sco.owoBig();
+
+            GLOBAL_CONFIG.comment.commentBarrage && PAGE_CONFIG.comment && initializeCommentBarrage(await fetchComments())
         }
 
         if (isLazyLoad) {
-            utils.loadComment(document.getElementById('comment'),loadWalineCSSAndJS);
+            utils.loadComment(document.getElementById('comment'), initWaline(walineInitFunction));
         } else {
-            await loadWalineCSSAndJS();
+            await initWaline(walineInitFunction);
         }
 
-        if (GLOBAL_CONFIG.lightbox) {
-            utils.lightbox(document.querySelectorAll('#comment .wl-content img:not(.wl-emoji)'));
-        }
+        async function fetchComments() {
+            const url = new URL('#{envId}/api/comment');
+            const params = {
+                path: window.location.pathname,
+                sortBy: 'insertedAt_asc'
+            };
 
-        sco.owoBig();
+            for (const [key, value] of Object.entries(params)) {
+                url.searchParams.append(key, value);
+            }
+
+            try {
+                const response = await fetch(url, {
+                    method: "GET",
+                    headers: {
+                        "Content-Type": "application/json"
+                    },
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const data = await response.json();
+                return (data.data).map(item => Object.assign({
+                    nick: item.nick,
+                    mailId: item.avatar,
+                    content: item.comment,
+                    id: item.objectId
+                }))
+            } catch (error) {
+                console.error("An error occurred while fetching comments: ", error);
+            }
+        }
     }

package/layout/includes/widgets/third-party/news-comment/artalk.pug

@@ -0,0 +1,98 @@
+- const { server, site, option } = theme.comment.artalk
+- const avatarCdn = option !== null && option.gravatar && option.gravatar.mirror
+- const avatarDefault = option !== null && option.gravatar && (option.gravatar.params || option.gravatar.default)
+
+script.
+    window.addEventListener('load', () => {
+        const changeContent = (content) => {
+            if (content === '') return content
+
+            const replacements = [
+                {regex: /<img.*?src="(.*?)"?[^\>]+>/ig, replacement: '[!{_p("console.newest_comment.image")}]'},
+                {regex: /<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,replacement: '[!{_p("console.newest_comment.link")}]'},
+                {regex: /<pre><code>.*?<\/pre>/gi, replacement: '[!{_p("console.newest_comment.code")}]'},
+                {regex: /<[^>]+>/g, replacement: ''}
+            ];
+
+            content = replacements.reduce((str, {regex, replacement}) => str.replace(regex, replacement), content);
+
+            return content.length > 150 ? content.substring(0, 150) + '...' : content;
+        }
+
+        const $asideList = document.querySelector('#card-newest-comments .aside-list')
+
+        const generateHtml = array => {
+            $asideList.innerHTML = array.length ? array.map(item => `
+                                <div class='aside-list-item'>
+                                  <a onclick='pjax.loadUrl("${item.url}")' class='thumbnail'>
+                                    <img src='${item.avatar}' alt='${item.nick}'>
+                                    <div class='name'><span>${item.nick}</span></div>
+                                  </a>
+                                  <div class='content'>
+                                    <a class='comment' onclick='pjax.loadUrl("${item.url}")'>${item.content}</a>
+                                    <time class="datetime" datetime="${item.date}"></time>
+                                  </div>
+                                </div>
+                              `).join('') : "!{_p('newest_comment.zero')}"
+            window.lazyLoadInstance && window.lazyLoadInstance.update()
+            window.pjax && window.pjax.refresh()
+            sco && sco.changeTimeFormat(document.querySelectorAll('.aside-list-item time'))
+        }
+
+        const getSetting = async () => {
+            try {
+                const res = await fetch('!{server}/api/v2/conf', {method: 'GET'})
+                return await res.json()
+            } catch (e) {
+                console.log(e)
+            }
+        }
+
+        const headerList = {
+            method: 'GET',
+        }
+
+        const searchParams = new URLSearchParams({
+            'site_name': "!{site}",
+            'limit': '6',
+        })
+
+        const getComment = async () => {
+            try {
+                const res = await fetch(`!{server}/api/v2/stats/latest_comments?${searchParams}`, headerList)
+                const result = await res.json()
+                const avatarStr = await getSetting()
+                const {mirror, params, default: defaults} = avatarStr.frontend_conf.gravatar
+                const avatarCdn = !{avatarCdn} || mirror
+                let avatarDefault = !{avatarDefault} || params || defaults
+                avatarDefault = avatarDefault.startsWith('d=') ? avatarDefault : `d=${avatarDefault}`
+                const artalk = result.data.map(function (e) {
+                    return {
+                        'avatar': `${avatarCdn}${e.email_encrypted}?${avatarDefault}`,
+                        'content': changeContent(e.content_marked),
+                        'nick': e.nick,
+                        'url': e.page_url,
+                        'date': e.date,
+                    }
+                })
+                saveToLocal.set('artalk-newest-comments', artalk, !{theme.comment.newest_comment.storage})
+                generateHtml(artalk)
+            } catch (e) {
+                console.log(e)
+                $asideList.textContent = "!{_p('newest_comment.error')}"
+            }
+        }
+
+        const newestCommentInit = () => {
+            if ($asideList) {
+                const data = saveToLocal.get('artalk-newest-comments')
+                if (data) {
+                    generateHtml(data)
+                } else {
+                    getComment()
+                }
+            }
+        }
+        newestCommentInit()
+        utils.addGlobalFn('pjaxComplete', newestCommentInit, 'artalk_newestComment')
+    })

package/layout/includes/widgets/third-party/news-comment/newest-comment.pug

@@ -5,4 +5,6 @@ if theme.comment.enable && theme.console_plus && theme.comment.newest_comment.en
         when 'waline'
             !=partial('includes/widgets/third-party/news-comment/waline',{}, {cache: true})
         when 'valine'
-            !=partial('includes/widgets/third-party/news-comment/valine',{}, {cache: true})
+            !=partial('includes/widgets/third-party/news-comment/valine',{}, {cache: true})
+        when 'artalk'
+            !=partial('includes/widgets/third-party/news-comment/artalk',{}, {cache: true})

package/layout/includes/widgets/third-party/news-comment/twikoo.pug

@@ -4,14 +4,14 @@ script.
             if (content === '') return content;
 
             const replacements = [
-                {regex: /<img.*?src="(.*?)"?[^\>]+>/ig, replacement: '<i class="solitude st-image-fill"></i>'},
-                {regex: /<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, replacement: '<i class="solitude st-link"></i>'},
-                {regex: /<pre><code>.*?<\/pre>/gi, replacement: '<i class="solitude st-code-box-fill"></i>'},
-                {regex: /<p>|<\/p>/g, replacement: ''}
+                {regex: /<img.*?src="(.*?)"?[^\>]+>/ig, replacement: '[!{_p("console.newest_comment.image")}]'},
+                {
+                    regex: /<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,
+                    replacement: '[!{_p("console.newest_comment.link")}]'
+                },
+                {regex: /<pre><code>.*?<\/pre>/gi, replacement: '[!{_p("console.newest_comment.code")}]'},
+                {regex: /<[^>]+>/g, replacement: ''}
             ];
-
-            console.log(content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '<i class="solitude st-gallery-image">'))
-
             content = replacements.reduce((str, {regex, replacement}) => str.replace(regex, replacement), content);
 
             return content.length > 150 ? content.substring(0, 150) + '...' : content;

package/layout/includes/widgets/third-party/news-comment/valine.pug

@@ -4,9 +4,9 @@ script.
             if (content === '') return content;
 
             const replacements = [
-                {regex: /<img.*?src="(.*?)"?[^\>]+>/ig, replacement: '<i class="solitude st-image-fill"></i>'},
-                {regex: /<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, replacement: '<i class="solitude st-link"></i>'},
-                {regex: /```[\s\S]*?```/g, replacement: '<i class="solitude st-code-box-fill"></i>'},
+                {regex: /<img.*?src="(.*?)"?[^\>]+>/ig, replacement: '[!{_p("console.newest_comment.image")}]'},
+                {regex: /<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, replacement: '[!{_p("console.newest_comment.link")}]'},
+                {regex: /```[\s\S]*?```/g, replacement: '[!{_p("console.newest_comment.code")}]'},
                 {regex: /<[^>]+>/g, replacement: ""}
             ];
 

package/layout/includes/widgets/third-party/news-comment/waline.pug

@@ -4,9 +4,9 @@ script.
             if (content === '') return content;
 
             const replacements = [
-                {regex: /<img.*?src="(.*?)"?[^\>]+>/ig, replacement: '<i class="solitude st-image-fill"></i>'},
-                {regex: /<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, replacement: '<i class="solitude st-link"></i>'},
-                {regex: /<pre><code>.*?<\/pre>/gi, replacement: '<i class="solitude st-code-box-fill"></i>'},
+                {regex: /<img.*?src="(.*?)"?[^\>]+>/ig, replacement: '[!{_p("console.newest_comment.image")}]'},
+                {regex: /<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, replacement: '[!{_p("console.newest_comment.link")}]'},
+                {regex: /<pre><code>.*?<\/pre>/gi, replacement: '[!{_p("console.newest_comment.code")}]'},
                 {regex: /<[^>]+>/g, replacement: ""}
             ];