mirror of
https://github.com/lbr77/blog-astro.git
synced 2026-04-10 09:39:11 +00:00
Some customization
This commit is contained in:
@@ -2,46 +2,182 @@
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.astro'
|
||||
import Link from '@/components/Link.astro'
|
||||
import PageHead from '@/components/PageHead.astro'
|
||||
import ProjectCard from '@/components/ProjectCard.astro'
|
||||
import Layout from '@/layouts/Layout.astro'
|
||||
import { getAllProjects } from '@/lib/data-utils'
|
||||
|
||||
const projects = await getAllProjects()
|
||||
---
|
||||
|
||||
<Layout class="max-w-3xl">
|
||||
<PageHead slot="head" title="About" />
|
||||
<Breadcrumbs items={[{ label: 'About', icon: 'lucide:info' }]} />
|
||||
|
||||
<section>
|
||||
<div class="min-w-full">
|
||||
<div class="prose mb-8">
|
||||
<p class="mt-0">
|
||||
astro-erudite is an opinionated, unstyled static blogging template
|
||||
that prioritizes simplicity and performance, built with <Link
|
||||
href="https://astro.build"
|
||||
external
|
||||
underline>Astro</Link
|
||||
>, <Link href="https://tailwindcss.com" external underline
|
||||
>Tailwind</Link
|
||||
>, and <Link href="https://ui.shadcn.com" external underline
|
||||
>shadcn/ui</Link
|
||||
>. It provides a clean foundation for your content while being
|
||||
extremely easy to customize.
|
||||
<section class="grid gap-6">
|
||||
<div class="relative rounded-lg border p-6">
|
||||
<div class="relative flex flex-col gap-4">
|
||||
<p class="text-xs uppercase tracking-[0.35em] text-muted-foreground">
|
||||
profile
|
||||
</p>
|
||||
<p>
|
||||
To learn more about the philosophy behind this template, check out the
|
||||
following blog post: <Link
|
||||
href="/blog/the-state-of-static-blogs"
|
||||
underline>The State of Static Blogs in 2024</Link
|
||||
>.
|
||||
<h1 class="text-3xl font-semibold">关于我</h1>
|
||||
<p class="max-w-3xl text-muted-foreground">
|
||||
啥都写一点，但是啥都不精通。前端后端客户端，运维网安都会那么一点点，尝试写出点什么项目但总是失败。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 class="mb-4 text-2xl font-medium">Example Projects Listing</h2>
|
||||
<div class="flex flex-col gap-4">
|
||||
{projects.map((project) => <ProjectCard project={project} />)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<div class="rounded-lg border p-5">
|
||||
<h3 class="text-lg font-semibold">安全</h3>
|
||||
<p class="text-sm leading-relaxed text-muted-foreground">
|
||||
非典型 Misc，啥都做点，（感觉更像是全栈？）
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border p-5">
|
||||
<h3 class="text-lg font-semibold">代码</h3>
|
||||
<p class="text-sm leading-relaxed text-muted-foreground">
|
||||
近期在写 C 和 Swift，之前写过 Golang、Python、JavaScript
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border p-5">
|
||||
<h3 class="text-lg font-semibold">生活</h3>
|
||||
<p class="text-sm leading-relaxed text-muted-foreground">
|
||||
二次元、骑车、游泳、羽毛球、CS、摄影
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p class="text-xs uppercase text-muted-foreground">setup</p>
|
||||
<h3 class="text-xl font-semibold">常用设备</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 grid gap-3 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<p class="text-sm font-semibold">PC</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
M2 Macbook Air · MSI Stealth 14 · iPad Air 5
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<p class="text-sm font-semibold">手机</p>
|
||||
<p class="text-sm text-muted-foreground">iPhone 17 · vivo x100 · iPhone 13 mini</p>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4 md:col-span-2">
|
||||
<p class="text-sm font-semibold">影音与记录</p>
|
||||
<p class="text-sm text-muted-foreground">Sony XM5 · Nikon Zfc</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="rounded-lg border p-6">
|
||||
<p class="text-xs uppercase text-muted-foreground">site</p>
|
||||
<h3 class="text-xl font-semibold">关于本站</h3>
|
||||
<p class="mt-2 text-sm leading-relaxed text-muted-foreground">
|
||||
栈在 <Link href="https://astro.build" external underline>Astro</Link>,
|
||||
<Link href="https://tailwindcss.com" external underline>Tailwind</Link>,
|
||||
<Link href="https://ui.shadcn.com" external underline>shadcn/ui</Link> 之上，开源在
|
||||
<Link href="https://github.com/jktrn/astro-erudite" external underline>GitHub</Link>。
|
||||
</p>
|
||||
<h4 class="text-l font-semibold mt-2">大事记</h4>
|
||||
<div class="mt-3 overflow-x-auto rounded-lg border">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-muted/60 text-left text-muted-foreground">
|
||||
<tr>
|
||||
<th class="px-4 py-2 font-semibold">时间</th>
|
||||
<th class="px-4 py-2 font-semibold">事件</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y">
|
||||
<tr>
|
||||
<td class="px-4 py-2 whitespace-nowrap">2018</td>
|
||||
<td class="px-4 py-2">
|
||||
第一次建站，域名 <code>stevelbr.ga</code>，使用 hexo 和不知道有几种主题
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 whitespace-nowrap">2020</td>
|
||||
<td class="px-4 py-2">
|
||||
购入腾讯云轻量服务器，购入域名 <code>stevelbr.top</code> ，使用 typecho 和
|
||||
typecho-theme-handsome 建站，接入备案。
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 whitespace-nowrap">2023</td>
|
||||
<td class="px-4 py-2">
|
||||
停止续费腾讯云轻量，购入域名 <code>nvme0n1p.dev</code>，使用 hugo+serverless service 建站。
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 whitespace-nowrap">2024.1</td>
|
||||
<td class="px-4 py-2">
|
||||
使用 <Link href="http://cali.so" external underline>cali.so</Link> nextjs自建服务，运行于 vercel。
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 whitespace-nowrap">2024.2</td>
|
||||
<td class="px-4 py-2">
|
||||
使用 astro 重构 typecho theme void 主题，使用 notion 作为 cms。
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 whitespace-nowrap">2024.8</td>
|
||||
<td class="px-4 py-2">
|
||||
使用 nuxtjs 重构 typecho theme void，同样使用 notion 作为 cms。
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 whitespace-nowrap">2024.10</td>
|
||||
<td class="px-4 py-2">
|
||||
优化 nuxtjs 代码，现在全站支持无刷新页面切换。<del>同时增加 algolia docsearch 魔改版作为站内搜索。</del>好像没开 Server Side Rendering ，炸了
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 whitespace-nowrap">2024.11</td>
|
||||
<td class="px-4 py-2">
|
||||
感谢<Link href="https://www.dkdun.cn/" external underline>林枫云</Link>对 ctfer 的支持，切换到了他家的香港服务器。
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 whitespace-nowrap">2025.2</td>
|
||||
<td class="px-4 py-2">用nextjs重写了。优化了访问速度，减少了了图片。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 whitespace-nowrap">2025.7</td>
|
||||
<td class="px-4 py-2">抽空把algolia search弄好了。(真的吗</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 whitespace-nowrap">2025.12</td>
|
||||
<td class="px-4 py-2">换成Astro！</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="rounded-lg border p-6">
|
||||
<p class="text-xs uppercase text-muted-foreground">comment</p>
|
||||
<h3 class="text-xl font-semibold mb-3">留言 / 评论</h3>
|
||||
<div id="tcomment"></div>
|
||||
<script
|
||||
is:inline
|
||||
src="https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js"
|
||||
></script>
|
||||
<script is:inline>
|
||||
const mountTwikoo = () => {
|
||||
if (!window.twikoo) return
|
||||
window.twikoo.init({
|
||||
envId: 'https://twikoo.hk.nvme0n1p.dev/',
|
||||
el: '#tcomment',
|
||||
})
|
||||
}
|
||||
|
||||
if (document.readyState === 'complete') {
|
||||
mountTwikoo()
|
||||
} else {
|
||||
addEventListener('astro:page-load', mountTwikoo)
|
||||
addEventListener('DOMContentLoaded', mountTwikoo, { once: true })
|
||||
}
|
||||
</script>
|
||||
</section>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
---
|
||||
import AuthorCard from '@/components/AuthorCard.astro'
|
||||
import BlogCard from '@/components/BlogCard.astro'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.astro'
|
||||
import PageHead from '@/components/PageHead.astro'
|
||||
import Layout from '@/layouts/Layout.astro'
|
||||
import { getAllAuthors, getPostsByAuthor } from '@/lib/data-utils'
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const authors = await getAllAuthors()
|
||||
return authors.map((author) => ({
|
||||
params: { id: author.id },
|
||||
props: { author },
|
||||
}))
|
||||
}
|
||||
|
||||
const { author } = Astro.props
|
||||
const authorPosts = await getPostsByAuthor(author.id)
|
||||
---
|
||||
|
||||
<Layout class="max-w-3xl">
|
||||
<PageHead
|
||||
slot="head"
|
||||
title={`${author.data.name} (Author)`}
|
||||
description={author.data.bio || `Profile of ${author.data.name}.`}
|
||||
noindex
|
||||
/>
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ href: '/authors', label: 'Authors', icon: 'lucide:users' },
|
||||
{ label: author.data.name, icon: 'lucide:user' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<section>
|
||||
<AuthorCard author={author} />
|
||||
</section>
|
||||
<section class="flex flex-col gap-y-4">
|
||||
<h2 class="text-2xl font-medium">Posts by {author.data.name}</h2>
|
||||
{
|
||||
authorPosts.length > 0 ? (
|
||||
<ul class="flex flex-col gap-4">
|
||||
{authorPosts
|
||||
.filter((post) => !post.data.draft)
|
||||
.map((post) => (
|
||||
<li>
|
||||
<BlogCard entry={post} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p class="text-muted-foreground">
|
||||
No posts available from this author.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
</Layout>
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
import AuthorCard from '@/components/AuthorCard.astro'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.astro'
|
||||
import PageHead from '@/components/PageHead.astro'
|
||||
import Layout from '@/layouts/Layout.astro'
|
||||
import { getAllAuthors } from '@/lib/data-utils'
|
||||
|
||||
const authors = await getAllAuthors()
|
||||
---
|
||||
|
||||
<Layout class="max-w-3xl">
|
||||
<PageHead slot="head" title="Authors" />
|
||||
<Breadcrumbs items={[{ label: 'Authors', icon: 'lucide:users' }]} />
|
||||
{
|
||||
authors.length > 0 ? (
|
||||
<ul class="flex flex-col gap-4">
|
||||
{authors.map((author) => (
|
||||
<li>
|
||||
<AuthorCard author={author} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p class="text-muted-foreground text-center">No authors found.</p>
|
||||
)
|
||||
}
|
||||
</Layout>
|
||||
107
src/pages/friends.astro
Normal file
107
src/pages/friends.astro
Normal file
@@ -0,0 +1,107 @@
|
||||
---
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.astro'
|
||||
import Link from '@/components/Link.astro'
|
||||
import PageHead from '@/components/PageHead.astro'
|
||||
import Layout from '@/layouts/Layout.astro'
|
||||
import {
|
||||
FRIENDS_API_URL,
|
||||
getFriendLinks,
|
||||
type LinkEntry,
|
||||
} from '@/lib/data-utils'
|
||||
|
||||
const placeholderAvatar = '/avatar-placeholder.svg'
|
||||
const visibleLinks = await getFriendLinks()
|
||||
---
|
||||
|
||||
<Layout class="max-w-3xl">
|
||||
<PageHead slot="head" title="Friends" />
|
||||
<Breadcrumbs items={[{ label: 'Friends', icon: 'lucide:users' }]} />
|
||||
|
||||
<section class="rounded-lg border p-6">
|
||||
<div class="flex flex-col gap-2">
|
||||
<h1 class="text-2xl font-semibold">友链 / Friends</h1>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
这里收集一些朋友和有趣的网站
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid gap-4">
|
||||
{
|
||||
visibleLinks.map((friend) => (
|
||||
<article class="rounded-lg border p-4 transition hover:border-primary/60">
|
||||
<div class="flex items-start gap-3">
|
||||
{
|
||||
friend.picLink ? (
|
||||
<img
|
||||
src={friend.picLink}
|
||||
alt={friend.name}
|
||||
loading="lazy"
|
||||
class="h-12 w-12 rounded-full border object-cover"
|
||||
width="48"
|
||||
height="48"
|
||||
onerror={`this.onerror=null;this.src='${placeholderAvatar}';`}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={placeholderAvatar}
|
||||
alt="avatar placeholder"
|
||||
loading="lazy"
|
||||
class="h-12 w-12 rounded-full border object-cover"
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
)
|
||||
}
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h2 class="text-lg font-semibold leading-tight">
|
||||
<Link href={friend.links} external underline>
|
||||
{friend.name}
|
||||
</Link>
|
||||
</h2>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{friend.Description || '你来到了知识的荒原'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))
|
||||
}
|
||||
</section>
|
||||
|
||||
<section class="rounded-lg border p-6">
|
||||
<h3 class="text-lg font-semibold">申请方式</h3>
|
||||
<p class="text-sm text-muted-foreground mt-2">
|
||||
请提供站点名称、链接、一句话介绍。
|
||||
</p>
|
||||
<pre class="mt-3 whitespace-pre-wrap break-words rounded-md bg-muted/50 p-3 text-xs text-muted-foreground">
|
||||
name: 溴化锂的笔记本
|
||||
link: https://nvme0n1p.dev
|
||||
avatar: https://gravatar.com/avatar/29d64df3ca2a9dac5a7fffa5372fb80fb3270ceb223de2af0c33cdc4b2cbe954?v=1687917579000&size=256&d=initials
|
||||
description: 醉后不知天在水，满船清梦压星河。
|
||||
</pre>
|
||||
<div id="tcomment"></div>
|
||||
<script
|
||||
is:inline
|
||||
src="https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js"
|
||||
></script>
|
||||
<script is:inline>
|
||||
const mountTwikoo = () => {
|
||||
if (!window.twikoo) return
|
||||
window.twikoo.init({
|
||||
envId: 'https://twikoo.hk.nvme0n1p.dev/',
|
||||
el: '#tcomment',
|
||||
})
|
||||
}
|
||||
|
||||
if (document.readyState === 'complete') {
|
||||
mountTwikoo()
|
||||
} else {
|
||||
addEventListener('astro:page-load', mountTwikoo)
|
||||
addEventListener('DOMContentLoaded', mountTwikoo, { once: true })
|
||||
}
|
||||
</script>
|
||||
</section>
|
||||
</Layout>
|
||||
@@ -14,48 +14,16 @@ const blog = await getRecentPosts(SITE.featuredPostCount)
|
||||
<PageHead slot="head" title="Home" />
|
||||
<section class="rounded-lg border">
|
||||
<div class="flex flex-col space-y-1.5 p-6">
|
||||
<h3 class="text-3xl leading-none font-medium">er·u·dite</h3>
|
||||
<h3 class="text-3xl leading-none font-medium">溴化锂的笔记本</h3>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
/ˈer(y)əˌdīt/ • <span class="font-medium">adjective</span>
|
||||
LiBr's Notebook
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-6 pt-0">
|
||||
<p class="text-muted-foreground mb-2 text-sm">
|
||||
astro-erudite is an opinionated, unstyled static blogging template built
|
||||
with <Link
|
||||
href="https://astro.build"
|
||||
class="text-foreground"
|
||||
external
|
||||
underline>Astro</Link
|
||||
>, <Link
|
||||
href="https://tailwindcss.com"
|
||||
class="text-foreground"
|
||||
external
|
||||
underline>Tailwind</Link
|
||||
>, and <Link
|
||||
href="https://ui.shadcn.com"
|
||||
class="text-foreground"
|
||||
external
|
||||
underline>shadcn/ui</Link
|
||||
>. Extraordinarily loosely based on the <Link
|
||||
href="https://astro-micro.vercel.app/"
|
||||
class="text-foreground"
|
||||
external
|
||||
underline>Astro Micro</Link
|
||||
> theme.
|
||||
</p>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
To use this template, check out the <Link
|
||||
href="https://github.com/jktrn/astro-erudite"
|
||||
class="text-foreground"
|
||||
underline
|
||||
external>GitHub</Link
|
||||
> repository. To learn more about why this template exists, read this blog
|
||||
post: <Link
|
||||
href="/blog/the-state-of-static-blogs"
|
||||
class="text-foreground"
|
||||
underline>The State of Static Blogs in 2024</Link
|
||||
>.
|
||||
nameless cybersecurity researcher. always studying.
|
||||
<br />
|
||||
More about me <Link href="/about" underline>here</Link>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user