diff options
| -rw-r--r-- | assets/css/components/_shortcodes.scss | 38 | ||||
| -rw-r--r-- | content/cards/_index.md | 3 | ||||
| -rw-r--r-- | hugo.yaml | 3 | ||||
| -rw-r--r-- | layouts/cards/section.html | 28 | ||||
| -rw-r--r-- | layouts/cards/single.html | 26 | ||||
| -rw-r--r-- | layouts/shortcodes/card.html | 29 |
6 files changed, 127 insertions, 0 deletions
diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss index 92ed9fbf..3ad7387a 100644 --- a/assets/css/components/_shortcodes.scss +++ b/assets/css/components/_shortcodes.scss @@ -200,3 +200,41 @@ a.blog-link img { .sidenote-content { font-size: 1rem } + +/* card */ + +.card { + border: 1px solid rgba(0,0,0,0.05); + border-radius: 2px; + padding: 1rem; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); + background-color: #fff; + margin: 1rem 0; + + position: relative; + .card-corner { + position: absolute; + top: 0; + right: 0; + width: 50px; + height: 50px; + background: linear-gradient(-45deg, #f8f8f8 50%, #ddd 50%); + clip-path: polygon(100% 0, 0 0, 100% 100%); + } +} + +.card-tags { + margin: 0; + font-size: 1rem; + a { + text-decoration: none + } +} + +.card-title { + margin: 0; +} + +.card-content { + font-size: 1.05rem; +} diff --git a/content/cards/_index.md b/content/cards/_index.md new file mode 100644 index 00000000..584af1b8 --- /dev/null +++ b/content/cards/_index.md @@ -0,0 +1,3 @@ +--- +title: 卡片 +--- @@ -21,6 +21,9 @@ languages: - name: 分类 link: /categories/ target: _self + - name: 卡片 + link: /cards/ + target: _self - name: 链接 link: /links/ target: _self diff --git a/layouts/cards/section.html b/layouts/cards/section.html new file mode 100644 index 00000000..fa0362d3 --- /dev/null +++ b/layouts/cards/section.html @@ -0,0 +1,28 @@ +{{ partial "snippets/document-start.html" . }} + <article class="card-list"> + {{ partial "header.html" . }} + <div id="cards-section"> + {{ partial "components/pagefind.html" . }} + {{- range .Pages }} + <div class="card markdown-body"> + <div class="card-header"> + <h3 class="card-title"> + <a href="{{ .Permalink }}" class="card-title-link">{{ .Title }}</a> + </h3> + {{- if .Params.tags }} + <p class="card-tags"> + {{- range .Params.tags }} + <a href="{{ "/tags/" | relURL }}{{ . | urlize }}" class="card-tag">#{{ . }}</a> + {{- end }} + </p> + {{- end }} + </div> + + <div class="card-content"> + {{ .Summary }} + </div> + </div> + {{- end }} + </div> + </article> +{{ partial "snippets/document-end.html" . }} diff --git a/layouts/cards/single.html b/layouts/cards/single.html new file mode 100644 index 00000000..b80f46c1 --- /dev/null +++ b/layouts/cards/single.html @@ -0,0 +1,26 @@ +{{ partial "snippets/document-start.html" . }} + <article + class="card-page {{ .Site.Language.LanguageName }}" + id="article" + > + {{ partial "components/breadcrumbs.html" . }} + <div id="post-content" class="post-content markdown-body"> + <div class="card"> + <a href="{{ .Permalink }}" class="card-corner"></a> <!-- 右上角折角 --> + <div class="card-header"> + <h3 class="card-title">{{ .Title }}</h3> + {{- if .Params.tags }} + <p class="card-tags"> + {{- range .Params.tags }} + <a href="{{ "/tags/" | relURL }}{{ . | urlize }}" class="card-tag">#{{ . }}</a> + {{- end }} + </p> + {{- end }} + </div> + <div class="card-content"> + {{ .Content }} + </div> + </div> + </div> + </article> +{{ partial "snippets/document-end.html" . }} diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html new file mode 100644 index 00000000..a860b72c --- /dev/null +++ b/layouts/shortcodes/card.html @@ -0,0 +1,29 @@ +{{- $card := .Site.GetPage (printf "cards/%s" (.Get 0)) -}} +{{- $hideHeader := .Get 1 | default "false" | lower -}} + +{{- if $card }} + <div class="card"> + <a href="{{ $card.Permalink }}" class="card-corner"></a> <!-- 右上角折角 --> + + {{- if ne $hideHeader "true" }} + <div class="card-header"> + <h3 class="card-title">{{ $card.Title }}</h3> + {{- if $card.Params.tags }} + <p class="card-tags"> + {{- range $card.Params.tags }} + <a href="{{ "/tags/" | relURL }}{{ . | urlize }}" class="card-tag">#{{ . }}</a> + {{- end }} + </p> + {{- end }} + </div> + {{- end }} + + <div class="card-content"> + {{- with $card.Content }} + {{ . }} + {{- end }} + </div> + </div> +{{- else }} + <p style="color: red;">⚠️ 无法找到卡片: {{ .Get 0 }}</p> +{{- end }} |