refactor: v2
This commit is contained in:
@@ -13,6 +13,7 @@
|
||||
"@astrojs/node": "11.0.2",
|
||||
"@astrojs/solid-js": "^5.1.3",
|
||||
"astro": "^7.0.6",
|
||||
"clipboard": "^2.0.11",
|
||||
"dayjs": "^1.11.21",
|
||||
"github-markdown-css": "^5.9.0",
|
||||
"jsdom": "^29.1.1",
|
||||
|
||||
34
pnpm-lock.yaml
generated
34
pnpm-lock.yaml
generated
@@ -17,6 +17,9 @@ importers:
|
||||
astro:
|
||||
specifier: ^7.0.6
|
||||
version: 7.0.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.2)(@types/node@26.1.0)(rollup@4.62.2)
|
||||
clipboard:
|
||||
specifier: ^2.0.11
|
||||
version: 2.0.11
|
||||
dayjs:
|
||||
specifier: ^1.11.21
|
||||
version: 1.11.21
|
||||
@@ -1265,6 +1268,9 @@ packages:
|
||||
resolution: {integrity: sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
clipboard@2.0.11:
|
||||
resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==}
|
||||
|
||||
clsx@2.1.1:
|
||||
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
|
||||
engines: {node: '>=6'}
|
||||
@@ -1337,6 +1343,9 @@ packages:
|
||||
defu@6.1.7:
|
||||
resolution: {integrity: sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==}
|
||||
|
||||
delegate@3.2.0:
|
||||
resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
|
||||
|
||||
depd@2.0.0:
|
||||
resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
|
||||
engines: {node: '>= 0.8'}
|
||||
@@ -1487,6 +1496,9 @@ packages:
|
||||
github-slugger@2.0.0:
|
||||
resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
|
||||
|
||||
good-listener@1.2.2:
|
||||
resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==}
|
||||
|
||||
h3@1.15.11:
|
||||
resolution: {integrity: sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg==}
|
||||
|
||||
@@ -1877,6 +1889,9 @@ packages:
|
||||
resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
|
||||
engines: {node: '>=v12.22.7'}
|
||||
|
||||
select@1.1.2:
|
||||
resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==}
|
||||
|
||||
semver@6.3.1:
|
||||
resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
|
||||
hasBin: true
|
||||
@@ -1956,6 +1971,9 @@ packages:
|
||||
symbol-tree@3.2.4:
|
||||
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
|
||||
|
||||
tiny-emitter@2.1.0:
|
||||
resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
|
||||
|
||||
tiny-inflate@1.0.3:
|
||||
resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
|
||||
|
||||
@@ -3295,6 +3313,12 @@ snapshots:
|
||||
|
||||
ci-info@4.4.0: {}
|
||||
|
||||
clipboard@2.0.11:
|
||||
dependencies:
|
||||
good-listener: 1.2.2
|
||||
select: 1.1.2
|
||||
tiny-emitter: 2.1.0
|
||||
|
||||
clsx@2.1.1: {}
|
||||
|
||||
comma-separated-tokens@2.0.3: {}
|
||||
@@ -3356,6 +3380,8 @@ snapshots:
|
||||
|
||||
defu@6.1.7: {}
|
||||
|
||||
delegate@3.2.0: {}
|
||||
|
||||
depd@2.0.0: {}
|
||||
|
||||
dequal@2.0.3: {}
|
||||
@@ -3515,6 +3541,10 @@ snapshots:
|
||||
|
||||
github-slugger@2.0.0: {}
|
||||
|
||||
good-listener@1.2.2:
|
||||
dependencies:
|
||||
delegate: 3.2.0
|
||||
|
||||
h3@1.15.11:
|
||||
dependencies:
|
||||
cookie-es: 1.2.3
|
||||
@@ -3931,6 +3961,8 @@ snapshots:
|
||||
dependencies:
|
||||
xmlchars: 2.2.0
|
||||
|
||||
select@1.1.2: {}
|
||||
|
||||
semver@6.3.1: {}
|
||||
|
||||
semver@7.8.5: {}
|
||||
@@ -4048,6 +4080,8 @@ snapshots:
|
||||
|
||||
symbol-tree@3.2.4: {}
|
||||
|
||||
tiny-emitter@2.1.0: {}
|
||||
|
||||
tiny-inflate@1.0.3: {}
|
||||
|
||||
tinyclip@0.1.15: {}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784628432297" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9153" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.1484375" height="200"><path d="M513.407379 0C230.713951 0 1.407379 229.306573 1.407379 512c0 282.693427 229.306573 512 512 512 282.693427 0 512-229.293792 512-512C1025.407379 229.306573 796.100806 0 513.407379 0z m26.17579 817.737837c-6.812352 6.799571-16.756085 10.991787-26.17579 10.991787-9.943733 0-19.37622-4.192216-26.175791-10.991787-6.799571-6.812352-10.991787-16.756085-10.991787-26.699818 0-9.943733 4.192216-19.900247 10.991787-26.699818s16.756085-10.991787 26.175791-10.991787c9.943733 0 19.363439 4.192216 26.17579 10.991787s10.991787 16.756085 10.991787 26.699818c0 9.943733-4.192216 19.887466-10.991787 26.699818z m-26.17579-87.435832c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605z m258.089717-237.678225c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.646726 206.798972c15.184004-15.184004 40.31174-15.184004 55.495743 0l230.354627 230.341845c15.184004 15.171222 15.184004 39.774932 0 55.482963z m0 0" p-id="9154"></path><path d="M771.497096 492.636561c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.659507 206.798972c15.184004-15.184004 40.31174-15.184004 55.495744 0l230.354626 230.341845c15.171222 15.184004 15.171222 39.787713-0.012781 55.495744zM513.407379 730.302005c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605M513.407379 828.729624c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.743304 37.167577 37.691605 0 20.93552-16.756085 37.691605-37.167577 37.691605" fill="#FFFFFF" p-id="9155"></path></svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
@@ -1 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1785642324396" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7302" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M695.744 981.312H419.712c-26.816 0-47.296-21.056-47.296-48.64V739.84c0-29.184 6.336-56.768 17.344-81.088-129.28-48.64-214.528-150.72-214.528-264.256 0-53.44 17.344-103.68 50.496-147.52C213.12 204.8 209.92 151.296 213.12 89.664c3.2-27.52 23.68-46.976 48.896-46.976 14.208 0 134.08 1.6 203.52 64.832a504.384 504.384 0 0 1 184.512 0C717.888 44.288 837.696 42.688 853.504 42.688a47.36 47.36 0 0 1 47.36 45.376c4.672 61.568 0 115.072-12.672 157.248 33.152 45.44 50.496 95.68 50.496 147.52 0 113.472-85.184 215.68-214.528 264.32 11.072 25.856 17.344 53.44 17.344 81.024v192.896c1.6 27.52-20.48 50.24-45.76 50.24z m-228.672-97.28h181.376V739.84c0-27.52-12.608-53.504-33.152-71.36a48.96 48.96 0 0 1-15.744-50.24c4.736-17.856 18.944-32.384 36.288-35.648 123.008-24.32 208.192-102.144 208.192-189.696 0-46.976-25.216-82.688-45.76-105.344a47.36 47.36 0 0 1-7.872-55.168c6.336-12.928 15.808-40.512 15.808-89.152-39.488 6.464-85.184 19.456-102.528 45.44a47.552 47.552 0 0 1-50.56 19.392 393.024 393.024 0 0 0-193.92 0c-18.944 4.864-37.888-3.2-50.56-19.456-17.28-25.92-63.04-38.912-102.464-45.376 1.6 48.64 9.472 76.16 15.744 89.152a53.696 53.696 0 0 1-7.872 55.168c-20.48 22.656-45.76 58.368-45.76 105.344 0 87.552 85.184 163.776 208.256 189.696 17.28 3.2 31.552 17.792 36.224 35.648a51.008 51.008 0 0 1-15.744 50.24c-20.48 17.856-33.152 43.776-33.152 71.36v144.256h3.2z" fill="#172B4D" p-id="7303"></path><path d="M403.968 788.416c-212.928 0-309.12-194.56-313.92-202.688-11.008-24.32-1.536-53.44 20.48-64.832a47.424 47.424 0 0 1 63.168 21.12c3.136 6.4 80.448 157.248 241.28 149.12a46.08 46.08 0 0 1 48.896 47.04c1.6 27.52-18.88 50.24-45.696 50.24h-14.208z" fill="#172B4D" p-id="7304"></path></svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
@@ -1,69 +0,0 @@
|
||||
---
|
||||
// 后面的 ?url 是 一个导入查询（import query），表示：不要把 SVG 当作组件或源码处理，而是返回这个资源的 URL 字符串。
|
||||
import backTopIcon from "@/assets/icon/back-top.svg?url";
|
||||
---
|
||||
|
||||
<button class="back-top" type="button" aria-label="返回顶部" hidden>
|
||||
<img src={backTopIcon} alt="">
|
||||
</button>
|
||||
|
||||
<script>
|
||||
const backTop = document.querySelector<HTMLButtonElement>(".back-top")
|
||||
|
||||
const toggleBackTop = () => {
|
||||
if (!backTop) return;
|
||||
|
||||
backTop.hidden = window.scrollY <= 500;
|
||||
};
|
||||
|
||||
backTop && backTop.addEventListener("click", () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener("scroll", toggleBackTop, {passive: true});
|
||||
|
||||
toggleBackTop();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.back-top {
|
||||
position: fixed;
|
||||
right: 150px;
|
||||
bottom: 100px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
z-index: 999;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.back-top[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.back-top img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
:global(.dark) .back-top img {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.back-top:focus-visible {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.back-top {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
---
|
||||
import { metadata } from "../consts";
|
||||
|
||||
const year = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer>
|
||||
<div class="content">
|
||||
<span>© 2026 {metadata.siteTitle}</span>
|
||||
<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">
|
||||
备案号：鄂ICP备2023000060号-2
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<style>
|
||||
footer {
|
||||
background: #22252b;
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
:global(.dark) footer {
|
||||
background: var(--background);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:global(.dark) .content {
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@@ -1,113 +0,0 @@
|
||||
---
|
||||
import {metadata} from "../consts";
|
||||
import ThemeIcon from './ThemeIcon.astro'
|
||||
import GitHubIcon from '@/assets/icon/github.svg?url'
|
||||
---
|
||||
|
||||
<header>
|
||||
<nav class="main-nav">
|
||||
<h1>
|
||||
<a href="/">{metadata.siteTitle}</a>
|
||||
</h1>
|
||||
|
||||
<div class="main-nav-right">
|
||||
<ul class="menu">
|
||||
<li class="menu-item"><a href="/">首页</a></li>
|
||||
<li class="menu-item"><a href="/archive">归档</a></li>
|
||||
<li class="menu-item"><a target="_blank" href="https://git.ua42.com">
|
||||
<img class="github-icon" src={GitHubIcon} alt="GitHub"/>
|
||||
</a></li>
|
||||
<!--<li class="menu-item"><a href="/">关于</a></li>-->
|
||||
</ul>
|
||||
|
||||
<ThemeIcon/>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
height: 60px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99999;
|
||||
box-shadow: var(--shadow);
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
padding: 0 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.main-nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-nav {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav h1 {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.main-nav .menu {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.github-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-nav .menu-item a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.main-nav .menu-item a:hover {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
:global(.dark) header {
|
||||
background: var(--background);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:global(.dark) .main-nav h1 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:global(.dark) .main-nav .menu-item a:hover {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
:global(.dark) .github-icon {
|
||||
filter: invert(1);
|
||||
}
|
||||
</style>
|
||||
107
src/components/IndexPage.astro
Normal file
107
src/components/IndexPage.astro
Normal file
@@ -0,0 +1,107 @@
|
||||
---
|
||||
import {siteConfig} from "@/consts.ts";
|
||||
import PostList from "@/components/Post/List.astro";
|
||||
import Pagination from "@/components/Post/Pagination.astro";
|
||||
import type {Post} from "@/types";
|
||||
|
||||
const {siteTitle} = siteConfig;
|
||||
|
||||
interface Props {
|
||||
posts: Post[]
|
||||
page: number
|
||||
totalPage: number
|
||||
}
|
||||
|
||||
const {posts, page, totalPage} = Astro.props
|
||||
---
|
||||
|
||||
<div class="page-content">
|
||||
<header>
|
||||
<div class="top">
|
||||
<h1>{siteTitle}</h1>
|
||||
<!--<nav>-->
|
||||
<!-- <span>归档</span>-->
|
||||
<!-- <span>/</span>-->
|
||||
<!-- <span>标签</span>-->
|
||||
<!-- <span>/</span>-->
|
||||
<!-- <span>关于</span>-->
|
||||
<!--</nav>-->
|
||||
</div>
|
||||
<div class="intro">
|
||||
<p>did you stand too close to the fire?<br>
|
||||
like a liar looking for forgiveness from a stone.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<PostList posts={posts}/>
|
||||
<Pagination page={page} totalPage={totalPage}/>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div>© 2026 Uroboros</div>
|
||||
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">备案号：鄂ICP备2023000060号-2</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page-content {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 24px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: var(--border-primary);
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.intro {
|
||||
padding: 28px 0;
|
||||
border-bottom: var(--border-secondary);
|
||||
line-height: 2;
|
||||
font-size: 15px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-shrink: 0;
|
||||
min-height: 0;
|
||||
height: 84px;
|
||||
padding-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
gap: 12px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
</style>
|
||||
@@ -1,152 +0,0 @@
|
||||
---
|
||||
import Folder from "@/assets/icon/folder.png?url";
|
||||
import TagIcon from "@/assets/icon/tag.png?url";
|
||||
import type { CategoriesStats,Tag } from "@/types";
|
||||
import { createHttp } from "@/lib/request";
|
||||
const http = createHttp(Astro.request.headers);
|
||||
|
||||
const { data: categories } =
|
||||
await http.get<ApiResponse<CategoriesStats[]>>("categories/stats");
|
||||
|
||||
const { data: tags } =
|
||||
await http.get<ApiResponse<Tag[]>>("posts/tags");
|
||||
---
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="widget">
|
||||
<h3 class="widget-title">
|
||||
<img src={Folder} alt="Folder" />
|
||||
文章分类
|
||||
</h3>
|
||||
<ul class="category-list">
|
||||
{
|
||||
categories.map((category) => (
|
||||
<li>
|
||||
<a
|
||||
href={`/search?c=${encodeURIComponent(category.code)}`}
|
||||
title={`${category.name} · ${category.post_count} 篇`}
|
||||
>
|
||||
{category.name}
|
||||
</a>
|
||||
<span class="count">{category.post_count}</span>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="widget">
|
||||
<h3 class="widget-title">
|
||||
<img src={TagIcon} alt="Tag" />
|
||||
标签云
|
||||
</h3>
|
||||
<div class="tag-cloud">
|
||||
{
|
||||
tags.map((tag) => (
|
||||
<a
|
||||
class="tag"
|
||||
href={`/search?t=${encodeURIComponent(tag.code)}`}
|
||||
>
|
||||
{tag.name}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.sidebar {
|
||||
flex-shrink: 0;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.widget {
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow);
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.widget-title img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* 分类 & 标签云 */
|
||||
.category-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.category-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 4px;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.category-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.category-list a:hover {
|
||||
color: #4f6df5;
|
||||
}
|
||||
|
||||
.category-list .count {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tag-cloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 12px;
|
||||
color: var(--tag-text);
|
||||
background: var(--tag-bg);
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
background: var(--tag-hover-bg);
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.sidebar {
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
---
|
||||
import type {Post} from "@/types/post";
|
||||
import IndexSidebar from "@/components/IndexSidebar.astro";
|
||||
import PostList from "@/components/Post/List.astro";
|
||||
import Pagination from "@/components/Post/Pagination.astro";
|
||||
|
||||
interface Props {
|
||||
posts: Post[];
|
||||
page: number;
|
||||
totalPage: number;
|
||||
}
|
||||
|
||||
const {posts, page, totalPage} = Astro.props;
|
||||
---
|
||||
|
||||
<div class="page-content">
|
||||
<div class="container">
|
||||
<div class="post-container">
|
||||
<PostList posts={posts}/>
|
||||
<Pagination page={page} totalPage={totalPage}/>
|
||||
</div>
|
||||
<IndexSidebar/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.post-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -52,7 +52,6 @@ const {
|
||||
.placeholder {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #f3f4f6;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
#f3f4f6 0%,
|
||||
|
||||
@@ -1,185 +0,0 @@
|
||||
---
|
||||
import type {Post} from '@/types';
|
||||
import Eye from "@/assets/icon/eye.png?url";
|
||||
import Folder from "@/assets/icon/folder.png?url";
|
||||
import Calendar from "@/assets/icon/calendar.png?url";
|
||||
import LazyImage from "@/components/LazyImage.astro";
|
||||
import {formatDatetime} from "@/lib/format.ts";
|
||||
|
||||
interface Props {
|
||||
post: Post
|
||||
}
|
||||
|
||||
const {post} = Astro.props;
|
||||
const published_at = formatDatetime(post.published_at, 'YYYY-MM-DD')
|
||||
---
|
||||
|
||||
<a href={`/post/${post.slug}`}>
|
||||
<article class="post-card">
|
||||
<div class="post-cover">
|
||||
<LazyImage src={post.cover} alt={post.title}/>
|
||||
</div>
|
||||
<div class="post-body">
|
||||
<div class="post-meta">
|
||||
<span>
|
||||
<img src={Calendar} alt="Calendar"/>
|
||||
{published_at}
|
||||
</span>
|
||||
<span>
|
||||
<img src={Folder} alt="Folder"/>
|
||||
{post.category_name}
|
||||
</span>
|
||||
<span>
|
||||
<img src={Eye} alt="Eye"/>
|
||||
{post.view_count}
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="post-title">
|
||||
{post.title}
|
||||
</h3>
|
||||
<div class="post-summary">
|
||||
{post.summary}
|
||||
</div>
|
||||
<div class="tags">
|
||||
{post.tags.map(tag =>
|
||||
<div class="tag">{tag.name}</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.post-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow);
|
||||
padding: 16px;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.post-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.post-cover {
|
||||
flex-shrink: 0;
|
||||
width: 160px;
|
||||
height: 100px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40px;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.post-meta span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.post-meta span img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.post-summary {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 12px;
|
||||
color: var(--tag-text);
|
||||
background: var(--tag-bg);
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
background: var(--tag-hover-bg);
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.post-card {
|
||||
padding: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.post-cover {
|
||||
width: 128px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.post-card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.post-summary {
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,37 +1,70 @@
|
||||
---
|
||||
import type {Post} from "@/types/post";
|
||||
import PostItem from '@/components/Post/Item.astro'
|
||||
import type {Post} from "@/types";
|
||||
import {formatDatetime} from '@/lib/format.ts'
|
||||
|
||||
interface Props {
|
||||
posts: Post[]
|
||||
}
|
||||
|
||||
const {posts} = Astro.props
|
||||
---
|
||||
|
||||
<section class="section">
|
||||
<div class="post-list">
|
||||
{posts.map(post => (
|
||||
<PostItem post={post}/>
|
||||
))}
|
||||
<div class="posts">
|
||||
{posts.map(item => (
|
||||
<div class="post">
|
||||
<span class="d">{formatDatetime(item.published_at, 'YY.MM.DD')}</span>
|
||||
<h2><a href=`/post/${item.slug}`>{item.title}</a></h2>
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.section {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
.posts {
|
||||
|
||||
}
|
||||
|
||||
.post-list {
|
||||
.post {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
gap: 20px;
|
||||
padding: 26px 0;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
@media (max-width: 860px){
|
||||
.post-list{
|
||||
gap: 12px;
|
||||
.post .d {
|
||||
font-size: 12px;
|
||||
color: #b8b8b8;
|
||||
min-width: 80px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.post h2 {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post h2 a {
|
||||
color: #181818;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post h2 a:hover {
|
||||
color: #334155;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 6px;
|
||||
}
|
||||
|
||||
.post .arrow {
|
||||
color: #d0d0d0;
|
||||
font-size: 14px;
|
||||
transition: transform 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.post:hover .arrow {
|
||||
color: #334155;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,58 +10,40 @@ const {page, totalPage} = Astro.props
|
||||
<!--分页器-->
|
||||
{totalPage > 1 &&
|
||||
<nav class="pagination" aria-label="分页">
|
||||
{page > 1 ? <a href={`/page/${page - 1}`} class="link">« 上一页</a> : <span class="link disabled">« 上一页</span>}
|
||||
{Array.from({length: totalPage}).map((_, index) => {
|
||||
if (page === index + 1) {
|
||||
return <span class="link current">{index + 1}</span>
|
||||
}
|
||||
return <a class="link" href={`/page/${index + 1}`}>{index + 1}</a>
|
||||
})}
|
||||
{page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页 »</a> :
|
||||
<span class="link disabled">下一页 »</span>}
|
||||
{page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页</a> :
|
||||
<span class="link disabled">下一页</span>}
|
||||
</nav>}
|
||||
|
||||
<style>
|
||||
/* ========== 分页 ========== */
|
||||
.pagination {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
margin-top: 32px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 38px;
|
||||
height: 38px;
|
||||
padding: 0 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
margin: 0 12px;
|
||||
line-height: 1;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.link:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.link:hover,
|
||||
.link.current {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: #fff;
|
||||
.current{
|
||||
color: var(--text-primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.link.disabled {
|
||||
color: var(--text-secondary);
|
||||
background: var(--card-bg);
|
||||
border-color: var(--border);
|
||||
color: var(--text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
---
|
||||
---
|
||||
<div class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
|
||||
<svg aria-hidden="true" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path class="sun" fill-rule="evenodd"
|
||||
d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
|
||||
<path class="moon" fill-rule="evenodd"
|
||||
d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#themeToggle {
|
||||
border: 0;
|
||||
background: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sun {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
.moon {
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
:global(.dark) .sun {
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
:global(.dark) .moon {
|
||||
fill: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
const meta = document.querySelector('meta[name="theme-color"]');
|
||||
|
||||
const theme = (() => {
|
||||
const localStorageTheme = localStorage?.getItem("theme") ?? '';
|
||||
if (['dark', 'light'].includes(localStorageTheme)) {
|
||||
return localStorageTheme;
|
||||
}
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
return 'dark';
|
||||
}
|
||||
return 'light';
|
||||
})();
|
||||
|
||||
if (theme === 'light') {
|
||||
document.documentElement.classList.remove('dark');
|
||||
meta.setAttribute('content', '#ffffff');
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
meta.setAttribute('content', '#0a0a0a');
|
||||
}
|
||||
|
||||
window.localStorage.setItem('theme', theme);
|
||||
|
||||
const handleToggleClick = () => {
|
||||
const element = document.documentElement;
|
||||
element.classList.toggle("dark");
|
||||
|
||||
const isDark = element.classList.contains("dark");
|
||||
meta.setAttribute('content', isDark ? '#0a0a0a' : '#ffffff');
|
||||
localStorage.setItem("theme", isDark ? "dark" : "light");
|
||||
}
|
||||
|
||||
document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
|
||||
</script>
|
||||
@@ -1,5 +1,6 @@
|
||||
export const metadata = {
|
||||
export const siteConfig = {
|
||||
site: "https://ua42.com",
|
||||
siteTitle: "Uroboros",
|
||||
postPageSize: 6
|
||||
postPageSize: 7,
|
||||
description: "Uroboros is a blog about programming, technology, and life."
|
||||
}
|
||||
|
||||
@@ -1,42 +1,48 @@
|
||||
---
|
||||
import "@/styles/global.css";
|
||||
|
||||
import BaseHeader from "@/components/BaseHeader.astro";
|
||||
import BaseFooter from "@/components/BaseFooter.astro";
|
||||
import BackTop from "@/components/BackTop.astro";
|
||||
|
||||
import { metadata } from "@/consts.ts";
|
||||
const { siteTitle } = metadata;
|
||||
import {siteConfig} from "@/consts.ts";
|
||||
const {siteTitle} = siteConfig;
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
const {title, description} = Astro.props;
|
||||
const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
|
||||
/>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
|
||||
<meta name="generator" content={Astro.generator}/>
|
||||
<meta name="description" content={description}/>
|
||||
<meta name="theme-color" content="#ffffff"/>
|
||||
<title>{pageTitle}</title>
|
||||
</head>
|
||||
<body>
|
||||
<BaseHeader />
|
||||
<main class="main">
|
||||
<slot />
|
||||
</main>
|
||||
<BaseFooter />
|
||||
<BackTop />
|
||||
</body>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
import {JSDOM} from 'jsdom'
|
||||
import {createHighlighter} from 'shiki'
|
||||
|
||||
const highlighter = await createHighlighter({
|
||||
themes: ['github-dark-dimmed'],
|
||||
langs: [
|
||||
"bash",
|
||||
"json",
|
||||
"yaml",
|
||||
"xml",
|
||||
"html",
|
||||
"css",
|
||||
"scss",
|
||||
"javascript",
|
||||
"typescript",
|
||||
"jsx",
|
||||
"tsx",
|
||||
"vue",
|
||||
"markdown",
|
||||
"sql",
|
||||
"graphql",
|
||||
"python",
|
||||
"java",
|
||||
"go",
|
||||
"rust",
|
||||
"c",
|
||||
"cpp",
|
||||
"csharp",
|
||||
"php",
|
||||
"ruby",
|
||||
"kotlin",
|
||||
"swift",
|
||||
"dockerfile",
|
||||
"nginx"
|
||||
]
|
||||
})
|
||||
|
||||
const resolveLang = (lang) => {
|
||||
const supported = highlighter.getLoadedLanguages?.() || []
|
||||
if (!lang) return 'text'
|
||||
if (supported.includes(lang)) return lang
|
||||
return 'text'
|
||||
}
|
||||
|
||||
export const highlightHtmlWithJsdom = async (rawHtml) => {
|
||||
const dom = new JSDOM(rawHtml)
|
||||
const document = dom.window.document
|
||||
|
||||
const codeElements = document.querySelectorAll('pre code')
|
||||
|
||||
for (const codeEl of codeElements) {
|
||||
const preEl = codeEl.parentElement
|
||||
if (!preEl || preEl.tagName !== 'PRE') continue
|
||||
|
||||
const codeContent = codeEl.textContent?.trim() || ''
|
||||
|
||||
// 提取语言
|
||||
let lang = 'text'
|
||||
for (const cls of codeEl.classList) {
|
||||
if (cls.startsWith('language-')) {
|
||||
lang = cls.slice('language-'.length)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
lang = resolveLang(lang)
|
||||
|
||||
// 生成高亮 HTML
|
||||
const highlighted = highlighter.codeToHtml(codeContent, {
|
||||
lang,
|
||||
theme: 'github-dark-dimmed',
|
||||
})
|
||||
|
||||
// 替换 DOM
|
||||
const wrapper = document.createElement('div')
|
||||
wrapper.innerHTML = highlighted.trim()
|
||||
|
||||
const newNode = wrapper.firstChild
|
||||
if (newNode && preEl.parentNode) {
|
||||
preEl.parentNode.replaceChild(newNode, preEl)
|
||||
}
|
||||
}
|
||||
|
||||
return dom.serialize()
|
||||
}
|
||||
120
src/lib/processHtml.ts
Normal file
120
src/lib/processHtml.ts
Normal file
@@ -0,0 +1,120 @@
|
||||
import {JSDOM} from 'jsdom'
|
||||
import {createHighlighter} from 'shiki'
|
||||
|
||||
const DEFAULT_THEME = 'github-dark-dimmed'
|
||||
|
||||
const highlighter = await createHighlighter({
|
||||
themes: [DEFAULT_THEME],
|
||||
langs: [
|
||||
"bash",
|
||||
"json",
|
||||
"yaml",
|
||||
"xml",
|
||||
"html",
|
||||
"css",
|
||||
"scss",
|
||||
"javascript",
|
||||
"typescript",
|
||||
"jsx",
|
||||
"tsx",
|
||||
"vue",
|
||||
"markdown",
|
||||
"sql",
|
||||
"python",
|
||||
"go",
|
||||
"dockerfile",
|
||||
"nginx"
|
||||
]
|
||||
})
|
||||
|
||||
const resolveLang = (lang: string) => {
|
||||
const supported = highlighter.getLoadedLanguages?.() || []
|
||||
if (!lang) return 'text'
|
||||
if (supported.includes(lang)) return lang
|
||||
return 'text'
|
||||
}
|
||||
|
||||
export const processHtmlWithJsdom = async (rawHtml: string) => {
|
||||
|
||||
const dom = new JSDOM(rawHtml)
|
||||
const document = dom.window.document
|
||||
|
||||
// 高亮处理代码块
|
||||
const codeBlocks = document.querySelectorAll('pre code')
|
||||
|
||||
for (const codeBlock of codeBlocks) {
|
||||
const preEl = codeBlock.parentElement
|
||||
if (!preEl || preEl.tagName !== 'PRE') continue
|
||||
|
||||
const codeContent = codeBlock.textContent || ''
|
||||
let lang = 'text'
|
||||
for (const cls of codeBlock.classList) {
|
||||
if (cls.startsWith('language-')) {
|
||||
lang = cls.slice('language-'.length)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
lang = resolveLang(lang)
|
||||
|
||||
// 高亮
|
||||
const highlighted = highlighter.codeToHtml(codeContent, {
|
||||
lang,
|
||||
theme: DEFAULT_THEME,
|
||||
})
|
||||
|
||||
// 替换 DOM
|
||||
const wrapper = document.createElement('div')
|
||||
wrapper.innerHTML = highlighted.trim()
|
||||
|
||||
const newNode = wrapper.firstElementChild
|
||||
if (newNode && preEl.parentNode) {
|
||||
const container = document.createElement('div')
|
||||
container.className = 'code-block'
|
||||
|
||||
const header = document.createElement('div')
|
||||
header.className = 'code-header'
|
||||
|
||||
const headerLeft = document.createElement('div')
|
||||
headerLeft.className = 'code-header-left'
|
||||
|
||||
const headerRight = document.createElement('div')
|
||||
headerRight.className = 'code-header-right'
|
||||
|
||||
// 装饰点
|
||||
const actions = document.createElement('div')
|
||||
actions.className = 'code-actions'
|
||||
|
||||
const close = document.createElement('span')
|
||||
close.className = 'dot close'
|
||||
|
||||
const minimize = document.createElement('span')
|
||||
minimize.className = 'dot minimize'
|
||||
|
||||
const maximize = document.createElement('span')
|
||||
maximize.className = 'dot maximize'
|
||||
|
||||
actions.append(close, minimize, maximize)
|
||||
|
||||
// 显示语言
|
||||
const langDisplay = document.createElement('div')
|
||||
langDisplay.className = 'code-language'
|
||||
langDisplay.textContent = lang ? lang : 'text'
|
||||
|
||||
const copyBtn = document.createElement('div')
|
||||
copyBtn.className = 'code-copy-btn'
|
||||
copyBtn.textContent = '复制代码'
|
||||
|
||||
headerLeft.append(actions, langDisplay)
|
||||
headerRight.append(copyBtn)
|
||||
|
||||
header.append(headerLeft, headerRight)
|
||||
|
||||
container.append(header, newNode)
|
||||
|
||||
preEl.parentNode.replaceChild(container, preEl)
|
||||
}
|
||||
}
|
||||
|
||||
return dom.serialize()
|
||||
}
|
||||
@@ -2,28 +2,6 @@
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout title="404">
|
||||
<div class="not-found">
|
||||
<h1>404 Not Found</h1>
|
||||
<a class="back-home" href="/">返回首页</a>
|
||||
</div>
|
||||
<Layout title="404" description="这里什么也没有发现~">
|
||||
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.not-found {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.back-home {
|
||||
background: black;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,198 +0,0 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import type {Archive} from "@/types/archive";
|
||||
import {createHttp} from "@/lib/request";
|
||||
|
||||
const http = createHttp(Astro.request.headers);
|
||||
|
||||
const {data} = await http.get<ApiResponse<Archive>>("posts/archives");
|
||||
---
|
||||
|
||||
<Layout title="归档">
|
||||
<div class="page-content">
|
||||
<div class="archive">
|
||||
{
|
||||
data.map((year) => (
|
||||
<div class="archive-year">
|
||||
<h2 class="year-title">
|
||||
<span class="year-badge">{year.year}</span>
|
||||
<span class="year-count">共 {year.total} 篇</span>
|
||||
</h2>
|
||||
<div>
|
||||
{year.list.map((month) => (
|
||||
<div class="month-group">
|
||||
<h3 class="month-title">{month.month} 月</h3>
|
||||
<ul class="post-list">
|
||||
{month.list.map((post) => (
|
||||
<li class="post-item">
|
||||
<span class="post-date">
|
||||
{post.published_at_display}
|
||||
</span>
|
||||
<a href={`/post/${post.slug}`}>{post.title}</a>
|
||||
<span class="post-cat">{post.category_name}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--border: #e5e7eb;
|
||||
--radius: 12px;
|
||||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.archive {
|
||||
width: 100%;
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.archive-year {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.year-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.year-title .year-badge {
|
||||
background: linear-gradient(135deg, #4f6df5, #7b5cf0);
|
||||
color: #fff;
|
||||
padding: 8px 16px;
|
||||
border-radius: 999px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.year-title .year-count {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.year-title::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
/* 月份分组 */
|
||||
.month-group {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* 时间轴竖线 */
|
||||
.month-group::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 8px;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.month-title {
|
||||
position: relative;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
:global(.dark) .month-title{
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* 月份节点圆点 */
|
||||
.month-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -26px;
|
||||
top: 8px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
box-shadow: 0 0 0 3px var(--tag-bg);
|
||||
}
|
||||
|
||||
.post-list {
|
||||
list-style: none;
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 14px;
|
||||
padding: 18px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.post-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.post-item:hover {
|
||||
background: #f9faff;
|
||||
}
|
||||
|
||||
:global(.dark) .post-item:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.post-date {
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
width: 52px;
|
||||
}
|
||||
|
||||
.post-item a {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 15px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.post-item a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
:global(.dark) .post-item a:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.post-cat {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: var(--primary);
|
||||
background: var(--tag-bg);
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
const noindex = true;
|
||||
import {metadata} from '@/consts.ts'
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
||||
@@ -1,25 +1,23 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import IndexView from "@/components/IndexView.astro";
|
||||
import type { Post } from "@/types/post";
|
||||
import { createHttp } from "@/lib/request";
|
||||
import { metadata } from "@/consts.ts";
|
||||
import {siteConfig} from "@/consts.ts";
|
||||
import {createHttp} from "@/lib/request.ts";
|
||||
import type {Post} from "@/types";
|
||||
import IndexPage from "@/components/IndexPage.astro";
|
||||
|
||||
const {postPageSize, description} = siteConfig;
|
||||
|
||||
const http = createHttp(Astro.request.headers);
|
||||
|
||||
const { list, total } = await http.get<ApiPageResponse<Post>>("posts", {
|
||||
const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
|
||||
searchParams: {
|
||||
page: 1,
|
||||
page_size: metadata.postPageSize,
|
||||
page_size: postPageSize,
|
||||
},
|
||||
});
|
||||
const totalPage = Math.ceil(total / metadata.postPageSize);
|
||||
const totalPage = Math.ceil(total / postPageSize);
|
||||
---
|
||||
|
||||
<Layout description="天若有情天亦老，人间正道是沧桑。" title="博客首页">
|
||||
<IndexView
|
||||
posts={list}
|
||||
page={1}
|
||||
totalPage={totalPage}
|
||||
/>
|
||||
<Layout title="博客首页" description={description}>
|
||||
<IndexPage page={1} totalPage={totalPage} posts={list}/>
|
||||
</Layout>
|
||||
|
||||
@@ -1,36 +1,34 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import type { Post } from "@/types/post";
|
||||
import { createHttp } from "@/lib/request";
|
||||
import { metadata } from "@/consts.ts";
|
||||
import IndexView from "@/components/IndexView.astro";
|
||||
import {siteConfig} from "@/consts.ts";
|
||||
import {createHttp} from "@/lib/request.ts";
|
||||
import type {Post} from "@/types";
|
||||
import IndexPage from "@/components/IndexPage.astro";
|
||||
const {page} = Astro.params;
|
||||
|
||||
const { page } = Astro.params;
|
||||
const pageInt = Number(page);
|
||||
|
||||
if (isNaN(Number(page))) {
|
||||
if (isNaN(pageInt) || pageInt <= 1) {
|
||||
return Astro.redirect("/");
|
||||
}
|
||||
|
||||
const {postPageSize,description} = siteConfig;
|
||||
|
||||
const http = createHttp(Astro.request.headers);
|
||||
|
||||
const { list, total } = await http.get<ApiPageResponse<Post>>("posts", {
|
||||
const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
|
||||
searchParams: {
|
||||
page,
|
||||
page_size: metadata.postPageSize,
|
||||
page: pageInt,
|
||||
page_size: postPageSize,
|
||||
},
|
||||
});
|
||||
const totalPage = Math.ceil(total / postPageSize);
|
||||
|
||||
const totalPage = Math.ceil(total / metadata.postPageSize);
|
||||
|
||||
if (totalPage < Number(page)) {
|
||||
if (totalPage < pageInt) {
|
||||
return Astro.redirect("/404");
|
||||
}
|
||||
---
|
||||
|
||||
<Layout description="天若有情天亦老，人间正道是沧桑。" title="博客首页">
|
||||
<IndexView
|
||||
posts={list}
|
||||
page={Number(page)}
|
||||
totalPage={totalPage}
|
||||
/>
|
||||
<Layout title="博客首页" description={description}>
|
||||
<IndexPage page={pageInt} totalPage={totalPage} posts={list}/>
|
||||
</Layout>
|
||||
|
||||
@@ -3,159 +3,186 @@ import "@/styles/github-markdown.css";
|
||||
import "@/styles/github-markdown-reset.css";
|
||||
import "photoswipe/dist/photoswipe.css";
|
||||
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import { createHttp } from "@/lib/request.ts";
|
||||
import { highlightHtmlWithJsdom } from "@/lib/highlight.js";
|
||||
import { formatDatetime } from "@/lib/format.ts";
|
||||
import type { Post } from "@/types";
|
||||
import Layout from '@/layouts/Layout.astro';
|
||||
import {createHttp} from "@/lib/request.ts";
|
||||
import type {Post} from "@/types";
|
||||
import {processHtmlWithJsdom} from "@/lib/processHtml.ts";
|
||||
import {siteConfig} from '@/consts'
|
||||
import {formatDatetime} from "@/lib/format.ts";
|
||||
|
||||
const { slug } = Astro.params;
|
||||
const {siteTitle} = siteConfig
|
||||
|
||||
let data: Post;
|
||||
const {slug} = Astro.params;
|
||||
|
||||
const http = createHttp(Astro.request.headers);
|
||||
|
||||
let data: Post;
|
||||
|
||||
try {
|
||||
const res = await http.get<ApiResponse<Post>>(`posts/${slug}`);
|
||||
data = res.data;
|
||||
} catch (error) {
|
||||
return Astro.redirect("/404");
|
||||
}
|
||||
const content = await highlightHtmlWithJsdom(data.content);
|
||||
const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
|
||||
|
||||
const content = await processHtmlWithJsdom(data.content);
|
||||
const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
|
||||
---
|
||||
|
||||
<Layout title={data.title} description={data.summary}>
|
||||
<div class="page-content">
|
||||
<div class="post">
|
||||
<h1 class="post-title">{data.title}</h1>
|
||||
<Layout title={data.title} description="">
|
||||
<div class="page-container">
|
||||
<nav class="nav">
|
||||
<a class="nav-title" href="/">{siteTitle}</a>
|
||||
<a href="/">← 返回首页</a>
|
||||
</nav>
|
||||
|
||||
<div class="post-meta">
|
||||
<div class="published-at">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-calendar-days-icon lucide-calendar-days"
|
||||
>
|
||||
<path d="M8 2v4"></path>
|
||||
<path d="M16 2v4"></path>
|
||||
<rect width="18" height="18" x="3" y="4" rx="2"></rect>
|
||||
<path d="M3 10h18"></path>
|
||||
<path d="M8 14h.01"></path>
|
||||
<path d="M12 14h.01"></path>
|
||||
<path d="M16 14h.01"></path>
|
||||
<path d="M8 18h.01"></path>
|
||||
<path d="M12 18h.01"></path>
|
||||
<path d="M16 18h.01"></path>
|
||||
</svg>
|
||||
{published_at}
|
||||
<article>
|
||||
<div class="meta">
|
||||
<div class="meta-left">
|
||||
<span>{data.category_name} · {data.category_code.toUpperCase()}</span>
|
||||
<span>{published_at}</span>
|
||||
</div>
|
||||
|
||||
<div class="post-view">
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="5122"
|
||||
>
|
||||
<path
|
||||
d="M509.618 415.795c-42.695 0-77.253 38.372-77.253 85.738 0 47.352 34.558 86.22 77.253 86.22 42.667 0 76.716-38.867 76.716-86.22 0-47.352-34.049-85.738-76.716-85.738z m1.9-177.9c-211.548 0-383.265 159.859-383.265 274.587 0 114.727 171.717 273.624 383.266 273.624 212.484 0 384.227-162.522 384.227-273.624 0-111.088-171.743-274.587-384.227-274.587z m-1.446 452.006c-89.7 0-162.134-81.71-162.134-181.903 0-101.157 72.435-182.397 162.134-182.397 90.183 0 163.1 81.241 163.1 182.397 0 100.206-72.917 181.903-163.1 181.903z"
|
||||
p-id="5123"></path>
|
||||
</svg>
|
||||
{data.view_count}
|
||||
</div>
|
||||
<div class="meta-view-count">{data.view_count} 次阅读</div>
|
||||
</div>
|
||||
<h1>{data.title}</h1>
|
||||
|
||||
<div class="markdown-body" data-color-mode="dark" set:html={content} />
|
||||
<p class="summary">{data.summary}</p>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="markdown-body" data-color-mode="dark" set:html={content}/>
|
||||
|
||||
{
|
||||
data.tags.length > 0 &&
|
||||
<div class="tags">
|
||||
{data.tags.map(tag => <span>{tag.name}</span>)}
|
||||
</div>
|
||||
}
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
<div>© {siteTitle}</div>
|
||||
</footer>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.post {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: auto;
|
||||
padding: 24px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
margin-bottom: 16px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
.page-container {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.published-at {
|
||||
.nav a {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
article {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 48px 0 0;
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: var(--text-meta);
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.meta-left {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meta-view-count:hover{
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
margin: 20px 0 20px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
font-size: 14px;
|
||||
margin-bottom: 24px;
|
||||
color: var(--text-meta);
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: var(--border-secondary);
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
margin: 24px 0 24px 0;
|
||||
line-height: 1.8;
|
||||
font-size: 15px;
|
||||
color: var(--article-text-color);
|
||||
}
|
||||
|
||||
.tags {
|
||||
margin-top: 44px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tags span {
|
||||
font-size: 12px;
|
||||
color: #57606a;
|
||||
border: var(--border-primary);
|
||||
border-radius: 20px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
footer{
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
margin-top: 44px;
|
||||
border-top: var(--border-secondary);
|
||||
height: 66px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.published-at svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
:global(.markdown-body img) {
|
||||
object-fit: contain;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.post-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #6b7280;
|
||||
padding-right: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.post-view svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentColor; /* 让填充跟随 color */
|
||||
stroke: currentColor; /* 让描边也跟随 color */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.post-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.post {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.dark) .post {
|
||||
background: var(--card-bg);
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import PhotoSwipeLightbox from "photoswipe/lightbox";
|
||||
import ClipboardJS from "clipboard";
|
||||
|
||||
const init = async () => {
|
||||
const post = document.querySelector(".post")!;
|
||||
const images = Array.from(post.querySelectorAll("img"));
|
||||
const article = document.querySelector("article")!;
|
||||
const images = Array.from(article.querySelectorAll("img"));
|
||||
|
||||
const waitImageLoaded = (img: HTMLImageElement) => {
|
||||
if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
|
||||
@@ -163,8 +190,8 @@ const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
|
||||
}
|
||||
|
||||
return new Promise<void>((resolve) => {
|
||||
img.addEventListener("load", () => resolve(), { once: true });
|
||||
img.addEventListener("error", () => resolve(), { once: true });
|
||||
img.addEventListener("load", () => resolve(), {once: true});
|
||||
img.addEventListener("error", () => resolve(), {once: true});
|
||||
});
|
||||
};
|
||||
|
||||
@@ -190,7 +217,7 @@ const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
|
||||
);
|
||||
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
gallery: ".post",
|
||||
gallery: "article",
|
||||
children: "a[data-pswp-width]",
|
||||
pswpModule: () => import("photoswipe"),
|
||||
|
||||
@@ -209,4 +236,38 @@ const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
|
||||
const copyTimers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();
|
||||
|
||||
// 代码块复制功能
|
||||
const clipboard = new ClipboardJS(".code-copy-btn", {
|
||||
text: (el) => {
|
||||
const sibling = el.closest(".code-header")?.nextElementSibling;
|
||||
return sibling?.textContent.trim() || "";
|
||||
}
|
||||
});
|
||||
|
||||
clipboard.on("success", (e) => {
|
||||
const btn = e.trigger as HTMLElement;
|
||||
|
||||
// 清理当前按钮之前的定时器
|
||||
const oldTimer = copyTimers.get(btn);
|
||||
if (oldTimer) {
|
||||
clearTimeout(oldTimer);
|
||||
}
|
||||
|
||||
const originalText = btn.textContent || "";
|
||||
|
||||
btn.textContent = "✓ 代码已复制";
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
btn.textContent = originalText;
|
||||
copyTimers.delete(btn);
|
||||
}, 2000);
|
||||
|
||||
copyTimers.set(btn, timer);
|
||||
|
||||
e.clearSelection();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,214 +0,0 @@
|
||||
---
|
||||
import Layout from '@/layouts/Layout.astro'
|
||||
import type {CategoriesStats, Post, Tag} from "@/types";
|
||||
import {createHttp} from "@/lib/request.ts";
|
||||
import PostList from "@/components/Post/List.astro";
|
||||
|
||||
const http = createHttp(Astro.request.headers);
|
||||
|
||||
const searchParams = Astro.url.searchParams;
|
||||
const t = searchParams.get("t") ?? "";
|
||||
const c = searchParams.get("c") ?? "";
|
||||
|
||||
const [{data: categories}, {data: tags}] = await Promise.all([
|
||||
http.get<ApiResponse<CategoriesStats[]>>("categories/stats"),
|
||||
http.get<ApiResponse<Tag[]>>("posts/tags"),
|
||||
] as const)
|
||||
|
||||
let f_count = 0
|
||||
const findCategory = categories.find(item => {
|
||||
if (item.code === c) {
|
||||
f_count++
|
||||
}
|
||||
return item.code === c
|
||||
})
|
||||
|
||||
const findTag = tags.find(item => {
|
||||
if (item.code === t) {
|
||||
f_count++
|
||||
}
|
||||
return item.code === t
|
||||
})
|
||||
|
||||
// 搜索条件必须匹配 不允许非法值
|
||||
const {data:posts} = await http.get<ApiResponse<Post[]>>("posts/search", {
|
||||
searchParams: {
|
||||
category_code: findCategory?.code ?? "",
|
||||
tag_code: findTag?.code ?? "",
|
||||
}
|
||||
})
|
||||
|
||||
const count = posts.length
|
||||
|
||||
const pageTitle =
|
||||
f_count === 0 ? "所有文章" : [findCategory?.name, findTag?.name]
|
||||
.filter(Boolean)
|
||||
.join(" · ")
|
||||
|
||||
const pageDescription =
|
||||
f_count === 0
|
||||
? "浏览全部文章，按分类和标签筛选你感兴趣的内容。"
|
||||
: `浏览${pageTitle}相关文章，共 ${count} 篇。`
|
||||
|
||||
const buildSearchUrl = (type: 'category' | 'tag', code: string) => {
|
||||
const params = new URLSearchParams()
|
||||
|
||||
if (findTag?.code) {
|
||||
params.set('t', findTag.code)
|
||||
}
|
||||
|
||||
if (findCategory?.code) {
|
||||
params.set('c', findCategory.code)
|
||||
}
|
||||
|
||||
if (type === 'category') {
|
||||
if (c === code) {
|
||||
params.delete('c')
|
||||
} else {
|
||||
params.set('c', code)
|
||||
}
|
||||
} else {
|
||||
if (t === code) {
|
||||
params.delete('t')
|
||||
} else {
|
||||
params.set('t', code)
|
||||
}
|
||||
}
|
||||
|
||||
const query = params.toString()
|
||||
|
||||
return query ? `/search?${query}` : '/search'
|
||||
}
|
||||
---
|
||||
<Layout title={pageTitle} description={pageDescription}>
|
||||
<div class="page-content search-page">
|
||||
<header class="search-header">
|
||||
<h1 class="search-title">
|
||||
{pageTitle}
|
||||
</h1>
|
||||
<div class="search-count">共 <span>{count}</span> 篇</div>
|
||||
</header>
|
||||
|
||||
<div class="filter-group">
|
||||
<div class="nav-group">
|
||||
<div class="nav-label">分类:</div>
|
||||
<div class="nav-chips">
|
||||
{categories.map(item =>
|
||||
<a href={buildSearchUrl("category", item.code)}
|
||||
class={item.code === findCategory?.code ? 'chip active' : 'chip'}>{item.name}</a>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-group">
|
||||
<div class="nav-label">标签:</div>
|
||||
<div class="nav-chips">
|
||||
{tags.map(item =>
|
||||
<a href={buildSearchUrl("tag", item.code)}
|
||||
class={item.code === findTag?.code ? 'chip active' : 'chip'}>{item.name}</a>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{posts.length > 0 ?
|
||||
<PostList posts={posts}/> :
|
||||
<div class="no-result">没有找到相关文章</div>}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
|
||||
<style>
|
||||
.search-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
margin: 0 auto;
|
||||
max-width: 860px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
background: var(--card-bg);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow);
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.search-count {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.search-count span {
|
||||
color: var(--tag-text);
|
||||
}
|
||||
|
||||
.search-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
background: var(--card-bg);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow);
|
||||
padding: 14px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.nav-chips {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chip {
|
||||
color: var(--tag-text);
|
||||
border-radius: 999px;
|
||||
background: var(--tag-bg);
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
transition: background 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chip.active, .chip:hover {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:global(.dark) .chip.active,
|
||||
:global(.dark) .chip:hover {
|
||||
background: #d1d5db;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.no-result {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-top: 32px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,10 @@
|
||||
import type {APIRoute} from 'astro';
|
||||
import {metadata} from "@/consts";
|
||||
import {siteConfig} from "@/consts";
|
||||
|
||||
const site = metadata.site
|
||||
const site = siteConfig.site
|
||||
|
||||
const staticUrls = [
|
||||
'',
|
||||
'/archive',
|
||||
'/search',
|
||||
];
|
||||
|
||||
export const GET: APIRoute = async () => {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import type {APIRoute} from 'astro';
|
||||
import {metadata} from "@/consts";
|
||||
import {siteConfig} from "@/consts";
|
||||
import {createHttp} from "@/lib/request.ts";
|
||||
import type {PostForSitemap} from "@/types";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const site = metadata.site
|
||||
const site =siteConfig.site
|
||||
|
||||
export const GET: APIRoute = async (context) => {
|
||||
const http = createHttp(context.request.headers);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type {APIRoute} from 'astro';
|
||||
import {metadata} from "@/consts";
|
||||
import {siteConfig} from "@/consts";
|
||||
|
||||
const site = metadata.site
|
||||
const site = siteConfig.site
|
||||
|
||||
export const GET: APIRoute = () => {
|
||||
const xml = `<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
|
||||
@@ -1,10 +1,30 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
/* 滚动条轨道 */
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 滚动条滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* 鼠标悬停 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.markdown-body pre code{
|
||||
font-size: 1.1em;
|
||||
.markdown-body pre code {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.markdown-body h1,
|
||||
@@ -8,11 +8,77 @@
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
border-bottom: none ;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.markdown-body pre code{
|
||||
.markdown-body pre code {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-body .highlight pre,
|
||||
.markdown-body pre {
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
margin: 12px 0 12px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
|
||||
}
|
||||
|
||||
.code-header {
|
||||
height: 36px;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--text-primary);
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
|
||||
.code-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.code-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.code-actions .dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.code-actions .close {
|
||||
background: #ff5f57;
|
||||
}
|
||||
|
||||
.code-actions .minimize {
|
||||
background: #febc2e;
|
||||
}
|
||||
|
||||
.code-actions .maximize {
|
||||
background: #28c840;
|
||||
}
|
||||
|
||||
.code-copy-btn {
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.code-copy-btn:hover {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
@@ -2,63 +2,28 @@
|
||||
@import "css-reset.css";
|
||||
|
||||
:root {
|
||||
--layout-width: 1080px;
|
||||
--background: #f6f7f9;
|
||||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
--shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
|
||||
--card-bg: #ffffff;
|
||||
--text-color: #2b2f36;
|
||||
--text-secondary: #6b7280;
|
||||
--border: #e5e7eb;
|
||||
--primary: #4f6df5;
|
||||
--tag-bg: #eef1fe;
|
||||
--tag-text: #4f6df5;
|
||||
--tag-hover-bg: #dfe6fd;
|
||||
--layout-width: 760px;
|
||||
--border-primary: 1px solid #dcdcdc;
|
||||
--border-secondary: 1px solid #eee;
|
||||
|
||||
--text-primary: #24292e;
|
||||
--text-secondary: #4b5563;
|
||||
--text-tertiary: #9ca3af;
|
||||
--text-disabled: #d1d5db;
|
||||
--text-meta: #71717a;
|
||||
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--article-text-color: #404040;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: #0a0a0a;
|
||||
--card-bg: #161b22;
|
||||
--text-color: #ffffff;
|
||||
--text-secondary: #e5e7eb;
|
||||
--border: #e5e7eb;
|
||||
--primary: #1e293b;
|
||||
--tag-bg: #27272a;
|
||||
--tag-text: #f3f4f6;
|
||||
--tag-hover-bg: #334155;
|
||||
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100vh;
|
||||
font-size: 16px;
|
||||
background: var(--background);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
width: 100%;
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
padding: 32px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-content {
|
||||
padding: 16px;
|
||||
}
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
font-family: var(--font-family), serif;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user