组件：小红书帖子界面

[[embed]]
<iframe src="//interwiki.scpwikicn.com/styleFrame.html?priority=1
&type=sidebar
&override={$override}&theme=https://hormress.github.io/Parallel/normalize-min.css
&css={$css}" style="display: none"></iframe>
[[/embed]]

[[embed]]
<iframe src="//interwiki.scpwikicn.com/styleFrame.html?priority=2
&type=sidebar
&override={$override}&theme=https://hormress.github.io/Parallel/parallel-min.css
&css={$css}" style="display: none"></iframe>
[[/embed]]

Rating: +81

[[include :scp-wiki-cn:component:xiaofanshu-backend post=--]
|avatar=http://scpsandboxcn.wikidot.com/local--files/bolicha/K.png
|username=TTTKKK
|image=http://scpsandboxcn.wikidot.com/local--files/bolicha/xiaofanshu
|dot_num=5
|active_dot=2
|small_side1=left-small
|small_side2=right-small
|title=你们说仿小红书组件有搞头吗
|text=我已经想好名字了，就叫小番薯。大家觉得如何？
二编：我将去搞
三编：我搞完了
|tags=#艾斯西皮鸡精会 #艾斯西皮组件
|hide_tags=
|date=04-09 浙江
|comment_count=11
|my_avatar=http://scpsandboxcn.wikidot.com/local--files/bolicha/K.png
|input_placeholder=爱评论的人运气都不差
]]

[[include :scp-wiki-cn:component:xiaofanshu-backend comment=--]
|avatar=http://scpsandboxcn.wikidot.com/local--files/bolicha/momo-nk
|username=noko
|is_author=
|text=鳊鱼八十牛逼
|hide_text=
|time_loc=04-09 朝鲜
|likes=12
|is_topped=show-topped
]]

[[include :scp-wiki-cn:component:xiaofanshu-backend reply=--]
|avatar=http://scpsandboxcn.wikidot.com/local--files/bolicha/momo-blue
|username=momo
|is_author=
|text=何意味？想吃紫菜蛋花汤了？
|hide_text=
|show_reply_target=
|reply_to_name=
|time_loc=04-09 术加
|likes=2
]]

[[include :scp-wiki-cn:component:xiaofanshu-backend reply=--]
|avatar=http://scpsandboxcn.wikidot.com/local--files/bolicha/K.png
|username=TTTKKK
|is_author=show-author
|text=金智勋将军指使的
|hide_text=
|show_reply_target=show-target
|reply_to_name=momo
|time_loc=04-09 浙江
|likes=4
]]

展开 2
条回复

[[include :scp-wiki-cn:component:xiaofanshu-backend comment=--]
|avatar=http://scpsandboxcn.wikidot.com/local--files/bolicha/momo-diva
|username=dovo
|is_author=
|text=元神？一般般吧
狄瓦才牛逼
|hide_text=
|has_pic=show-pic
|pic=http://scpsandboxcn.wikidot.com/local--files/bolicha/dwnb
|time_loc=04-09 狄瓦斯坦
|likes=7
|is_topped=
]]

[[include :scp-wiki-cn:component:xiaofanshu-backend reply=--]
|avatar=http://scpsandboxcn.wikidot.com/local--files/bolicha/K.png
|username=TTTKKK
|is_author=show-author
|text=狄瓦的✌就是✌
|hide_text=
|show_reply_target=
|reply_to_name=
|has_pic=show-pic
|pic=http://scpsandboxcn.wikidot.com/local--files/bolicha/dwnb
|time_loc=04-09 浙江
|likes=1
]]

[[include :scp-wiki-cn:component:xiaofanshu-backend reply=--]
|avatar=http://scpsandboxcn.wikidot.com/local--files/bolicha/momo-blue
|username=momo
|is_author=
|text=
|hide_text=hide-text
|show_reply_target=
|reply_to_name=
|has_pic=show-pic
|pic=http://scpsandboxcn.wikidot.com/local--files/bolicha/dwnb
|time_loc=04-09 术加
|likes=1
]]

