diff --git a/.env.example b/.env.example index dba955b..3983516 100644 --- a/.env.example +++ b/.env.example @@ -20,3 +20,4 @@ NO_INDEX=false TELEGRAM_HOST=telegram.dog STATIC_PROXY="" GOOGLE_SEARCH_SITE="" +TAGS="" diff --git a/README.md b/README.md index 0484d60..9c8d713 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,9 @@ STATIC_PROXY= ## Enable Google Site Search GOOGLE_SEARCH_SITE=memo.miantiao.me + +## Enable tags page, separate tags with commas +TAGS=tag1,tag2,tag3 ``` ## 🙋🏻 FAQs diff --git a/README.zh-cn.md b/README.zh-cn.md index a48495b..ffb3895 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -118,6 +118,9 @@ STATIC_PROXY= ## 启用谷歌站内搜索 GOOGLE_SEARCH_SITE=memo.miantiao.me + +## 启用标签页, 标签使用英文逗号分割 +TAGS=标签A,标签B,标签C ``` ## 🙋🏻 常问问题 diff --git a/src/assets/global.css b/src/assets/global.css index 932cf6d..287e881 100644 --- a/src/assets/global.css +++ b/src/assets/global.css @@ -15,6 +15,16 @@ html { transition: 0.2s ease; } +#aside-container { + position: sticky; + top: 0; +} + +#aside-container .nav { + position: static; + top: unset; +} + .search-icon { position: absolute; top: 20px; @@ -45,15 +55,16 @@ html { .search-form { display: none; - background: rgba(255, 255, 255, 0.75); + background: var(--code-background-color); + color: var(--secondary-color); padding: 8px; - position: sticky; - top: 60px; border-radius: var(--box-border-radius); > input { border: 1px solid var(--background-color); border-radius: var(--box-border-radius); + background: var(--code-background-color); + color: var(--secondary-color); outline: none; font-size: 12px; line-height: 2.4; @@ -64,15 +75,20 @@ html { } .copyright-wrap { - position: sticky; - top: 120px; color: #666; line-height: 1.5; font-size: 14px; display: none; + padding: 8px; } @media screen and (min-width: 600px) { + #aside-container { + height: 100vh; + height: 100svh; + overflow-y: auto; + } + .search-form { display: block; } @@ -91,7 +107,7 @@ html { position: fixed; bottom: 20px; right: 20px; - background-color: #fff; + background: var(--code-background-color); color: var(--secondary-color); width: 32px; height: 32px; diff --git a/src/components/item.astro b/src/components/item.astro index 5d4b60d..e1d6bf7 100644 --- a/src/components/item.astro +++ b/src/components/item.astro @@ -1,5 +1,4 @@ --- -import '../assets/item.css' import 'prismjs/themes/prism.css' import dayjs from '../lib/dayjs' import { getEnv } from '../lib/env' diff --git a/src/layouts/base.astro b/src/layouts/base.astro index 3fea63b..cdb1804 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -2,6 +2,7 @@ import '../assets/normalize.css' import '../assets/style.css' import '../assets/global.css' +import '../assets/item.css' import { SEO } from 'astro-seo' import { getEnv } from '../lib/env' import backToTopIcon from '../assets/back-to-top.svg' @@ -15,7 +16,7 @@ const seo = channel?.seo const canonical = SITE_URL.startsWith('http') ? new URL(SITE_URL).origin + Astro.url.pathname : Astro.url.origin + Astro.url.pathname -const origin = new URL(canonical).origin +const { origin, pathname } = new URL(canonical) const twitter = getEnv(import.meta.env, Astro, 'TWITTER') const seoParams = { @@ -46,6 +47,7 @@ const searchAction = GOOGLE_SEARCH_SITE ? 'https://www.google.com/search' : '/se const HEADER_INJECT = getEnv(import.meta.env, Astro, 'HEADER_INJECT') const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT') +const TAGS = getEnv(import.meta.env, Astro, 'TAGS') --- @@ -82,8 +84,23 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
- Home + + Home +
+ { + TAGS ? ( +
+ + Tags + +
+ ) : null + }
diff --git a/src/pages/tags.astro b/src/pages/tags.astro new file mode 100644 index 0000000..e7a3e5f --- /dev/null +++ b/src/pages/tags.astro @@ -0,0 +1,32 @@ +--- +import Layout from '../layouts/base.astro' +import Header from '../components/header.astro' +import { getChannelInfo } from '../lib/telegram' +import { getEnv } from '../lib/env' + +export const prerender = false +const channel = await getChannelInfo(Astro) + +const tags = (getEnv(import.meta.env, Astro, 'TAGS') || '').split(',') +--- + + + +
+ + +
Tags
+ +
+ { + tags.map((tag: string) => ( +
+ + {tag} + + {/* 0 */} +
+ )) + } +
+