mirror of
https://github.com/lbr77/blog-astro.git
synced 2026-04-09 00:19:12 +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>
|
||||
|
||||
Reference in New Issue
Block a user