[[include :scp-wiki-cn:component:xiaofanshu-backend comment=--]
|avatar=http://scpsandboxcn.wikidot.com/local--files/bolicha/momo-dado
|username=dado
|is_author=
|text=
|hide_text=hide-text
|has_pic=show-pic
|pic=http://scpsandboxcn.wikidot.com/local--files/bolicha/ysnb
|time_loc=2小时前 未知
|likes=2
|is_topped=
]]

[[include :scp-wiki-cn:component:xiaofanshu-backend reply=--]
|avatar=http://scpsandboxcn.wikidot.com/local--files/bolicha/K.png
|username=TTTKKK
|is_author=show-author
|text=抓
|hide_text=
|show_reply_target=
|reply_to_name=
|has_pic=
|pic=
|time_loc=1小时前 浙江
|likes=0
]]

[[include :scp-wiki-cn:component:xiaofanshu-backend reply=--]
|avatar=http://scpsandboxcn.wikidot.com/local--files/bolicha/momo-dado
|username=dado
|is_author=
|text=为神马药抓dado？dado是豪资本家
|hide_text=
|show_reply_target=show-target
|reply_to_name=TTTKKK
|has_pic=
|pic=
|time_loc=3分钟前 未知
|likes=0
]]

✎ 说点什么…

. 16
. 1
. 11

[[/cell]]
[[/row]]
[[/table]]

使用例

这是什么？

你说的对，但是《小番薯》是由CogitoErgoMeowCogitoErgoMeow拷打Gemini非自主研发的一款仿照小红书界面的全是bug的诡异组件。组件可能被应用在一个被称作「帷幕」的幻想世界，在这里，被SWN-001实体选中的人将被授予……

言归正传，这是一个模仿小红书帖子界面的组件，其中的图标（转发、语音、图片、爱心、不喜欢、笔）均由Gemini生成，使用例中的头像及图片均由本人绘制。由于CogitoErgoMeowCogitoErgoMeow代码水平过于低下，因此在制作过程中使用了大量由AI生成的代码。若您在使用过程中有发现各种bug，请及时指出，我会尽我能力解决。

怎么用？

首先，为了正常使用本组件，必须插入组件的帖子正文部分。

[[include :scp-wiki-cn:component:xiaofanshu-backend post=--]
|avatar=这里直接填帖主头像的网址
|username=这里填帖主的昵称
|image=这里直接填帖子图片的网址
|dot_num=这里控制图片下方轮播点（尽管并不支持切换多张图片）的数量，可填0-5或留空（尽管我不建议填1），填0或留空会将点隐藏
|active_dot=这里控制第几个轮播点高亮，可填0-5或留空，填0或留空会将高亮点隐藏
|small_side1=这里控制两侧的轮播点是否缩小，可填left-small或right-small，留空会不进行缩小
|small_side2=同上
|title=这里填帖子标题
|text=这里填帖子正文
|tags=这里填帖子标签，#记得自带，多个标签之间空格
|hide_tags=这里填hide_tags可以隐藏标签
|date=帖主的发布时间和ip，中间空格
|comment_count=共 （你填的数字） 条评论，记得与最下面评论数保持一致
|my_avatar=这里直接填浏览帖子者头像的网址
|input_placeholder=上面的一个输入框内，不输入时会出现的文字，可自定义
]]

然后，可以选择插入评论部分。

[[include :scp-wiki-cn:component:xiaofanshu-backend comment=--]
|avatar=这里直接填评论者头像的网址
|username=这里填评论者的昵称
|is_author=这里填show-author可以使该条评论带有作者标识
|text=这里填评论正文
|hide_text=这里填hide-text可以隐藏正文
|has_pic=这里填show-pic可以显示图片
|pic=这里直接填要显示的图片网址，目前只支持1张
|time_loc=评论者的发布时间和ip，中间空格
|likes=这里控制该条评论获得的赞数，填0或留空会将数字隐藏
|is_topped=这里填show-topped可以使该条评论带有置顶评论标识（然而并不会真的置顶）
]]

接下来，可以选择插入评论的回复部分。

