diff --git a/_config.butterfly.yml b/_config.butterfly.yml index 9a64d22..61a51d8 100644 --- a/_config.butterfly.yml +++ b/_config.butterfly.yml @@ -22,7 +22,7 @@ menu: 存档: /archives/ || fas fa-archive 标签: /tags/ || fas fa-tags 分类: /categories/ || fas fa-folder-open - 说说: /artitalk/ || fa-regular fa-comment + 说说: /shuoshuo/ || fa-regular fa-comment 友链: /link/ || fas fa-link 关于: /about/ || fas fa-heart diff --git a/source/artitalk/index.md b/source/shuoshuo/index.md similarity index 100% rename from source/artitalk/index.md rename to source/shuoshuo/index.md diff --git a/themes/butterfly/source/css/shuoshuo.css b/themes/butterfly/source/css/shuoshuo.css index 641f774..3e0b8f5 100644 --- a/themes/butterfly/source/css/shuoshuo.css +++ b/themes/butterfly/source/css/shuoshuo.css @@ -1,266 +1,285 @@ +/* ================= 主题变量 ================= */ :root { - --liushen-card-bg: #fff; - --liushen-card-border: 1px solid #e3e8f7; - --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09); - --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2); - --liushen-card-secondbg: #f1f3f8; - --liushen-button-hover-bg: #2679cc; - --liushen-text: #4c4948; - --liushen-button-bg: #f1f3f8; - --liushen-fancybox-bg: rgba(255,255,255,0.5); + --card-bg: #fff; + --card-border: 1px solid #e3e8f7; + --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09); + --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2); + --card-secondbg: #f1f3f8; + --button-hover-bg: #2679cc; + --text: #4c4948; + --button-bg: #f1f3f8; + --fancybox-bg: rgba(255,255,255,0.5); } -:root, [data-theme=dark] { - --liushen-card-bg: #181818; - --liushen-card-secondbg: #30343f; - --liushen-card-border: 1px solid #42444a; - --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09); - --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2); - --liushen-button-bg: #30343f; - --liushen-button-hover-bg: #2679cc; - --liushen-text: rgba(255,255,255,0.702); - --liushen-fancybox-bg: rgba(0,0,0,0.5); +[data-theme=dark] { + --card-bg: #181818; + --card-secondbg: #30343f; + --card-border: 1px solid #42444a; + --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09); + --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2); + --button-bg: #30343f; + --button-hover-bg: #2679cc; + --text: rgba(255,255,255,0.702); + --fancybox-bg: rgba(0,0,0,0.5); +} + +/* ================= 卡片布局 ================= */ +#talk { + position: relative; + width: 100%; + box-sizing: border-box; } -/* 卡片初始化 */ #talk .talk_item { - width: calc(33.333% - 6px); - background: var(--liushen-card-bg); - border: var(--liushen-card-border); - box-shadow: var(--card-box-shadow); - transition: box-shadow .3s ease-in-out; - border-radius: 12px; - display: flex; - flex-direction: column; - padding: 20px; - margin-bottom: 9px; - margin-right: 9px; + width: calc(33.333% - 6px); + background: var(--card-bg); + border: var(--card-border); + box-shadow: var(--card-box-shadow); + border-radius: 12px; + padding: 20px; + margin-right: 9px; + margin-bottom: 9px; + display: flex; + flex-direction: column; + transition: box-shadow .3s ease-in-out; } + #talk .talk_item:hover { - box-shadow: var(--card-hover-box-shadow); + box-shadow: var(--card-hover-box-shadow); } @media (max-width: 900px) { - #talk .talk_item { - width: calc(50% - 5px); - } -} -@media (max-width: 450px) { - #talk .talk_item { - width: calc(100%); - } + #talk .talk_item { + width: calc(50% - 5px); + } } -#talk{ - position: relative; +@media (max-width: 450px) { + #talk .talk_item { width: 100%; - box-sizing: border-box; + } +} + +/* ================= 头部信息 ================= */ +#talk .talk_meta, +#talk .talk_bottom { + display: flex; + align-items: center; +} + +#talk .talk_meta { + width: 100%; + padding-bottom: 10px; + border-bottom: 1px dashed grey; } #talk .talk_meta .avatar { - margin: 0 !important; - width: 60px; - height: 60px; - border-radius: 12px; -} -#talk .talk_bottom, -#talk .talk_meta { - display: flex; - align-items: center; -} -#talk .talk_meta { - display: flex; - align-items: center; - width: 100%; - padding-bottom: 10px; - border-bottom: 1px dashed grey; /* 添加灰色虚线边框 */ -} -#talk .talk_bottom { - margin-top: 15px; - padding-top: 10px; - border-top: 1px dashed grey; /* 添加灰色虚线边框 */ - justify-content: space-between; + margin: 0 !important; + width: 60px; + height: 60px; + border-radius: 12px; } + #talk .talk_meta .info { - display: flex; - flex-direction: column; - margin-left: 10px; + display: flex; + flex-direction: column; + margin-left: 10px; } + #talk .talk_meta .info .talk_nick { - color: #6dbdc3; - font-size: 1.2rem; + color: #6dbdc3; + font-size: 1.2rem; } + #talk .talk_meta .info svg.is-badge.icon { - width: 15px; - padding-top: 3px; + width: 15px; + padding-top: 3px; } + #talk .talk_meta .info span.talk_date { - opacity: .6; + opacity: .6; } + +/* ================= 内容区域 ================= */ #talk .talk_item .talk_content { - margin-top: 10px; + margin-top: 10px; } + #talk .talk_item .talk_content .zone_imgbox { - display: flex; - flex-wrap: wrap; - --w: calc(25% - 8px); - gap: 10px; - margin-top: 10px; + display: flex; + flex-wrap: wrap; + --w: calc(25% - 8px); + gap: 10px; + margin-top: 10px; } + #talk .talk_item .talk_content .zone_imgbox a { - display: block; - border-radius: 12px; - width: var(--w); - aspect-ratio: 1/1; - position: relative; + display: block; + border-radius: 12px; + width: var(--w); + aspect-ratio: 1/1; + position: relative; } + #talk .talk_item .talk_content .zone_imgbox a:first-child { - width: 100%; - aspect-ratio: 1.8; + width: 100%; + aspect-ratio: 1.8; } + #talk .talk_item .talk_content .zone_imgbox img { - border-radius: 10px; - width: 100%; - height: 100%; - margin: 0 !important; - object-fit: cover; + border-radius: 10px; + width: 100%; + height: 100%; + margin: 0 !important; + object-fit: cover; } -/* 底部 */ + +/* ================= 底部信息 ================= */ #talk .talk_item .talk_bottom { - opacity: .9; + margin-top: 15px; + padding-top: 10px; + border-top: 1px dashed grey; + justify-content: space-between; + opacity: .9; } + #talk .talk_item .talk_bottom .icon { - float: right; - transition: all .3s; + float: right; + transition: all .3s; } + #talk .talk_item .talk_bottom .icon:hover { - color: #49b1f5; + color: #49b1f5; } + #talk .talk_item .talk_bottom span.talk_tag, #talk .talk_item .talk_bottom span.location_tag { - font-size: 14px; - background-color: var(--liushen-card-secondbg); - border-radius: 12px; - padding: 3px 15px 3px 10px; - transition: box-shadow 0.3s ease; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + font-size: 14px; + background-color: var(--card-secondbg); + border-radius: 12px; + padding: 3px 15px 3px 10px; + transition: box-shadow 0.3s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } #talk .talk_item .talk_bottom span.location_tag { - margin-left: 5px; + margin-left: 5px; } #talk .talk_item .talk_bottom span.talk_tag:hover, #talk .talk_item .talk_bottom span.location_tag:hover { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); -} -#talk .talk_item .talk_content>a { - margin: 0 3px; - color: #ff7d73 !important; -} -#talk .talk_item .talk_content>a:hover{ - text-decoration: none !important; - color: #ff5143 !important + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } +/* ================= 文本链接 ================= */ +#talk .talk_item .talk_content > a { + margin: 0 3px; + color: #ff7d73 !important; +} + +#talk .talk_item .talk_content > a:hover { + text-decoration: none !important; + color: #ff5143 !important; +} + +/* ================= 响应式 ================= */ @media screen and (max-width: 900px) { - #talk .talk_item .talk_content .zone_imgbox { - --w: calc(33% - 5px); - } - #talk .talk_item #post-comment{ - margin: 0 3px - } + #talk .talk_item .talk_content .zone_imgbox { + --w: calc(33% - 5px); + } + + #talk .talk_item #post-comment { + margin: 0 3px; + } } + @media screen and (max-width: 768px) { - .zone_imgbox { - gap: 6px; - } - .zone_imgbox { - --w: calc(50% - 3px); - } - span.talk_date { - font-size: 14px; - } + .zone_imgbox { + gap: 6px; + --w: calc(50% - 3px); + } + + span.talk_date { + font-size: 14px; + } } +/* ================= 豆瓣卡片 ================= */ #talk .talk_item .talk_content .douban-card { - margin-top: 10px !important; - text-decoration: none; - align-items: center; - border-radius: 12px; - color: #faebd7; - display: flex; - justify-content: center; - margin: 10px; - max-width: 400px; - overflow: hidden; - padding: 15px; - position: relative; + margin-top: 10px !important; + text-decoration: none; + align-items: center; + border-radius: 12px; + color: #faebd7; + display: flex; + justify-content: center; + margin: 10px; + max-width: 400px; + overflow: hidden; + padding: 15px; + position: relative; } -/* 外链卡片 */ +/* ================= 外链卡片 ================= */ #talk .talk_item .talk_content .shuoshuo-external-link { - /* 无下划线 */ - width: 100%; - height: 80px; - margin-top: 10px; - border-radius: 12px; - background-color: var(--liushen-card-secondbg); - color: var(--liushen-card-text); - border: var(--liushen-card-border); - transition: background-color .3s ease-in-out; + width: 100%; + height: 80px; + margin-top: 10px; + border-radius: 12px; + background-color: var(--card-secondbg); + color: var(--card-text); + border: var(--card-border); + transition: background-color .3s ease-in-out; } .shuoshuo-external-link:hover { - background-color: var(--liushen-button-hover-bg); + background-color: var(--button-hover-bg); } .shuoshuo-external-link .external-link { - display: flex; - color: var(--liushen-text) !important; - width: 100%; - height: 100%; + display: flex; + color: var(--text) !important; + width: 100%; + height: 100%; } .shuoshuo-external-link .external-link:hover { - color: white !important; -} - -.shuoshuo-external-link .external-link:hover { - text-decoration: none !important; + color: white !important; + text-decoration: none !important; } .shuoshuo-external-link .external-link-left { - width: 60px; - height: 60px; - margin: 10px; - border-radius: 12px; - background-size: cover; - background-position: center; + width: 60px; + height: 60px; + margin: 10px; + border-radius: 12px; + background-size: cover; + background-position: center; } .shuoshuo-external-link .external-link-right { - display: flex; - flex-direction: column; - justify-content: center; - width: calc(100% - 80px); - padding: 10px; + display: flex; + flex-direction: column; + justify-content: center; + width: calc(100% - 80px); + padding: 10px; } .shuoshuo-external-link .external-link-right .external-link-title { - font-size: 1.0rem; - font-weight: 800; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + font-size: 1.0rem; + font-weight: 800; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .shuoshuo-external-link .external-link-right i { - margin-left: 5px; + margin-left: 5px; } +/* ================= 结尾 ================= */ .limit { - width: 100%; - text-align: center; - margin-top: 30px; + width: 100%; + text-align: center; + margin-top: 30px; } diff --git a/themes/butterfly/source/js/shuoshuo.js b/themes/butterfly/source/js/shuoshuo.js index 9bd65b1..584d5a2 100644 --- a/themes/butterfly/source/js/shuoshuo.js +++ b/themes/butterfly/source/js/shuoshuo.js @@ -295,7 +295,7 @@ function renderTalks() { const goComment = (e) => { const match = e.match(/
([\s\S]*?)<\/div>/); const textContent = match ? match[1] : ""; - const textarea = document.querySelector("tk-input el-textarea"); + const textarea = document.querySelector("#twikoo .el-textarea__inner"); textarea.value = `> ${textContent}\n\n`; textarea.focus(); btf.snackbarShow("已为您引用该说说,不删除空格效果更佳");