合并重复定义样式
增加过期说明 更新博客说明
This commit is contained in:
parent
04b0f4da85
commit
c2adcec23e
@ -19,3 +19,9 @@ export const VISITED_PLACES = ['中国-黑龙江', '中国-吉林', '中国-辽
|
||||
|
||||
export const DOUBAN_ID = 'lsy22';
|
||||
|
||||
export const ARTICLE_EXPIRY_CONFIG = {
|
||||
enabled: true, // 是否启用文章过期提醒
|
||||
expiryDays: 365, // 文章过期天数
|
||||
warningMessage: '这篇文章已经发布超过一年了，内容可能已经过时，请谨慎参考。' // 提醒消息
|
||||
};
|
||||
|
||||
|
||||
@ -14,8 +14,8 @@ tags: []
|
||||
|
||||
进入域名管理添加域名
|
||||
|
||||
- 加速域名:(加速域名)
|
||||
- 回源域名填写:(源站)
|
||||
- 加速域名:（加速域名）
|
||||
- 回源域名填写:（源站）
|
||||
- 回源host选择:与回源域名一致
|
||||
|
||||
改动回源host的目的是为了让vercel那边知道你需要回源到的域名。
|
||||
|
||||
@ -92,6 +92,18 @@ tags: ["标签1", "标签2"]
|
||||
文章内容...
|
||||
```
|
||||
|
||||
### 文章过期提醒
|
||||
|
||||
博客系统支持文章过期提醒功能，可以在 `src/consts.ts` 中配置：
|
||||
|
||||
```typescript
|
||||
export const ARTICLE_EXPIRY_CONFIG = {
|
||||
enabled: true, // 是否启用文章过期提醒
|
||||
expiryDays: 365, // 文章过期天数
|
||||
warningMessage: '这篇文章已经发布超过一年了，内容可能已经过时，请谨慎参考。' // 提醒消息
|
||||
};
|
||||
```
|
||||
|
||||
### 文章列表展示
|
||||
|
||||
文章列表页面会自动获取所有文章并按日期排序展示，支持：
|
||||
@ -245,46 +257,63 @@ import { VISITED_PLACES } from '@/consts';
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# 或者使用 pnpm
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
访问 `http://localhost:4321` 查看效果。
|
||||
|
||||
## 部署说明
|
||||
|
||||
### 本地构建部署
|
||||
### 部署方式选择
|
||||
|
||||
1. **Vercel 部署（推荐）**
|
||||
- 支持所有功能
|
||||
- 自动部署和 HTTPS
|
||||
- 支持 API 路由和动态数据
|
||||
- 可配合多吉云CDN实现自动刷新缓存
|
||||
|
||||
2. **静态托管（如腾讯云）**
|
||||
- 仅支持静态文件
|
||||
- 不支持的功能：
|
||||
- API 路由（豆瓣数据、Git 项目等）
|
||||
- 动态数据获取
|
||||
- 需要手动配置和上传
|
||||
|
||||
### CDN加速配置
|
||||
|
||||
博客支持通过多吉云CDN进行加速，并可通过GitHub Actions实现自动刷新缓存：
|
||||
|
||||
1. 按照[CDN配置指南](./cdn配置)配置多吉云CDN
|
||||
2. 按照[GitHub Actions自动刷新CDN缓存指南](./github-actions自动刷新多吉云_cdn缓存)配置自动刷新
|
||||
3. 配置完成后，每次博客更新时，CDN缓存将自动刷新
|
||||
|
||||
### 部署步骤
|
||||
|
||||
#### Vercel 部署
|
||||
|
||||
1. Fork 项目到 GitHub
|
||||
2. 在 Vercel 导入项目
|
||||
3. 配置环境变量（如果需要）
|
||||
4. 点击部署
|
||||
|
||||
#### 静态托管部署
|
||||
|
||||
1. 修改 `astro.config.mjs`：
|
||||
|
||||
```javascript
|
||||
export default defineConfig({
|
||||
site: SITE_URL,
|
||||
output: "static",
|
||||
adapter: undefined,
|
||||
});
|
||||
```
|
||||
|
||||
2. 构建并上传：
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
# 上传 dist/client 目录到静态托管服务
|
||||
```
|
||||
|
||||
构建产物位于 `dist` 目录，将其部署到你的服务器即可。
|
||||
|
||||
### Vercel 部署
|
||||
|
||||
本项目完全支持 Vercel 部署，你可以通过以下步骤快速部署：
|
||||
|
||||
1. Fork 本项目到你的 GitHub 账号
|
||||
|
||||
2. 在 Vercel 控制台中点击 "New Project"
|
||||
|
||||
3. 导入你 fork 的 GitHub 仓库
|
||||
|
||||
4. 配置构建选项：
|
||||
- Framework Preset: Astro
|
||||
- Build Command: `astro build`
|
||||
- Output Directory: `dist`
|
||||
- Install Command: `npm install` 或 `pnpm install`
|
||||
|
||||
5. 点击 "Deploy" 开始部署
|
||||
|
||||
Vercel 会自动检测项目类型并应用正确的构建配置。每次你推送代码到 main 分支时，Vercel 都会自动重新部署。
|
||||
|
||||
#### 环境变量配置
|
||||
|
||||
如果你使用了需要环境变量的功能（如 API tokens），需要在 Vercel 项目设置中的 "Environment Variables" 部分添加相应的环境变量。
|
||||
|
||||
## 常见问题
|
||||
|
||||
1. **图片无法显示**
|
||||
@ -298,3 +327,8 @@ Vercel 会自动检测项目类型并应用正确的构建配置。每次你推
|
||||
3. **Git 项目无法显示**
|
||||
- 验证用户名配置
|
||||
- 确认 API 访问限制
|
||||
|
||||
4. **静态托管部署后功能异常**
|
||||
- 确认是否使用了需要服务器端支持的功能
|
||||
- 检查是否已将动态数据改为静态数据
|
||||
- 确认构建输出目录是否为 `dist/client`
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
import { getCollection, render } from 'astro:content';
|
||||
import { contentStructure, getRelativePath, getBasename, getDirPath, getSpecialPath } from '@/content.config';
|
||||
import type { SectionStructure } from '@/content.config';
|
||||
import { getSpecialPath } from '@/content.config';
|
||||
import Layout from '@/components/Layout.astro';
|
||||
import Breadcrumb from '@/components/Breadcrumb.astro';
|
||||
import { ARTICLE_EXPIRY_CONFIG } from '@/consts';
|
||||
|
||||
// 添加这一行，告诉Astro预渲染这个页面
|
||||
export const prerender = true;
|
||||
@ -168,27 +168,38 @@ function getArticleUrl(articleId: string) {
|
||||
|
||||
<!-- 文章内容区域 -->
|
||||
<div class="relative">
|
||||
<!-- 文章过期提醒 -->
|
||||
{(() => {
|
||||
const publishDate = article.data.date;
|
||||
const currentDate = new Date();
|
||||
const daysDiff = Math.floor((currentDate.getTime() - publishDate.getTime()) / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (ARTICLE_EXPIRY_CONFIG.enabled && daysDiff > ARTICLE_EXPIRY_CONFIG.expiryDays) {
|
||||
return (
|
||||
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm text-yellow-700">
|
||||
{ARTICLE_EXPIRY_CONFIG.warningMessage}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<article class="prose prose-lg dark:prose-invert prose-primary prose-table:rounded-lg prose-table:border-separate prose-table:border-2 prose-thead:bg-primary-50 dark:prose-thead:bg-dark-surface prose-ul:list-disc prose-ol:list-decimal prose-li:my-1 prose-blockquote:border-l-4 prose-blockquote:border-primary-500 prose-blockquote:bg-gray-100 prose-blockquote:dark:bg-dark-surface prose-a:text-primary-600 prose-a:dark:text-primary-400 prose-a:no-underline prose-a:border-b prose-a:border-primary-300 prose-a:hover:border-primary-600 max-w-none mb-12">
|
||||
<Content />
|
||||
</article>
|
||||
|
||||
<!-- 添加全局样式 -->
|
||||
<style is:global>
|
||||
/* 代码块样式 */
|
||||
.prose pre {
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* 行内代码样式 */
|
||||
.prose :not(pre) > code {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 固定目录面板 - 脱离文档流 -->
|
||||
<div class="hidden 2xl:block fixed right-[calc(50%-48rem)] top-20 w-64 z-30">
|
||||
<div class="bg-white dark:bg-dark-card rounded-lg shadow-lg p-4 max-h-[calc(100vh-8rem)] overflow-y-auto border border-gray-200 dark:border-gray-700">
|
||||
|
||||
@ -8,11 +8,12 @@
|
||||
background-color: #282c34 !important;
|
||||
border: 1px solid #374151;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.prose pre:hover {
|
||||
/* 移除之前的transform和shadow */
|
||||
}
|
||||
|
||||
|
||||
/* 代码块顶部栏 - 调整颜色使其更突出 */
|
||||
.code-header {
|
||||
@ -145,6 +146,8 @@
|
||||
font-family: "JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 0.85em;
|
||||
color: #e06c75;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* 暗色模式适配 */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user