commit blog and add shortcodes

yaragos · Jul 28, 2024 · a001e28 · a001e28
1 parent f83979f
commit a001e28
Show file tree

Hide file tree

Showing 25 changed files with 623 additions and 46 deletions.
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
@@ -319,3 +319,187 @@ $image-scale: 1.2;
     }
   }
 }
+
+/*--------------*- Shortcodes -*-----------------*/
+// colorfulfont 文字颜色渐变
+.colorfulfont {
+    background: linear-gradient(to right, rgb(25, 221, 238), #ed4588); //第一个颜色代码是渐变起始色，第二个颜色代码是渐变结束色；
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+// qoute-center 诗歌引用格式
+blockquote.quote-center {
+    position: relative;
+    border-left: none;
+    padding-left: 0;
+    border-top: 0px solid var(--card-separator-color);
+    border-bottom: 0px solid var(--card-separator-color);
+    p {
+      text-align: center !important;
+      margin-top: 1.5em;
+      margin-bottom: 1.5em;
+    }
+    &::before {
+      position: absolute;
+      left: 0;
+      content: '“----';
+      color: #6496c880;
+      font-size: 3em;
+      font-weight: normal;
+      margin-top: -0.72em;
+    }
+    &::after {
+      position: absolute;
+      right: 0;
+      content: '----”';
+      color: #6496c880;
+      font-size: 3em;
+      font-weight: normal;
+      margin-top: -1.42em;
+    }
+}
+// kbd 键盘标签样式
+kbd {
+  margin: 0 .1em;
+  padding: .1em .6em;
+  font-size: .8em;
+  color: #242729;
+  background: #fff;
+  border: 1px solid #adb3b9;
+  border-radius: 3px;
+  box-shadow: 0px 1px 0 rgba(12, 13, 14, 0.2), 0 0 0 2px #fff inset;
+  white-space: nowrap;
+  vertical-align: middle;
+  font-family: SourceHanSerifSC;
+}
+// rating 星星评级
+i.star{
+    color: hsl(61, 79%, 63%); /*星星的颜色*/
+  }
+
+  i.star-outline{
+    color: hsl(211, 31%, 74%);/*空星星的颜色*/
+  }
+
+  i.star svg, i.star-outline svg{
+    width: 20px;
+    fill: currentColor;
+}
+// card 卡片样式
+.mycard {
+    padding: 10px 20px;
+    margin: 20px 0;
+    border-radius: 4px;
+    word-break: break-all;
+    background: #d2e5eb14;
+    box-shadow: 0 6px 10px 0 #00000033;
+    .content {
+      line-height: 30px;
+    }
+}
+// notice
+.notice {
+  position:relative;
+  padding: 1em 1em 1em 2.5em;
+  margin-bottom: 1em;
+  border-radius: 4px;
+  p:last-child {
+      margin-bottom: 0;
+  }
+  .notice-title {
+      position: absolute;
+      left: 0.8em;
+      .notice-icon {
+          width: 1.2em;
+          height: 1.2em;
+      }
+  }
+  &.notice-warning {
+      background: hsla(0, 65%, 65%, 0.15);
+      border-left: 5px solid hsl(0, 65%, 65%);
+      .notice-title {
+          color: hsl(0, 65%, 65%);
+      }
+  }
+  &.notice-info {
+      background: hsla(30, 80%, 70%, 0.15);
+      border-left: 5px solid hsl(30, 80%, 70%);
+      .notice-title {
+          color: hsl(30, 80%, 70%);
+      }
+  }
+  &.notice-note {
+      background: hsla(200, 65%, 65%, 0.15);
+      border-left: 5px solid hsl(200, 65%, 65%);
+      .notice-title {
+          color: hsl(200, 65%, 65%);
+      }
+  }
+  &.notice-tip {
+      background: hsla(140, 65%, 65%, 0.15);
+      border-left: 5px solid hsl(140, 65%, 65%);
+      .notice-title {
+          color: hsl(140, 65%, 65%);
+      }
+  }
+}
+
+[data-theme="dark"] .notice {
+  &.notice-warning {
+      background: hsla(0, 25%, 35%, 0.15);
+      border-left: 5px solid hsl(0, 25%, 35%);
+      .notice-title {
+          color: rgba(224, 108, 108, 0.5);
+      }
+  }
+  &.notice-info {
+      background: hsla(30, 25%, 35%, 0.15);
+      border-left: 5px solid hsl(30, 25%, 35%);
+      .notice-title {
+          color: rgba(240, 178, 117, 0.5);
+      }
+  }
+  &.notice-note {
+      background: hsla(200, 25%, 35%, 0.15);
+      border-left: 5px solid hsl(200, 25%, 35%);
+      .notice-title {
+          color: rgba(108, 185, 224, 0.5);
+      }
+  }
+  &.notice-tip {
+      background: hsla(140, 25%, 35%, 0.15);
+      border-left: 5px solid hsl(140, 25%, 35%);
+      .notice-title {
+          color: rgba(108, 224, 147, 0.5);
+      }
+  }
+}
+// blur 文本高斯模糊
+.blur {
+    color: transparent;
+    text-shadow:0px 0px 8px var(--card-text-color-main)
+}
+
+.blur:hover {
+    color: transparent;
+    text-shadow:0px 0px 0px var(--card-text-color-main)
+
+}
+// imgloop 图片轮播
+.swiper-container {
+    max-width: 820px;
+    margin: 2em auto;
+}
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background-color: #fff;
+    /* Center slide text vertically */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+        margin: 0 !important;
+    }
+}
diff --git a/content/post/0/cover.jpg b/content/post/0/cover.jpg
diff --git a/content/post/0/index.md b/content/post/0/index.md
@@ -1,63 +1,148 @@
 +++
