tk-owo-emotion) display none - kết quả tỷ số

calendar Mar 17, 2025 · 11 phút đọc · kết quả tỷ số  ·
Chia sẻ trên: linkedin copy

Được xuất bản vào 27-06-2024 | Thâm Quyến | Chia Sẻ Kinh Nghiệm | Tổng Số Từ: 10.1k | Thời Gian Đọc Dự Kiến: 58 phút | Số Lượt Đọc: 417 | Số Bình Luận: ]

Bài viết được đồng bộ trên nhiều nền tảng Cập nhật 230821: Thêm API JSON gốc cho bài viết, không cần thêm cấu trúc dữ liệu thủ công nữa~ Cập nhật 230720: Sửa lỗi khi không có container trong bảng điều khiển Cập nhật 230718: Sửa lỗi hiển thị số lượng bình luận trên thẻ cá nhân. Thêm dấu hiệu tác giả, cải thiện kiểu UI Cập nhật 240628: Thêm chức năng lọc và khớp bình luận; điều chỉnh, giảm bớt các phong cách UI dư thừa và tối ưu hóa JS Cập nhật 240702: Cải tiến cửa sổ bình luận nổi bật, điều chỉnh UI, cập nhật địa chỉ hướng dẫn

[Phiên Bản Mới

]( "Xem Trước Hiệu Ứng") Xem Trước Hiệu Ứng

![Xem nhanh bình luận mới nhất của trang web này]

[]( "Tạo Dữ Liệu") Tạo Dữ Liệu

  • Tạo trang [blogRoot]/source/comments/index.md
11234567891011121314

| ``` ---tiêu đề: Bình Luận Mới Nhấthttp_date: 2023-07-17 14:07:01loại: bình luậndừng_hình_ảnh: falselề_phải: falsetrang_chính: truephông_chính: Tốc độxem_tiêu_đề: Bình Luận Mới Nhấtxem_gợi_y: Xem nhanh bình luận mới nhất của trang web này---

1
2---
3 * Chỉnh sửa `[blogRoot]/themes/butterfly/layout/page.pug` để phù hợp với trang (**+** dấu cộng xóa dòng là đúng lề)

123456

1| ```
2   khi 'danh mục'    bao gồm includes/page/categories.pug+   khi 'bình luận'+    bao gồm includes/page/comments.pug   mặc định    bao gồm includes/page/default-page.pug
  • Tạo trang [blogRoot]/themes/butterfly/layout/includes/page/comments.pug và thêm nội dung sau
1123