[[include :scp-wiki-cn:component:xiaofanshu-backend reply=--]
|avatar=这里直接填回复者头像的网址
|username=这里填回复者的昵称
|is_author=这里填show-author可以使该条回复带有作者标识
|text=这里填回复正文
|hide_text=这里填hide-text可以隐藏正文
|show_reply_target=这里填show-target可以使该条回复带有“回复 xxx：”标识
|reply_to_name=这里填回复对象的昵称
|has_pic=这里填show-pic可以显示图片
|pic=这里直接填要显示的图片网址，目前只支持1张
|time_loc=回复者的发布时间和ip，中间空格
|likes=这里控制该条评论获得的赞数，填0或留空会将数字隐藏
]]

之后，可以选择插入展开回复部分。由于我不明白的bug导致这个部分仅能使用一次，非常抱歉因此带来的不便。

[[include :scp-wiki-cn:component:xiaofanshu-backend expand=--]
|count=这里控制展开几条评论
]]

评论和回复可以连续或交替地进行堆叠。

最后，为了正常使用本组件，必须插入组件的结束部分。

[[include :scp-wiki-cn:component:xiaofanshu-backend end=--]
|bottom_likes=这里控制帖子获得的赞数，填0或留空会将数字隐藏
|bottom_stars=这里控制帖子获得的收藏数，填0或留空会将数字隐藏
|bottom_comments=这里控制帖子获得的评论数，填0或留空会将数字隐藏，记得与上面保持一致
]]
不建议在这里填写过大的数字，挤压左侧输入栏会影响美观

希望这个组件能帮到各位！

+ 源代码- 隐藏
css


table.xhs-container {
    width: 100%;
    max-width: 420px;
    margin: 20px auto;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    color: #333;
    line-height: 1.5;
    border-collapse: separate;
    border-spacing: 0;
    border: none;
    display: block;
}

table.xhs-container tbody, 
table.xhs-container tr, 
table.xhs-container td {
    display: block;
    width: 100%;
    padding: 0 !important;
    border: none !important;
    background: transparent;
}

.xhs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
}

.xhs-header-left, .xhs-header-right {
    display: flex;
    align-items: center;
}

.xhs-back-btn {
    font-size: 20px;
    color: #333;
    margin-right: 15px;
    cursor: pointer;
}

.xhs-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #f0f0f0;
}

.xhs-username {
    font-size: 14px;
    color: #555;
    margin-left: 10px;
}

.xhs-follow-btn {
    border: 1px solid #ff2442;
    color: #ff2442;
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.xhs-share-btn {
    width: 20px; 
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 12px;
    color: transparent;
    font-size: 0px;
    background-image: url("http://scpsandboxcn.wikidot.com/local--files/bolicha/share");
}

.xhs-image-box {
    position: relative;
    width: 100%;
}

.xhs-image-box img {
    width: 100%;
    display: block;
}

.xhs-dots {
    width: 100%;
    text-align: center;
    padding: 8px 0;
    line-height: 1;
}

.xhs-dot {
    display: none;
    width: 6px;
    height: 6px;
    background-color: #d8d8d8;
    border-radius: 50%;
    margin: 0 3px;
    color: transparent;
    overflow: hidden;
    line-height: 0;
    vertical-align: middle;
}

.left-small .dot-1 {
    width: 4px !important;
    height: 4px !important;
}

.right-small .dot-5 {
    width: 4px !important;
    height: 4px !important;
}

.active-1 .dot-1, .active-2 .dot-2, .active-3 .dot-3, .active-4 .dot-4, .active-5 .dot-5 {
    background-color: #ff2442 !important;
}

.dots-1 .dot-1, 
.dots-2 .dot-1, .dots-2 .dot-2,
.dots-3 .dot-1, .dots-3 .dot-2, .dots-3 .dot-3,
.dots-4 .dot-1, .dots-4 .dot-2, .dots-4 .dot-3, .dots-4 .dot-4,
.dots-5 .dot-1, .dots-5 .dot-2, .dots-5 .dot-3, .dots-5 .dot-4, .dots-5 .dot-5 {
    display: inline-block; 
}

.xhs-content {
    padding: 5px 15px 15px 15px;
}

.xhs-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
    letter-spacing: 0.5px;
}

