From c5a032b420c4fe05e89d6077f73baeded4974f46 Mon Sep 17 00:00:00 2001 From: j m <1406993111@qq.com> Date: Tue, 26 Mar 2024 09:26:50 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E6=8D=90=E8=B5=A0?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=94=AF=E6=8C=81=E6=B5=B7=E6=8A=A5=E5=92=8C?= =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81=E6=A0=B7=E5=BC=8F=EF=BC=8C=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E6=B5=B7=E6=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- settings.yaml | 20 ++++++++-- src/css/post.less | 63 +++++++++++++++++++++++++++++-- templates/assets/css/post.min.css | 2 +- templates/main/admire.html | 35 ++++++++++++++--- theme.yaml | 2 +- 5 files changed, 107 insertions(+), 15 deletions(-) diff --git a/settings.yaml b/settings.yaml index 9908dba..fe301da 100644 --- a/settings.yaml +++ b/settings.yaml @@ -604,14 +604,26 @@ spec: label: 默认开启 - value: false label: 默认关闭 - - $formkit: attachment - name: donate_alipay - label: 支付宝捐赠二维码 - placeholder: '请输入/选择图片路径' + - $formkit: radio + name: post_donate_style + label: 文章打赏样式 + value: donate_style_poster + help: '支持海报样式和二维码样式。' + options: + - value: donate_style_poster + label: 海报 + - value: donate_style_qr + label: 二维码 - $formkit: attachment name: donate_wechat label: 微信捐赠二维码 placeholder: '请输入/选择图片路径' + help: '请输入/选择微信捐赠海报样式/仅二维码的图片。' + - $formkit: attachment + name: donate_alipay + label: 支付宝捐赠二维码 + placeholder: '请输入/选择图片路径' + help: '请输入/选择支付宝捐赠海报样式/仅二维码的图片。' - group: sidebar label: '侧边栏配置' formSchema: diff --git a/src/css/post.less b/src/css/post.less index e38e9f5..106f573 100644 --- a/src/css/post.less +++ b/src/css/post.less @@ -43,12 +43,58 @@ border-radius: 5px; overflow: hidden; display: flex; + + li { + margin-right: 10px; + + &:last-child { + margin-right: 0; + } + } + + img { + max-width: 200px; + max-height: 260px; + object-fit: cover; + } } - img { - max-width: 200px; - max-height: 260px; - object-fit: cover; + .qr-code { + border: 1px solid var(--theme); + border-radius: 10px; + width: 150px; + height: 150px; + position: relative; + overflow: hidden; + + img { + position: absolute; + top: 50%; + left: 50%; + display: block; + width: 100%; + height: 100%; + transform:translate(-50%,-50%); + } + } + + .qr-type { + margin-top: 10px; + display: flex; + justify-content: center; + align-items: center; + + svg { + width: 1.6rem; + height: 1.6rem; + margin-right: 5px; + } + + span { + font-weight: bold; + font-size: 1.05rem; + color: var(--main); + } } } @@ -223,6 +269,15 @@ .admire .donate-list ol { flex-wrap: wrap; + li { + margin-bottom: 10px; + margin-right: 0; + + &:last-child { + margin-bottom: 0; + } + } + img { width: 200px; } diff --git a/templates/assets/css/post.min.css b/templates/assets/css/post.min.css index d081598..f4125d3 100644 --- a/templates/assets/css/post.min.css +++ b/templates/assets/css/post.min.css @@ -1 +1 @@ -@charset "utf-8";@-webkit-keyframes dong{0%{-webkit-transform:translateY(3px) scaleY(.95);transform:translateY(3px) scaleY(.95)}to{-webkit-transform:translateY(-3px) scaleY(1);transform:translateY(-3px) scaleY(1)}}@keyframes dong{0%{-webkit-transform:translateY(3px) scaleY(.95);transform:translateY(3px) scaleY(.95)}to{-webkit-transform:translateY(-3px) scaleY(1);transform:translateY(-3px) scaleY(1)}}@-webkit-keyframes shake-little{0%,12%,18%,24%,30%,36%,42%,48%,54%,6%,60%,66%,72%,78%,84%,90%,96%{-webkit-transform:translate(0,0);transform:translate(0,0)}14%,2%,26%,38%,50%,62%,74%,86%,98%{-webkit-transform:translate(-1px,1px);transform:translate(-1px,1px)}16%,28%,4%,40%,52%,64%,76%,88%,to{-webkit-transform:translate(-1px,-1px);transform:translate(-1px,-1px)}20%,32%,44%,56%,68%,8%,80%,92%{-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}10%,22%,34%,46%,58%,70%,82%,94%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}}@keyframes shake-little{0%,12%,18%,24%,30%,36%,42%,48%,54%,6%,60%,66%,72%,78%,84%,90%,96%{-webkit-transform:translate(0,0);transform:translate(0,0)}14%,2%,26%,38%,50%,62%,74%,86%,98%{-webkit-transform:translate(-1px,1px);transform:translate(-1px,1px)}16%,28%,4%,40%,52%,64%,76%,88%,to{-webkit-transform:translate(-1px,-1px);transform:translate(-1px,-1px)}20%,32%,44%,56%,68%,8%,80%,92%{-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}10%,22%,34%,46%,58%,70%,82%,94%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}}.admire{margin:30px 0 18px;text-align:center}.admire-content{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:15px}.admire-content button{border-radius:50px;padding:8px 18px;border:0;color:var(--light-a);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.1);box-shadow:0 2px 10px rgba(0,0,0,.1)}.admire-content button i{margin-right:5px}.admire-content .donate{background:#c0a46b;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;position:relative;margin-right:10px}.admire-content .donate-list{position:absolute;bottom:40px;right:50%;border-radius:5px;background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);padding:12px;-webkit-transition:all .5s;transition:all .5s;pointer-events:none;opacity:0}.admire-content .donate-list ol{border-radius:5px;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex}.admire-content .donate-list img{max-width:200px;max-height:260px;-o-object-fit:cover;object-fit:cover}.admire-content .donate:hover i{-webkit-animation:dong ease .5s .2s infinite alternate;animation:dong ease .5s .2s infinite alternate}.admire-content .donate:hover .donate-list{-webkit-transform:translateX(50%);transform:translateX(50%);pointer-events:unset;opacity:1}.admire-content .agree{background:#cf4750}.admire-content .agree i{font-size:1.2em}.admire-content .agree span>span{margin-left:3px}.admire-content .agree.like{background:var(--background);color:var(--dark-e)}.admire-content .agree.like:hover i{-webkit-animation:shake-little ease-in-out 4s infinite;animation:shake-little ease-in-out 4s infinite}.admire-content .agree:not(.like) i:before{content:'\f206'}.admire>span{color:var(--dark-d);font-size:.9em}.article-operation{margin:18px 0;display:-webkit-box;display:-ms-flexbox;display:flex}.article-operation .level-item{-ms-flex-negative:1!important;flex-shrink:1!important;-webkit-box-pack:left!important;-ms-flex-pack:left!important;justify-content:left!important;overflow-x:auto}.article-operation .level-item::-webkit-scrollbar{display:none}.article-operation a,.copyright{position:relative;overflow:hidden}.article-operation a{color:var(--dark-b);font-size:.9em;background:var(--bg-b);border:1px solid var(--bg-b);padding:0 8px 0 29px;height:26px;line-height:24px;border-radius:13px;max-width:125px;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;-ms-flex-negative:0;flex-shrink:0}.article-operation a:before{content:"";position:absolute;top:0;left:0;width:24px;height:24px;background:var(--background);border-radius:50%}.article-operation a:after,.copyright:after{position:absolute;font-family:'remixicon';color:var(--theme)}.article-operation a:after{content:'\eae5';top:50%;left:12px;font-size:1.2em;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.article-operation a:hover{color:var(--main);border:1px solid var(--light-b)}.copyright{margin:18px 0;background:var(--bg-h);border-radius:6px;display:block;padding:17px}.copyright:after{right:-70px;top:-70px;content:'\ebf4';font-size:240px;opacity:.1}.copyright .copyright-title{line-height:1.2;margin-bottom:14px}.copyright .copyright-title :not(:last-child){margin-bottom:.25em}.copyright .copyright-title a{font-size:.85em;color:var(--dark-d)}.copyright .copyright-meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap}.copyright .copyright-meta .icon{width:1.2em;height:1.2em}.copyright .copyright-meta .level-item{margin-right:1.4em!important;display:block}.copyright .copyright-meta .level-item h6{margin:0}.copyright .copyright-meta .level-item a,.copyright .copyright-meta .level-item p{color:var(--dark-e)}@media (max-width:520px){.admire .donate-list ol{-ms-flex-wrap:wrap;flex-wrap:wrap}.admire .donate-list ol img{width:200px}} \ No newline at end of file +@charset "utf-8";@-webkit-keyframes dong{0%{-webkit-transform:translateY(3px) scaleY(.95);transform:translateY(3px) scaleY(.95)}to{-webkit-transform:translateY(-3px) scaleY(1);transform:translateY(-3px) scaleY(1)}}@keyframes dong{0%{-webkit-transform:translateY(3px) scaleY(.95);transform:translateY(3px) scaleY(.95)}to{-webkit-transform:translateY(-3px) scaleY(1);transform:translateY(-3px) scaleY(1)}}@-webkit-keyframes shake-little{0%,12%,18%,24%,30%,36%,42%,48%,54%,6%,60%,66%,72%,78%,84%,90%,96%{-webkit-transform:translate(0,0);transform:translate(0,0)}14%,2%,26%,38%,50%,62%,74%,86%,98%{-webkit-transform:translate(-1px,1px);transform:translate(-1px,1px)}16%,28%,4%,40%,52%,64%,76%,88%,to{-webkit-transform:translate(-1px,-1px);transform:translate(-1px,-1px)}20%,32%,44%,56%,68%,8%,80%,92%{-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}10%,22%,34%,46%,58%,70%,82%,94%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}}@keyframes shake-little{0%,12%,18%,24%,30%,36%,42%,48%,54%,6%,60%,66%,72%,78%,84%,90%,96%{-webkit-transform:translate(0,0);transform:translate(0,0)}14%,2%,26%,38%,50%,62%,74%,86%,98%{-webkit-transform:translate(-1px,1px);transform:translate(-1px,1px)}16%,28%,4%,40%,52%,64%,76%,88%,to{-webkit-transform:translate(-1px,-1px);transform:translate(-1px,-1px)}20%,32%,44%,56%,68%,8%,80%,92%{-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}10%,22%,34%,46%,58%,70%,82%,94%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}}.admire{margin:30px 0 18px;text-align:center}.admire-content{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:15px}.admire-content button{border-radius:50px;padding:8px 18px;border:0;color:var(--light-a);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.1);box-shadow:0 2px 10px rgba(0,0,0,.1)}.admire-content button i{margin-right:5px}.admire-content .donate{background:#c0a46b;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;position:relative;margin-right:10px}.admire-content .donate-list{position:absolute;bottom:40px;right:50%;border-radius:5px;background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);padding:12px;-webkit-transition:all .5s;transition:all .5s;pointer-events:none;opacity:0}.admire-content .donate-list ol{border-radius:5px;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex}.admire-content .donate-list ol li{margin-right:10px}.admire-content .donate-list ol li:last-child{margin-right:0}.admire-content .donate-list ol img{max-width:200px;max-height:260px;-o-object-fit:cover;object-fit:cover}.admire-content .donate-list .qr-code{border:1px solid var(--theme);border-radius:10px;width:150px;height:150px;position:relative;overflow:hidden}.admire-content .donate-list .qr-code img{position:absolute;top:50%;left:50%;display:block;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.admire-content .donate-list .qr-type{margin-top:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.admire-content .donate-list .qr-type svg{width:1.6rem;height:1.6rem;margin-right:5px}.admire-content .donate-list .qr-type span{font-size:1.05rem;color:var(--main)}.admire-content .donate:hover i{-webkit-animation:dong ease .5s .2s infinite alternate;animation:dong ease .5s .2s infinite alternate}.admire-content .donate:hover .donate-list{-webkit-transform:translateX(50%);transform:translateX(50%);pointer-events:unset;opacity:1}.admire-content .agree{background:#cf4750}.admire-content .agree i{font-size:1.2em}.admire-content .agree span>span{margin-left:3px}.admire-content .agree.like{background:var(--background);color:var(--dark-e)}.admire-content .agree.like:hover i{-webkit-animation:shake-little ease-in-out 4s infinite;animation:shake-little ease-in-out 4s infinite}.admire-content .agree:not(.like) i:before{content:'\f206'}.admire>span{color:var(--dark-d);font-size:.9em}.article-operation{margin:18px 0;display:-webkit-box;display:-ms-flexbox;display:flex}.article-operation .level-item{-ms-flex-negative:1!important;flex-shrink:1!important;-webkit-box-pack:left!important;-ms-flex-pack:left!important;justify-content:left!important;overflow-x:auto}.article-operation .level-item::-webkit-scrollbar{display:none}.article-operation a,.copyright{position:relative;overflow:hidden}.article-operation a{color:var(--dark-b);font-size:.9em;background:var(--bg-b);border:1px solid var(--bg-b);padding:0 8px 0 29px;height:26px;line-height:24px;border-radius:13px;max-width:125px;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;-ms-flex-negative:0;flex-shrink:0}.article-operation a:before{content:"";position:absolute;top:0;left:0;width:24px;height:24px;background:var(--background);border-radius:50%}.article-operation a:after,.copyright:after{position:absolute;font-family:'remixicon';color:var(--theme)}.article-operation a:after{content:'\eae5';top:50%;left:12px;font-size:1.2em;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.article-operation a:hover{color:var(--main);border:1px solid var(--light-b)}.copyright{margin:18px 0;background:var(--bg-h);border-radius:6px;display:block;padding:17px}.copyright:after{right:-70px;top:-70px;content:'\ebf4';font-size:240px;opacity:.1}.copyright .copyright-title{line-height:1.2;margin-bottom:14px}.copyright .copyright-title :not(:last-child){margin-bottom:.25em}.copyright .copyright-title a{font-size:.85em;color:var(--dark-d)}.copyright .copyright-meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap}.copyright .copyright-meta .icon{width:1.2em;height:1.2em}.copyright .copyright-meta .level-item{margin-right:1.4em!important;display:block}.copyright .copyright-meta .level-item h6{margin:0}.copyright .copyright-meta .level-item a,.copyright .copyright-meta .level-item p{color:var(--dark-e)}@media (max-width:520px){.admire .donate-list ol{-ms-flex-wrap:wrap;flex-wrap:wrap}.admire .donate-list ol li{margin-bottom:10px;margin-right:0}.admire .donate-list ol li:last-child{margin-bottom:0}.admire .donate-list ol img{width:200px}} \ No newline at end of file diff --git a/templates/main/admire.html b/templates/main/admire.html index b0120e5..33a470a 100644 --- a/templates/main/admire.html +++ b/templates/main/admire.html @@ -2,19 +2,44 @@ th:with="donate=${enableDonate && (!#strings.isEmpty(theme.config.post.donate_alipay) || !#strings.isEmpty(theme.config.post.donate_wechat))}">
- -