| ``` #comments-page .page-load img(src=" style="margin:auto")

1
2---
3 * Tạo tệp tin kiểu `[blogRoot]/themes/butterfly/source/css/_page/comment.styl` và thêm nội dung sau

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152

1| ```
2#comments-page  display: flex  flex-wrap: wrap  gap: 12px  width: 100%  margin-top: 1.5rem  .page-load    display: flex    width: 100%  .comment-card    position: relative    width: calc(100% / 4 - 9px)    border-radius: 12px    border: var(--style-border)    padding: 14px    cursor: pointer    transition: .3s    overflow: hidden    box-shadow: var(--icat-shadow-border)    background: var(--icat-card-bg)    animation: slide-in .6s .4s backwards    will-change: transform    +maxWidth1024()      width: calc(100% / 2 - 6px)    +maxWidth768()      width: 100%      &:hover      border-color: var(--icat-blue)      .comment-more        opacity: 1    .comment-info      display: flex      align-items: center      padding-bottom: 14px      margin-bottom: 8px      border-bottom: 1px dashed var(--hr-border)      img        width: 50px        height: 50px        object-fit: cover        border-radius: 50%        margin: 0 !important      .comment-information        display: flex        flex-direction: column        margin-left: 12px        line-height: 1.5        .comment-user          display: flex          align-items: center          font-weight: bold          font-size: 15px        .comment-author          &:after            content: "\e04f"            font-family: "iconfont" !important            padding-left: 6px            font-size: 14px            màu sắc: var(--icat-green)        .comment-time          opacity: .8          font-size: 12px  .comment-content    margin: 8px 5px 0    overflow: hidden    text-overflow: ellipsis    display: -webkit-box    -webkit-box-orient: vertical    -webkit-line-clamp: 2    line-height: 1.7    font-weight: 400  .comment-more    position: absolute    left: 0    top: 0    height: 100%    width: 100%    z-index: 1    background: var(--icat-blue)    màu sắc: var(--icat-white)    margin: 0    display: flex    padding: .5rem 1rem    opacity: 0    flex-direction: column    justify-content: space-between    transition: .3s    .comment-title      display: flex      align-items: center      justify-content: space-between      span        display: flex        font-size: 16px        align-items: center        overflow: hidden        text-overflow: ellipsis        display: -webkit-box        -webkit-box-orient: vertical        -webkit-line-clamp: 1        font-weight: 400        i          margin-right: 4px      a        font-size: 14px        màu sắc: var(--icat-white)        opacity: .6        margin-left: 4px        white-space: nowrap    .comment-tool      display: flex      flex-wrap: wrap      gap: 4px 8px      a        background: var(--icat-card-bg-op);        màu sắc: var(--icat-white)        border-radius: 8px        padding: 4px 8px        font-size: 14px        opacity: .6    a:hover      opacity: 1[data-theme='dark']  #comments-page    .comment-card      .comment-info        .comment-information          .comment-author            &:after              màu sắc: var(--icat-blue)
  • CSS tùy chọn
  • Tạo tệp tin kiểu [blogRoot]/themes/butterfly/source/css/comment.css và thêm nội dung sau (hoặc thêm vào tệp CSS riêng)
1123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274

| ``` #comments-page { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px; width: 100%; margin-top: 1.5rem;}#comments-page .page-load { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%;}#comments-page .comment-card { position: relative; width: calc(100% / 4 - 9px); border-radius: 12px; border: var(--style-border); padding: 14px; cursor: pointer; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; overflow: hidden; -webkit-box-shadow: var(--icat-shadow-border); box-shadow: var(--icat-shadow-border); background: var(--icat-card-bg); -webkit-animation: slide-in 0.6s 0.4s backwards; -moz-animation: slide-in 0.6s 0.4s backwards; -o-animation: slide-in 0.6s 0.4s backwards; -ms-animation: slide-in 0.6s 0.4s backwards; animation: slide-in 0.6s 0.4s backwards; will-change: transform;}@media màn hình and (max-width: 1024px) { #comments-page .comment-card { width: calc(100% / 2 - 6px); }}@media màn hình and (max-width: 768px) { #comments-page .comment-card { width: 100%; }}#comments-page .comment-card:hover { border-color: var(--icat-blue);}#comments-page .comment-card:hover .comment-more { opacity: 1; -ms-filter: none; filter: none;}#comments-page .comment-card .comment-info { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px dashed var(--hr-border);}#comments-page .comment-card .comment-info img { width: 50px; height: 50px; object-fit: cover; border-radius: 50%; margin: 0 !important;}#comments-page .comment-card .comment-info .comment-information { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-left: 12px; line-height: 1.5;}#comments-page .comment-card .comment-info .comment-information .comment-user { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-weight: bold; font-size: 15px;}#comments-page .comment-card .comment-info .comment-information .comment-author:after { content: "\e04f"; font-family: "iconfont" !important; padding-left: 6px; font-size: 14px; màu sắc: var(--icat-green);}#comments-page .comment-card .comment-info .comment-information .comment-time { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); font-size: 12px;}#comments-page .comment-content { margin: 8px 5px 0; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.7; font-weight: 400;}#comments-page .comment-more { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 1; background: var(--icat-blue); màu sắc: var(--icat-white); margin: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 0.5rem 1rem; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s;}#comments-page .comment-more .comment-title { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;}#comments-page .comment-more .comment-title span { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-size: 16px; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-weight: 400;}#comments-page .comment-more .comment-title span i { margin-right: 4px;}#comments-page .comment-more .comment-title a { font-size: 14px; màu sắc: var(--icat-white); opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); margin-left: 4px; white-space: nowrap;}#comments-page .comment-more .comment-tool { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 4px 8px;}#comments-page .comment-more .comment-tool a { background: var(--icat-card-bg-op); màu sắc: var(--icat-white); border-radius: 8px; padding: 4px 8px; font-size: 14px; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60);}#comments-page .comment-more a:hover { opacity: 1; -ms-filter: none; filter: none;}[data-theme='dark'] #comments-page .comment-card .comment-info .comment-information .comment-author:after { màu sắc: var(--icat-blue);}/* Trang bình luận mới */

1
2---
3 * Trong tệp cấu hình chủ đề `_config.butterfly.yml`, thêm `comment.css` vào phần `inject` -> `head`

123456789

1| ```
2 ···inject: head:  - <link rel="stylesheet" href="/css/comment.css"> # Trang bình luận mới bottom:  - ··· ···
  • Tạo tệp [blogRoot]/themes/butterfly/source/js/comment.js và thêm nội dung sau (hoặc ghi trong tệp JS chung)