.xhs-text {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    letter-spacing: 1px;
    margin-top: -6px;
}

.xhs-tags {
    color: #13559f;
    font-size: 14px;
    margin-bottom: 15px;
    margin-top: -6px;
}

.hide-tags {
    display: none !important;
}

.xhs-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #999;
}

.xhs-dislike-btn {
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    padding: 0px 10px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    width: fit-content;
    height: 26px;
    color: #333 !important;
}
.xhs-dislike-btn::before {
    content: "";
    background-image: url("http://scpsandboxcn.wikidot.com/local--files/bolicha/sad");
    margin-right: 4px;
    width: 16px;
    height: 16px;
    color: #333 !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.xhs-content p {
    margin: 0 !important;
    padding: 0 !important;
}

.xhs-comment-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    padding: 15px 15px 5px 15px
}

.xhs-comment-header p {
    margin: 0 !important;
    padding: 0 !important;
}

.xhs-sort-icon {
    width: 14px;
    height: 1.5px;
    background-color: #999;
    border-radius: 1px;
    margin-left: 6px;
    position: relative;
    display: inline-block;
    color: transparent;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    top: 0px;
    margin-top: -10px;
}

.xhs-sort-icon::before,
.xhs-sort-icon::after {
    content: "";
    position: absolute;
    height: 1.5px;
    background-color: #999;
    border-radius: 1px;
    left: 50%;
    transform: none;
}

.xhs-sort-icon::before {
    top: 4px;
    width: 9px;
    margin-left: -4.5px;
}

.xhs-sort-icon::after {
    top: 8px;
    width: 4px;
    margin-left: -2px;
}

.xhs-input-area {
    display: flex;
    align-items: center;
    padding: 15px 15px 10px 15px;
}

.xhs-my-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 1px solid #f0f0f0;
}

.xhs-input-box {
    flex: 1;
    background-color: #f5f5f5;
    border-radius: 20px;
    height: 36px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 16px;
}

.xhs-input-box br { display: none !important; }

.xhs-input-box p { margin: 0 !important; padding: 0 !important; }

.xhs-input-text {
    color: #999;
    font-size: 13px;
    display: inline-block; 
}

.xhs-input-icons {
    position: absolute; 
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
}

.xhs-icon-mic, .xhs-icon-pic {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    font-size: 0px;
}

.xhs-icon-mic {
    background-image: url("http://scpsandboxcn.wikidot.com/local--files/bolicha/microphone"); 
}

.xhs-icon-pic {
    background-image: url("http://scpsandboxcn.wikidot.com/local--files/bolicha/picture");
}

.xhs-comment-item {
    display: flex;
    margin-top: 16px;
    padding: 15px 15px 10px 15px
}

.xhs-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
}

.xhs-comment-content {
    flex: 1;
}

.xhs-comment-content p {
    margin: 0 !important;
    padding: 0 !important;
}

.xhs-comment-name-row {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}

.xhs-comment-username {
    font-size: 13px;
    color: #999;
    font-weight: 500;
}

.xhs-comment-author-tag {
    display: none;
    font-size: 10px;
    color: #ff2442;
    background-color: #ffe6e8;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 6px;
    transform: scale(0.9);
}

.show-author {
    display: inline-block !important;
    vertical-align: middle;

}

.xhs-comment-topped-row {
    margin-top: 8px;
    line-height: 1;
    display: none;
}

.xhs-comment-topped-tag {
    font-size: 10px;
    color: #ff2442;
    background-color: #ffe6e8;
    padding: 2px 6px;
    border-radius: 8px;
    display: inline-block;
    transform: scale(0.9);
    transform-origin: left center;
}

.xhs-comment-topped-row.show-topped {
    display: block !important;
}

.xhs-comment-text {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 6px;
}

.hide-text {
    display: none !important;
}

.xhs-comment-content p {
    margin: 0 !important;
    padding: 0 !important;
}

