diff --git a/README.md b/README.md index 3bdd94e0..05b1cd12 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,9 @@ ## Todo -- [x] 首页顶部新样式 +- [x] 首页顶部新样式 +- [x] 首页文章列表三列显示 +- [x] btns 外挂标签 > 如有问题请提 [issue](https://github.com/everfu/hexo-theme-solitude/issues) diff --git a/README_en-US.md b/README_en-US.md index 7dee4945..262880d7 100644 --- a/README_en-US.md +++ b/README_en-US.md @@ -47,8 +47,8 @@ ## Todo -- [x] New style at the top of the home page -- [x] Article sharing button +- [x] The list of articles is displayed in three columns on the homepage. +- [x] btns tags plugin. > If you have any questions, please issue an [issue](https://github.com/everfu/hexo-theme-solitude/issues) diff --git a/README_zh-Hant.md b/README_zh-Hant.md index d1695869..5a0bd0ae 100644 --- a/README_zh-Hant.md +++ b/README_zh-Hant.md @@ -47,8 +47,8 @@ ## Todo -- [x] 首頁頂部新樣式 -- [x] 文章分享按钮 +- [x] 首页文章列表三列显示 +- [x] btns 外挂标签 ## 應用 diff --git a/scripts/tags/btns.js b/scripts/tags/btns.js new file mode 100644 index 00000000..3ac6ce05 --- /dev/null +++ b/scripts/tags/btns.js @@ -0,0 +1,35 @@ +"use strict"; + +function postBtns(args, content) { + return `
+ ${content} +
`; +} + +function postCell(args, content) { + args = args.join(" ").split(","); + let text = args[0] || ""; + let url = args[1] || ""; + text = text.trim(); + url = url.trim(); + if (url.length > 0) { + url = "href='" + url + "'"; + } + let icon = ""; + let img = "https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus/lib/assets/default.svg"; + if (args.length > 2) { + if (args[2].indexOf(" solitude") > -1) { + icon = args[2].trim(); + } else { + img = args[2].trim(); + } + } + if (icon.length > 0) { + return `${text}`; + } else { + return `${text}`; + } +} + +hexo.extend.tag.register("btns", postBtns, { ends: true }); +hexo.extend.tag.register("cell", postCell); \ No newline at end of file diff --git a/source/css/_tags/btns.styl b/source/css/_tags/btns.styl new file mode 100644 index 00000000..1a45b703 --- /dev/null +++ b/source/css/_tags/btns.styl @@ -0,0 +1,212 @@ +[data-theme="dark"] + div + &.btns + filter brightness(0.7) + a + background 0 0 +div + &.btns + margin 0 -8px + display flex + flex-wrap wrap + align-items flex-start + overflow visible + line-height 1.8 + b + font-size 0.875rem + &.wide + & > a + padding-left 32px + padding-right 32px + &.fill + & > a + flex-grow 1 + width auto + &.around + justify-content space-around + &.center + justify-content center + &.grid2 + & > a + width calc(100% / 2 - 16px) + &.grid3 + & > a + width calc(100% / 3 - 16px) + &.grid4 + & > a + width calc(100% / 4 - 16px) + &.grid5 + & > a + width calc(100% / 5 - 16px) + a + transition all 0.28s ease + -moz-transition all 0.28s ease + -webkit-transition all 0.28s ease + -o-transition all 0.28s ease + margin 8px + margin-top calc(1.25 * 16px + 32px) + min-width 120px + font-weight bold + display flex + justify-content flex-start + align-content center + align-items center + flex-direction column + padding 8px + text-align center + background #f6f6f6 + border-radius 4px + border-bottom none!important + & > i + background #2196f3!important + &:first-child + color #fff + background #2196f3 + b + font-weight bold + line-height 1.3 + img + margin 0.4em auto !important + &:not([href]) + cursor default + color inherit + a[href]:hover + background: var(--efu-main) + color: var(--efu-white) !important + & > i + &:first-child + background: var(--efu-main) + +div.btns, +div.btns p, +div.btns a + font-size 0.8125rem + color #555 + +@media screen and (max-width: 1200px) + div + &.btns + &.grid2 + & > a + width calc(100% / 2 - 16px) + +@media screen and (max-width: 768px) + div + &.btns + &.grid2 + & > a + width calc(100% / 2 - 16px) + +@media screen and (max-width: 500px) + div + &.btns + &.grid2 + & > a + width calc(100% / 1 - 16px) + +@media screen and (max-width: 1200px) + div + &.btns + &.grid3 + & > a + width calc(100% / 3 - 16px) + +@media screen and (max-width: 768px) + div + &.btns + &.grid3 + & > a + width calc(100% / 3 - 16px) + +@media screen and (max-width: 500px) + div + &.btns + &.grid3 + & > a + width calc(100% / 1 - 16px) + +@media screen and (max-width: 1200px) + div + &.btns + &.grid4 + & > a + width calc(100% / 3 - 16px) + +@media screen and (max-width: 768px) + div + &.btns + &.grid4 + & > a + width calc(100% / 3 - 16px) + +@media screen and (max-width: 500px) + div + &.btns + &.grid4 + & > a + width calc(100% / 2 - 16px) + +@media screen and (max-width: 1200px) + div + &.btns + &.grid5 + & > a + width calc(100% / 4 - 16px) + +@media screen and (max-width: 768px) + div + &.btns + &.grid5 + & > a + width calc(100% / 3 - 16px) + +@media screen and (max-width: 500px) + div + &.btns + &.grid5 + & > a + width calc(100% / 2 - 16px) + +div.btns a > img:first-child, +div.btns a > i:first-child + transition all 0.28s ease + -moz-transition all 0.28s ease + -webkit-transition all 0.28s ease + -o-transition all 0.28s ease + height 64px + width 64px + box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.1) + margin 16px 8px 4px 8px + margin-top calc(-1.25 * 16px - 32px) + border 2px solid #fff + background #fff + line-height 60px + font-size 28px + +div.btns a > img:first-child.auto, +div.btns a > i:first-child.auto + width auto + +div.btns a p, +div.btns a b + margin 0.25em + font-weight normal + line-height 1.25 + word-wrap break-word + +div.btns a[href]:hover, +div.btns a[href]:hover b + color #ff5722 + +div.btns a[href]:hover > img:first-child, +div.btns a[href]:hover > i:first-child + transform scale(1.1) translateY(-8px) + box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.1) + +div.btns.circle a > img:first-child, +div.btns.circle a > i:first-child + border-radius 32px + +div.btns.rounded a > img:first-child, +div.btns.rounded a > i:first-child + border-radius 16px \ No newline at end of file