释放双眼，带上耳机，听听看~！
hey,欢迎来到跨境社区，这一次，我们重构了B2的UI和增加了部分功能，下方分享的是我们对侧边栏小组件的美化以及功能增加。我们后续会增加关注和热门的模块；但是这个可能需要写入到数据库里面。有什么不懂的可以在下方进行评论。
<div id="creation-box">
<div class="creation-top-box">
<svg t="1724844455114" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12432" width="27" height="27"><path d="M632 344m-120 0a120 120 0 1 0 240 0 120 120 0 1 0-240 0Z" fill="#A9D8FF" p-id="12433"></path><path d="M809 800H503c-48.1 0-87-39-87-87 0-111 90-201 201-201h78c111 0 201 90 201 201 0 48-39 87-87 87z" fill="#A9D8FF" p-id="12434"></path><path d="M440 296m-168 0a168 168 0 1 0 336 0 168 168 0 1 0-336 0Z" fill="#298DF7" p-id="12435"></path><path d="M638.2 896H241.8C179 896 128 845 128 782.2 128 633 249 512 398.2 512h83.6C631 512 752 633 752 782.2 752 845 701 896 638.2 896z" fill="#298DF7" p-id="12436"></path></svg><span>创作中心</span>
<span class="creation-login-style" id="creation-level"></span>
<span class="creation-login-style" id="creation-name"></span>
</div>
<ul class="creation-list-box">
<li class="creation-icon-item">
<a href="/write" target="_blank" rel="noopener noreferrer">
<div class="creation-icon"><svg t="1724948083670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="92648" width="24" height="24"><path d="M770.944 123.968H258.816c-37.12 0-67.2 30.08-67.2 67.2v499.456c0 37.12 30.08 67.2 67.2 67.2h512.128c37.12 0 67.2-30.08 67.2-67.2V191.104c0-37.12-30.08-67.2-67.2-67.2z" fill="#6FCBF6" p-id="92649"></path><path d="M191.616 245.12v414.08c0 54.4 44.16 98.56 98.624 98.56h449.28a98.56 98.56 0 0 0 98.56-98.56V245.12h-646.4z" fill="#68BEF3" p-id="92650"></path><path d="M191.616 394.624v264.704c0 54.4 44.16 98.432 98.624 98.432h449.28a98.56 98.56 0 0 0 98.56-98.432V394.624h-646.4z" fill="#68BEF3" p-id="92651"></path><path d="M191.616 544.128V659.2c0 54.4 44.16 98.432 98.624 98.432h449.28a98.56 98.56 0 0 0 98.56-98.432V544h-646.4z" fill="#5CAAF0" p-id="92652"></path><path d="M913.6 511.872a31.104 31.104 0 0 0-33.28-2.048l-357.184 199.168a16.768 16.768 0 0 1-16.448 0L147.968 508.992a30.976 30.976 0 0 0-46.08 27.072v308.288c0 33.088 26.112 59.904 58.432 59.904h709.248c32.256 0 58.432-26.88 58.432-59.904V538.048a31.104 31.104 0 0 0-12.8-25.152l-1.6-1.024z" fill="#4F94EB" p-id="92653"></path><path d="M928 694.08a94.08 94.08 0 0 0-9.344-0.448h-368l-27.52 15.36a16.768 16.768 0 0 1-16.448 0l-27.52-15.36H119.232c-6.016 0-11.84 0.64-17.536 1.6v149.12c0 33.088 26.24 59.968 58.432 59.968h709.312c32.256 0 58.368-26.88 58.368-59.904v-150.4h0.128z" fill="#3A8CE6" p-id="92654"></path><path d="M676.48 361.92H367.744c-22.016 0-39.936-16.448-39.936-36.736 0-20.288 17.92-36.8 39.936-36.8h308.736c22.08 0 40 16.448 40 36.8 0 20.288-17.92 36.736-40 36.736zM577.408 555.52H367.744c-22.08 0-40-16.448-40-36.736 0-20.352 17.92-36.8 40-36.8h209.664c22.016 0 39.936 16.448 39.936 36.8 0 20.288-17.856 36.736-39.936 36.736z" fill="#FFFFFF" p-id="92655"></path></svg>
</div>
<p>文章创作</p>
</a>
</li>
<li class="creation-icon-item">
<a href="/create-circle" target="_blank" rel="noopener noreferrer">
<div class="creation-icon"><svg t="1724836774093" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12749" width="32" height="32"><path d="M902.528 422.3488l2.7136 4.0192c9.984 15.616 15.2832 33.792 15.2832 52.3008v412.1088h21.7344a32.512 32.512 0 0 1 32.5632 32.4864c0 17.92-14.592 32.4608-32.5632 32.4608h-259.584V452.096l87.6288-55.5776a97.9456 97.9456 0 0 1 132.224 25.856z" fill="#99E9DD" p-id="12750"></path><path d="M251.3408 51.2c16.8704 0 33.6128 2.6112 49.664 7.7312l282.368 90.0608a162.432 162.432 0 0 1 113.2544 154.624v149.12l0.0512-0.0512 0.0256 503.04H66.7136a32.512 32.512 0 0 1-32.5888-32.4608c0-17.92 14.592-32.4864 32.5888-32.4864h21.7344V213.5808c0-87.6288 69.7344-159.4624 157.6192-162.304L251.3408 51.2z m38.784 477.8752c-18.8416 0-34.1248 14.336-34.1248 32v106.6496c0 17.664 15.2832 32 34.1248 32 18.8672 0 34.1504-14.336 34.1504-32v-106.6496c0-17.664-15.2832-32-34.1504-32z m0-273.0752c-18.8416 0-34.1248 14.336-34.1248 32v106.6752c0 17.664 15.2832 32 34.1248 32 18.8672 0 34.1504-14.336 34.1504-32V288c0-17.664-15.2832-32-34.1504-32z" fill="#00C4A7" p-id="12751"></path></svg></div>
<p>创建圈子</p>
</a>
</li>
<li class="creation-icon-item">
<a href="/ask" target="_blank" rel="noopener noreferrer">
<div class="creation-icon"><svg t="1724837078632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="47407" width="32" height="32"><path d="M316.0576 826.9056s-39.552-0.5376-62.0032-25.0624c-16.4608-17.9456-14.1056-60.8512-14.1056-60.8512l0.256-416.4864-173.184-1.152a50.2784 50.2784 0 0 0-50.048 50.5856v465.9712c0 27.9552 22.3744 50.6112 50.048 50.6112h76.4672c13.824 0 24.2176 54.1952 41.6512 54.2976s85.6832-54.2976 102.5024-54.2976h259.7632c27.648 0 50.0992-16.9472 50.0992-44.9536v-18.3552l-281.4464-0.3072z" fill="#F8858B" p-id="47408"></path><path d="M938.7776 79.2064H361.0112c-37.7088 0-68.3008 30.8992-68.3008 68.9664v558.08c0 34.9184 29.824 68.7872 68.1984 69.1712 0.0256 0.1024 241.0496-0.2048 253.2864-0.2048 29.9776 0 138.1632 77.2096 163.4816 74.0096 25.2672-3.1488 22.9376-74.0096 56.8064-74.0096h104.32c37.6832 0 68.2496-30.8992 68.2496-68.9664v-558.08c-0.0256-38.0672-30.592-68.9664-68.2752-68.9664zM680.4224 676.7872c-7.936 7.936-18.944 12.4672-30.1312 12.4672-11.2128 0-22.1184-4.5568-30.08-12.4672a42.752 42.752 0 0 1-12.4928-30.08 42.6496 42.6496 0 0 1 42.5728-42.5728c11.2128 0 22.1952 4.5312 30.1312 12.4928a42.752 42.752 0 0 1 0 60.16z m3.9424-152.448v10.8544a34.048 34.048 0 1 1-68.1216 0v-42.0352c0-18.816 15.2832-34.048 34.0736-34.048 0.4864 0 0.9216 0.0512 1.4336 0.0768 0.4864-0.0256 0.9216-0.0768 1.408-0.0768 58.0608 0 105.2672-47.232 105.2672-105.2672S711.1936 248.576 653.1584 248.576a105.4208 105.4208 0 0 0-102.5536 81.3056 106.9568 106.9568 0 0 0 1.92 54.9376 34.048 34.048 0 1 1-65.1264 19.9936 173.8496 173.8496 0 0 1-3.0976-90.368 173.4144 173.4144 0 0 1 168.8832-134.016 173.5936 173.5936 0 0 1 173.3888 173.3888c-0.0256 84.9664-61.44 155.776-142.208 170.5216z" fill="#F3343E" p-id="47409"></path></svg></div>
<p>付费问答</p>
</a>
</li>
<li class="creation-icon-item">
<a href="/po-infomation" target="_blank" rel="noopener noreferrer">
<div class="creation-icon"><svg t="1724837001715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="43671" width="32" height="32"><path d="M985.124571 717.312a38.363429 38.363429 0 0 0-21.467428-22.710857L519.314286 509.878857a40.630857 40.630857 0 0 0-30.281143 0L60.416 687.908571a37.778286 37.778286 0 0 0-22.235429 25.234286c0 0.182857 0 0.475429-0.219428 0.658286a38.363429 38.363429 0 0 0 22.272 45.641143L504.685714 944.201143a38.253714 38.253714 0 0 0 29.732572 0l429.275428-178.395429a38.180571 38.180571 0 0 0 21.430857-48.493714z" fill="#FF9010" opacity=".3" p-id="43672"></path><path d="M985.124571 518.948571a38.4 38.4 0 0 0-21.467428-22.747428L519.314286 311.478857a41.106286 41.106286 0 0 0-30.281143 0l-428.617143 178.029714a37.924571 37.924571 0 0 0-22.235429 25.161143c0 0.182857 0 0.475429-0.219428 0.658286a38.363429 38.363429 0 0 0 22.272 45.641143L504.685714 745.801143a38.436571 38.436571 0 0 0 29.732572 0l429.275428-178.432a38.144 38.144 0 0 0 21.430857-48.420572z" fill="#FFB828" p-id="43673"></path><path d="M985.124571 320.548571a38.253714 38.253714 0 0 0-21.467428-22.710857L519.314286 113.115429a40.630857 40.630857 0 0 0-30.281143 0L60.416 291.108571a37.924571 37.924571 0 0 0-22.235429 25.161143c0 0.219429 0 0.512-0.219428 0.694857a38.436571 38.436571 0 0 0 22.272 45.677715L504.685714 547.437714a38.582857 38.582857 0 0 0 29.732572 0l429.275428-178.395428a38.217143 38.217143 0 0 0 21.430857-48.493715z" fill="#FF9010" p-id="43674"></path></svg></div>
<p>发供求</p>
</a>
</li>
</ul>
</div>侧边栏小组件创作中心功能
需要注意的是，板块接口，如无法使用，请在下方评论。
侧边栏小组件增加知乎推荐关注组件
代码：
<ul id="recommend-list">加载中...</ul>功能实现图：
侧边小组件增加会员中心推荐开通会员模块
代码如下：
<ul id="recommend-list">加载中...</ul>整站多语言模块功能
细心的朋友或许已经发现；我们跨境社区有多语言的功能在底部可以体验，此功能可以根据登录用户习惯，自动记录语言，并且整站实时翻译；不影响访问速度。此功能接入的是国内的免费翻译Api接口，我们已经封装完毕，您可以看下面的代码，对您的网站也加入多语言功能。 效果实现图：
多语言，我们已经封装成接口可以直接调用。可以联系我们的客服进行调试。
温馨提示：
文章链接：https://cbec.com.cn/5591.html
更新时间：2024年09月07日
原创声明：本文系作者授权CBEC跨境社区发表，未经许可，不得转载。
如有侵权，请联系 info@hicici.com 删除。
小工具添加，直接去后台-小工具-b2自定义HTML-复制粘贴即可。