1123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124

| ``` biến article;const comment = { fetchData(tùy chọn, loại, ngoại lệ) { fetch('{envId}', { method: "POST", body: JSON.stringify({ "event": "GET_RECENT_COMMENTS", "accessToken": "{YOUR_TOKEN}", "includeReply": true, ...tùy chọn }), headers: { 'Content-Type': 'application/json' } }).then(res => res.json()).then(response => { let html = '', dữ liệu = response.dữ liệu; if (ngoại lệ) { switch (loại) { case 'visitor': dữ liệu = dữ liệu.filter(item => item.mailMd5 === ngoại lệ); break; case 'v-shield': dữ liệu = dữ liệu.filter(item => item.mailMd5 !== ngoại lệ); break; case 'a-shield': dữ liệu = dữ liệu.filter(item => item.url !== ngoại lệ); break; default: break; } } dữ liệu.forEach(item => { const createdDate = new Date(item.created); const formattedDate = ${createdDate.getFullYear().toString().slice(-2)}-${createdDate.getMonth() + 1}-${createdDate.getDate()} ${createdDate.getHours()}:${createdDate.getMinutes()}:${createdDate.getSeconds()}; html += <div class="comment-card"> <div class="comment-info"> <img src="${item.avatar}" class="nolazyload"> <div class="comment-information"> <span class="${['cũng phong', 'cũng nhỏ phong'].includes(item.nick) ? 'comment-author' : ''} comment-user" data-mailMd5="${item.mailMd5}">${item.nick}</span> <span class="comment-time">${formattedDate}</span> </div> </div> <div class="comment-content">${item.commentText.replaceAll('<', '&lt;').replaceAll('>', '&gt;')}</div> <div class="comment-more"> <div class="comment-title"> <span class="comment-link" title="Xem bài viết này" onclick="pjax.loadUrl('${item.url}')"> <i class="iconfont icat-read"></i> ${article[item.url]} </span> <a onclick="pjax.loadUrl('${item.url}#${item.id}')">Xem bình luận</a> </div> <div class="comment-tool"> let a = Xem thêm, b = Chặn bài viết, c = Chặn người dùng, d = Xem thêm bình luận từ người này e = Quay lại bình luận; switch (loại) { case 'article': html += e + c + d; break; case 'visitor': html += e + a + b; break; case 'v-shield': case 'a-shield': html += a + b + c + d + e; break; default: if (!loại) html += a + b + c + d; break; } html += </div> </div> </div> }); document.getElementById('comments-page').innerHTML = html; }); }, visitor(sự kiện, chặn) { const spanElement = sự kiện.target.closest('.comment-card').querySelector('.comment-user'); const mail = spanElement.getAttribute('data-mailMd5'); nếu (chặn) { this.fetchData({ "pageSize": -1 }, 'v-shield', mail); trở về } this.fetchData({ "pageSize": -1 }, 'visitor', mail); }, article(sự kiện, chặn) { const spanElement = sự kiện.target.closest('.comment-card').querySelector('.comment-link'); const url = spanElement.getAttribute('onclick').match(/'(/.*?)'/)[1]; nếu (chặn) { this.fetchData({ "pageSize": -1 }, 'a-shield', url); trở về } this.fetchData({ "urls": [url] }, 'article'); }, dữ liệu() { nếu (!article) fetch('/article.json').then(res => res.json()).then(dữ liệu => { article = dữ liệu; }); this.fetchData({ "pageSize": 100 }); }};window.DOMReady = function () { nếu (document.querySelector('#comments-page')) comment.dữ liệu();};window.addEventListener("load", DOMReady)document.addEventListener("pjax:complete", DOMReady)// Trang bình luận mới

1
2---
3 **Lưu ý:** `{envId}` và `{YOUR_TOKEN}` cần thay thế bằng giá trị tương ứng
4 * Trong tệp cấu hình chủ đề `_config.butterfly.yml`, thêm `comment.js` vào phần `inject` -> `bottom`

123456789

1| ```
2 ···inject: head:  - ··· bottom:  - <script type="text/javascript" src="/js/comment.js"></script> # Trang bình luận mới ···