.xhs-comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.xhs-comment-time-loc {
    font-size: 12px;
    color: #999;
}

.xhs-comment-pic-box {
    display: none;
    margin-bottom: 10px; 
    line-height: 0;
}

.xhs-comment-pic-box.show-pic {
    display: block !important; 
}

.xhs-comment-pic {
    max-width: 120px;
    width: auto;
    height: auto;        
    max-height: 120px;
    object-fit: contain;
    border-radius: 8px;  
    border: 1px solid #f0f0f0;
}

.xhs-comment-reply-btn {
    font-weight: 500;
    color: #333;
    margin-left: 8px;
    cursor: pointer;
}

.xhs-comment-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #999;
    font-size: 12px;
}

.xhs-action-like {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.xhs-action-like::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("http://scpsandboxcn.wikidot.com/local--files/bolicha/heart_grey");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 4px;
}

.xhs-action-dislike {
    display: inline-flex;
    align-items: center;
    width: 15px;
    height: 15px;
    background-image: url("http://scpsandboxcn.wikidot.com/local--files/bolicha/sad"); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 16px !important;
    cursor: pointer;
    vertical-align: middle;
    cursor: pointer;
    font-size: 0px !important; 
    color: transparent !important;
    margin-top: -8px;
}

.num-0, .num- {
    font-size: 0px !important; 
}

.num-0::before, .num-::before {
    font-size: 15px !important;
    margin-right: 0 !important;
}

.xhs-reply-item {
    display: flex;
    padding: 5px 15px 5px 57px; 
}

.xhs-reply-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
}

.xhs-reply-content {
    flex: 1;
}

.xhs-reply-content p {
    margin: 0 !important;
    padding: 0 !important;
}

.xhs-reply-name-row {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}

.xhs-reply-username {
    font-size: 13px;
    color: #999;
    font-weight: 500;
    margin-bottom: 2px;
}

.xhs-reply-text {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 6px;
}

.xhs-reply-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.xhs-reply-target {
    display: none;
    color: #333;
}

.xhs-reply-target.show-target {
    display: inline;
}

.xhs-reply-target-name {
    color: #999;
    margin-left: 6px;
}

.xhs-expand-replies {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #555;
    font-weight: 500;
    padding: 5px 15px 15px 57px;
}

.xhs-expand-line {
    width: 20px;
    height: 1px;
    background-color: #d8d8d8;
    margin-right: 8px;
}

.xhs-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px 15px 15px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    border-radius: 0 0 12px 12px;
}

.xhs-bottom-input {
    flex: 1;
    background-color: #f5f5f5;
    border-radius: 20px;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: #999;
    font-size: 14px;
    margin-right: 15px;
    white-space: nowrap; 
    overflow: hidden;
}

.xhs-icon-edit {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("http://scpsandboxcn.wikidot.com/local--files/bolicha/pen"); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 6px;
    font-size: 0px !important; 
    color: transparent !important;
}

.xhs-bottom-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.xhs-bottom-action {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.xhs-icon-heart, .xhs-icon-star, .xhs-icon-chat {
    width: 22px;
    height: 22px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 4px;
    vertical-align: middle;
    color: transparent;
    font-size: 0px;
}

.xhs-icon-heart { background-image: url("http://scpsandboxcn.wikidot.com/local--files/bolicha/heart"); }
.xhs-icon-star  { background-image: url("http://scpsandboxcn.wikidot.com/local--files/bolicha/star"); }
.xhs-icon-chat  { background-image: url("http://scpsandboxcn.wikidot.com/local--files/bolicha/talk"); }

.xhs-bottom-bar br, 
.xhs-bottom-actions br {
    display: none !important; 
}

.xhs-bottom-action + .xhs-bottom-action {
    margin-left: 12px !important;
}

.xhs-line {
    border-top: 1px solid #f0f0f0;
    margin: 5px 0;
    width: 100%;
}
原创组件
页面版本：⁨0⁩, 最后编辑于: ⁨2026/4/11 15:48:00⁩ (⁨⁨158⁩ 日前⁩), 现时评分: 81
历史 附件 + 选项