feat: add support for links and navigation in sidebar

This commit is contained in:
ccbikai
2024-11-06 20:01:40 +08:00
parent 44a8e7941b
commit 98a1030907
5 changed files with 92 additions and 1 deletions

View File

@@ -21,4 +21,6 @@ TELEGRAM_HOST=telegram.dog
STATIC_PROXY=""
GOOGLE_SEARCH_SITE=""
TAGS=""
COMMENTS=""
COMMENTS=""
LINKS=""
NAVS=""

View File

@@ -126,6 +126,12 @@ TAGS=tag1,tag2,tag3
## Show comments
COMMENTS=true
## List of links in the Links page, Separate using commas and semicolons
LINKS=Title1,URL1;Title2,URL3;Title3,URL3;
## Sidebar Navigation Item, Separate using commas and semicolons
NAVS=Title1,URL1;Title2,URL3;Title3,URL3;
```
## 🙋🏻 FAQs

View File

@@ -124,6 +124,12 @@ TAGS=标签A,标签B,标签C
## 展示评论
COMMENTS=true
## 链接页面中的超链接, 使用英文逗号和分号分割
LINKS=Title1,URL1;Title2,URL3;Title3,URL3;
## 侧边栏导航项, 使用英文逗号和分号分割
NAVS=Title1,URL1;Title2,URL3;Title3,URL3;
```
## 🙋🏻 常问问题

View File

@@ -48,6 +48,17 @@ 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')
const LINKS = getEnv(import.meta.env, Astro, 'LINKS')
const navs = (getEnv(import.meta.env, Astro, 'NAVS') || '')
.split(';')
.filter(Boolean)
.map((link) => {
link = link.split(',')
return {
title: link[0],
href: link[1],
}
})
---
<!doctype html>
@@ -101,6 +112,28 @@ const TAGS = getEnv(import.meta.env, Astro, 'TAGS')
</div>
) : null
}
{
LINKS ? (
<div class="nav-item">
<a
href={`${SITE_URL}links`}
title="Links"
class={`nav-link ${pathname === '/links' ? 'current' : ''}`}
>
Links
</a>
</div>
) : null
}
{
navs.map((nav) => (
<div class="nav-item">
<a href={nav.href} title={nav.title} target="_blank" rel="noopener" class="nav-link">
{nav.title}
</a>
</div>
))
}
</div>
<input class="search-icon" name="icon" type="checkbox" placeholder="Search" />
<form class="search-form" action={searchAction} method="get">

44
src/pages/links.astro Normal file
View File

@@ -0,0 +1,44 @@
---
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 links = (getEnv(import.meta.env, Astro, 'LINKS') || '')
.split(';')
.filter(Boolean)
.map((link) => {
link = link.split(',')
return {
title: link[0],
href: link[1],
}
})
if (!links.length) {
return Astro.redirect('/')
}
---
<Layout channel={channel} id="main-container">
<slot name="header">
<Header channel={channel} />
</slot>
<div class="section-title">Links</div>
<div class="tag-cloud">
{
links.map((link) => (
<div class="tag-cloud-item">
<a href={link.href} class="tag" target="_blank" rel="noopener" title={link.title}>
{link.title}
</a>
</div>
))
}
</div>
</Layout>