[]( "Tổng Bình Luận kết quả tỷ số Cá Nhân") Tổng Bình Luận Cá Nhân

  • Chỉnh sửa trang [blogRoot]/themes/butterfly/layout/includes/widget/card_author.pug (+ dấu cộng xóa dòng là đúng lề)
1123456789101112131415161718192021222324252627282930

| ``` nếu theme.aside.card_author.enable .card-widget.card-info .is-center .avatar-img img(src=url_for(theme.avatar.img) onerror=this.onerror=null;this.src=' + url_for(theme.error_img.flink) + ' alt="avatar") .author-info__name= config.author .author-info__description!= theme.aside.card_author.description || config.description .card-info-data.site-data.is-center a(href=url_for(config.archive_dir) + '/') .headline= _p('aside.articles') .length-num= site.posts.length a(href=url_for(config.tag_dir) + '/') .headline= _p('aside.tags') .length-num= site.tags.length- a(href=url_for(config.category_dir) + '/')- .headline= _p('aside.categories') - .length-num= site.categories.length+ a(href="/comments/")+ .headline= _p('bình luận') + .length-num.comment-total= _p('0') nếu theme.aside.card_author.button.enable a#card-info-btn(href=theme.aside.card_author.button.link) i(class=theme.aside.card_author.button.icon) span=theme.aside.card_author.button.text nếu(theme.social) .card-info-social-icons.is-center !=fragment_cache('social', function(){return partial('includes/header/social')})

1
2---
3 * Tạo nội dung tệp `/themes/butterfly/source/js/comment.js` để xử lý tổng số bình luận (**+** dấu cộng xóa dòng là đúng lề)

123456789101112131415161718192021222324

1| ```
2biến article;const comment = {  ···+  tổng_số: function() {+    fetch('{envId}', {+     method: "POST",+     body: JSON.stringify({ event: "GET_RECENT_COMMENTS", accessToken: "{YOUR_TOKEN}", includeReply: true, pageSize: -1 }),+     headers: { 'Content-Type': 'application/json' }+    }).then(res => res.json()).then(({ dữ liệu }) => {+     const hộp_tổng_số = document.querySelectorAll('.length-num.comment-total');+     nếu (hộp_tổng_số) element.innerText = dữ_liệu.length;+     // console.log('Tổng số bình luận Twikoo:', tổng_số_bình_luận);+    });+  } // Tổng số bình luận};window.DOMReady = function () {+  comment.tổng_số();  nếu (document.querySelector('#comments-page')) comment.dữ_liệu();};window.addEventListener("load", DOMReady)document.addEventListener("pjax:complete", DOMReady)

[]( "Cửa Sổ Bình Luận Nổi Bật") Cửa Sổ Bình Luận Nổi Bật

Phần tùy chỉnh này bao gồm thêm chức năng chuyển đổi bình luận nổi bật trong menu chuột phải, nếu cần vui lòng xem hướng dẫn tại Butterfly's Magic Tutorial: Menu Chuột Phải

Kiểu dáng khác biệt so với phiên bản cũ, nếu muốn sử dụng phiên bản cũ, vui lòng xem hướng dẫn bên dưới.

  • Thêm nội dung trang [blogRoot]/themes/butterfly/layout/includes/layout.pug (+ dấu cộng xóa dòng là đúng lề)
112345678910111213141516171819

| ``` ··· nếu (footerBg) nếu (footerBg === true) - biến footer_bg = bg_img khác - biến footer_bg = isImgOrUrl(theme.footer_bg) ? background-image: url('${url_for(footerBg)}') : background: ${footerBg} khác - biến footer_bg = ''+ #comment-barrage footer#footer(style=footer_bg) !=partial('includes/footer', {}, {cache: true}) khác bao gồm ./404.pug bao gồm ./rightside.pug ···

1
2---
3 * Tạo tệp tin kiểu `[blogRoot]/themes/butterfly/source/css/_page/barrage.styl` và thêm nội dung sau

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136

1| ```
2#comment-barrage  vị_trí: cố_định  đáy: 40px  phải: 68px  display: flex  flex-direction: column  justify-content: end  align-items: flex-end  z-index: 999  transition: .3s  user-select: none  +maxWidth768()    display: none.comment-barrage-item  min-width: 286px  max-width: 286px  width: fit-content  min-height: 80px  max-height: 150px  margin: 4px  padding: 8px 14px  background: var(--card-bg)  border-radius: 8px  màu sắc: var(--icat-fontcolor)  animation: barrageIn .6s cubic-bezier(0.42, 0, 0.3, 1.11)  transition: .3s  display: flex  flex-direction: column  border: var(--style-border)  backdrop-filter: saturate(180%) blur(20px)  vị_trí: cố_định  box-shadow: var(--icat-shadow-border)  overflow: hidden  &:hover    border: 1px solid var(--icat-blue)    box-shadow: var(--icat-shadow-blue)  &.out    opacity: 0    animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11)  &.hovered    opacity: 0  pre    display: none  li    display: none  p    màu sắc: var(--icat-fontcolor)    margin: 8px 0 0    line-height: 1.2    -webkit-line-clamp: 2    display: -webkit-box    -webkit-box-orient: vertical    font-size: 12px    font-weight: bold    overflow: hidden    text-overflow: ellipsis    &:hover      màu sắc: var(--icat-blue)    img      &:not(.tk-owo-emotion)        display: none      &.tk-owo-emotion        width: 16px        padding: 0        margin: 0        transform: translateY(2px)  blockquote    display: none  br    display: none  .barrageHead    height: 30px    padding: 0    line-height: 30px    font-size: 12px    border-bottom: var(--style-border)    display: flex    justify-content: space-between    align-items: center    font-weight: bold    padding-bottom: 6px  .barrageAvatar    width: 18px    height: 18px    margin: 0    margin-right: 8px    border-radius: 50%    background: var(--icat-blue)  .barrageTime    margin-left: 4px  .comment-barrage-close    màu sắc: var(--icat-secondtext)    cursor: pointer    line-height: 1    margin-left: auto    &:hover      màu sắc: var(--icat-blue)  .barrageContent    font-size: 14px    font-weight: normal    height: calc(100% - 30px)    overflow: hidden    width: fit-content    max-height: 48px    a      pointer-events:none      font-size: 14px    &:-webkit-scrollbar      height: 0      width: 4px      &-button