-title = "Example Page"
-slug = "example-page"
+title = "shortcode汇总"
+slug = "shortcode-summary"
 date = "2024-07-01"
-description = "Example description"
+description = "用于写作时方便复制Shortcode的页面"
 tags = [
     "markdown",
     "themes",
 ]
-image = "cover.jpg"
 draft = true
+weight = 1
 +++
 
-This is a example page.
-Built by `Hugo` with `Stack` theme.
+## 颜色渐变
 
-## Tables
+{{< highlight html >}}
+<font class="colorfulfont">文字颜色渐变</font>
+{{< /highlight >}}
 
-Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
+## 引用框
 
-   Name | Age
---------|------
-    Bob | 27
-  Alice | 23
+```
+{{</* blockquote author="作者" link="https://www.baidu.com" title="作品名" */>}}
+引用内容,链接可以不写，写的话就带`https://` 开头
+{{</* /blockquote */>}}
+```
 
-## Short Code
+---
 
-{{< abbr "HTTP" "Hyper Text Transfer Protocol" >}}
+```
+{{</* quote-center */>}}
+居中引用
+{{</* /quote-center */>}}
+```
 
-{{< align center "This is a centered text." >}}
+## 对话框
 
-{{< chat pos="left" name='Alice' time="2024-07-01 12:00" >}}
+```
+{{</* chat pos="left" name=Alice time="2023-07-01 12:00" */>}}
 Left message.
-{{< /chat >}}
+{{</* /chat */>}}
 
-{{< chat name='Bob' time="2024-07-01 12:01" >}}
+{{</* chat name=Bob time="2024-07-01 12:01" */>}}
 Right message.
-{{< /chat >}}
+{{</* /chat */>}}
+```
+
+## 卡片
+
+```
+{{</* card */>}}
+卡片内容
+{{</* /card */>}}
+```
+
+## 通知框
+
+```
+{{</* notice notice-warning */>}}
+warning
+{{</* /notice */>}}
+
+{{</* notice notice-info */>}}
+info
+{{</* /notice */>}}
+
+{{</* notice notice-note */>}}
+note
+{{</* /notice */>}}
+
+{{</* notice notice-tip */>}}
+tip
+{{</* /notice */>}}
+```
+
+## 展开
+
+```
+{{</* detail "展开看内容" */>}}
+内容
+{{</* /detail */>}}
+```
+
+## 文字居中等
 
+```
+{{</* align left "文字居左" */>}}
+{{</* align center "文字居中" */>}}
+{{</* align right "文字居右" */>}}
+```
+
+## 文字摇晃
+
+```
+{{</* shake shake */>}}基本的摇晃效果{{</* /shake */>}}
+
+{{</* shake shake-hard */>}}剧烈摇晃效果{{</* /shake */>}}
+
+{{</* shake shake-slow */>}}慢速摇晃效果{{</* /shake */>}}
+
+{{</* shake shake-little */>}}轻微摇晃效果{{</* /shake */>}}
+
+{{</* shake shake-horizontal */>}}水平摇晃效果{{</* /shake */>}}
+
+{{</* shake shake-vertical */>}}垂直摇晃效果{{</* /shake */>}}
+
+{{</* shake shake-rotate */>}}旋转摇晃效果{{</* /shake */>}}
 
-## Math
+{{</* shake shake-opacity */>}}透明度变化摇晃效果{{</* /shake */>}}
 
-$f(x) = x^2 + 1$
+{{</* shake shake-crazy */>}}疯狂摇晃效果{{</* /shake */>}}
 
-$$
-f(x) = x^2 + 1
-$$
+{{</* shake shake-freeze */>}}在悬停时冻结{{</* /shake */>}}
 
-## Links
+{{</* shake shake-constant */>}}持续摇晃{{</* /shake */>}}
+```
+
+## 键盘按键
 
-[baidu百度](https://www.baidu.com)
+{{< highlight html >}}
+<kbd>Ctrl</kbd>
+{{< /highlight >}}
 
-[google谷歌](https://www.google.com)
+## 星星
 
-## Code Blocks
+- rating用法：总星数 实际星数；不可以打半星
 
-```diff
-- features = ["dynamic"]
-+ features = ["jpeg", "dynamic"]
+```
+{{</* rating 10 7 */>}}
 ```
 
-<br>
+## 高斯模糊
 
+{{< highlight html >}}
+<span class="blur">高斯模糊</span>
+{{< /highlight >}}
+
+## 轮播图
+
+```
+{{</* imgloop "1.jpg,2.jpg" */>}}
+```
+
+## 缩写
+
+```
+{{</* abbr "缩写" "缩写内容" */>}}
+```
diff --git a/content/post/3/image.png b/content/post/3/image.png
diff --git a/content/post/3/image1.png b/content/post/3/image1.png
diff --git a/content/post/3/image2.png b/content/post/3/image2.png
diff --git a/content/post/3/image3.png b/content/post/3/image3.png