This commit is contained in:
toom1996
2025-06-26 14:18:22 +08:00
parent 2be1ccf1d5
commit 945bb01109
3 changed files with 402 additions and 3 deletions

View File

@ -3,7 +3,8 @@ import { websiteConfig } from "../../utils/rpc";
export async function onRequest (context: any, next: any) { export async function onRequest (context: any, next: any) {
// 拦截一个请求里的数据 console.log('middleware')
// 拦截一个请求里的数据
// 可选地修改 `locals` 中的属性 // 可选地修改 `locals` 中的属性
const host = await getHost(context.request); const host = await getHost(context.request);
@ -12,7 +13,6 @@ export async function onRequest (context: any, next: any) {
return next(); return next();
} }
// 防止无线跳转 // 防止无线跳转
if (context.locals.is_write) { if (context.locals.is_write) {
return next(); return next();

View File

@ -1 +1,106 @@
template_news ---
import Layout from '../../../layouts/Layout_1.astro';
import { APP_NAME } from '../../../config/app';
import { newsIndex } from '../../../../utils/rpc';
import Breadcrumb from '../../../components/Breadcrumb.astro';
const {code, data} = await newsIndex();
const title = `${APP_NAME} - 新闻专栏`;
const description = '知识回声最新新闻动态、行业资讯、合作信息。';
const keywords = '知识回声,知识回声新闻,知识回声动态,知识回声合作';
---
<Layout title={title} description={description} keywords={keywords}>
<Breadcrumb data={[{ title: '新闻专栏', link: 'javascript;' }]} />
<div class="news-container">
<section class="news-content">
<div class="news-list">
<!-- <h3>最新动态</h3> -->
<ul>
{
data.map(news => (
<li>
<a href={`/news/${news.id}`} title={news.title}>
<span class="news-title">{news.title}</span>
<span class="news-date">{news.created_at}</span>
</a>
</li>
))
}
</ul>
</div>
</section>
</div>
<style>
.news-container{
padding: 1rem;
}
.news-content a {
text-decoration: none;
}
.news-list {
margin-bottom: 2rem;
/* background: var(--bg-secondary); */
/* border-radius: var(--radius-lg); */
overflow: hidden;
}
.news-list h3 {
padding: 1rem;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
/* color: var(--text-primary); */
}
.news-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.news-list li {
margin-bottom: 0.8rem;
}
.news-list li:last-child {
margin-bottom: 0;
}
.news-list a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
border-radius: var(--radius-md);
transition: all 0.2s;
}
.news-list .news-title {
flex: 1;
margin-right: 1rem;
font-size: 0.95rem;
color: black;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.news-list .news-date {
font-size: 0.85rem;
color: var(--text-primary);
white-space: nowrap;
}
@media (max-width: 768px) {
.news-list a {
flex-direction: column;
align-items: flex-start;
}
}
</style>
</Layout>

View File

@ -0,0 +1,294 @@
---
import Layout from '../../../../layouts/Layout_1.astro';
import { newsDetail } from '../../../../../utils/rpc';
import { APP_NAME } from '../../../../config/app';
const { slug } = Astro.params;
if (!slug) {
return Astro.redirect('/404');
}
const {code, data} = await newsDetail(slug);
if (!data || code !== 0) {
return Astro.redirect('/404');
}
console.log(data)
---
<Layout title={APP_NAME + data.title} description={data.description} keywords={data.keywords}>
<main class="news-main">
<div class="news-container">
<article class="news-detail-content">
<h1 class="title" title="标题">{data.title}</h1>
<div class="news-meta">
<span class="news-date">发布日期: {data.created_at}</span>
<span class="news-author"><a href="/">作者: {APP_NAME}官方</a></span>
</div>
<div class="news-content" set:html={data.content}>
</div>
<div class="news-navigation">
{
data.prevNews && (
<div>
<span>上一篇: </span>
<a class="news-prev news-link" title={data.prevNews.title} href={`/news/${data.prevNews.id}`}>{data.prevNews.title}</a>
</div>
)
}
{
data.nextNews && (
<div>
<span>下一篇: </span>
<a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
</div>
)
}
</div>
</article>
<aside class="news-sidebar">
<div class="related-news">
<h3>相关新闻</h3>
<ul>
{data.about.map(item => (
<li>
<a class="news-link" title={item.title} href={`/news/${item.id}`}>
<span class="related-title">{item.title}</span>
{/* <span class="related-date">{item.date}</span> */}
</a>
</li>
))}
</ul>
</div>
</aside>
</div>
</main>
<style is:inline>
.news-content img {
max-width: 100%;
height: auto;
}
</style>
<style>
.news-meta {
border-bottom: 1px solid var(--text-primary);
color: black;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.title {
font-size: 2.5rem;
text-align: center;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1.5rem;
line-height: 1.4;
}
.news-meta {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 1.5rem;
}
.news-meta span{
color: var(--text-primary);
}
.news-date, .news-author {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.news-author a {
color: black;
text-decoration: none;
}
/*
.news-date::before {
content: '📅';
}
.news-author::before {
content: '👤';
} */
.news-tags {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.news-tag {
background: rgba(255, 255, 255, 0.15);
color: white;
padding: 0.3rem 1rem;
border-radius: var(--radius-md);
font-size: 0.9rem;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.news-tag:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
.news-container {
max-width: 1200px;
margin: -2rem auto 0;
/* padding: 0 1.5rem 3rem; */
display: grid;
grid-template-columns: 1fr 320px;
/* gap: 2.5rem; */
position: relative;
}
.news-detail-content {
border-right: 1px solid var(--text-primary);
padding: 3rem;
position: relative;
overflow: hidden;
}
.news-content {
font-size: 1.1rem;
line-height: 1.3;
}
.news-images {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.news-images img {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
transition: transform 0.3s ease;
}
.news-images img:hover {
transform: scale(1.02);
}
.news-content p {
margin-bottom: 1.8rem;
}
.news-content p:last-child {
margin-bottom: 0;
}
.news-navigation {
margin-top: 1rem;
padding-top: 2rem;
border-top: 1px solid var(--divider-color);
}
.news-sidebar {
position: sticky;
top: 2rem;
height: fit-content;
}
.related-news {
padding: 1rem;
/* box-shadow: var(--shadow-lg); */
}
.related-news h3 {
font-size: 1.2rem;
color: var(--text-primary);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--text-primary);
}
.related-news ul {
list-style: none;
padding: 0;
margin: 0;
}
.related-news li {
/* margin-bottom: 1.2rem;
padding-bottom: 1.2rem; */
border-bottom: 1px solid var(--divider-color);
}
.related-news li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.related-news a {
display: flex;
flex-direction: column;
gap: 0.5rem;
text-decoration: none;
/* color: var(--text-secondary); */
/* color: black; */
transition: all 0.3s ease;
padding: 0.4rem;
border-radius: var(--radius-md);
}
.related-news a:hover {
transform: translateX(5px);
}
.related-title {
font-size: 1rem;
line-height: 1.5;
}
.related-date {
font-size: 0.9rem;
color: var(--text-tertiary);
}
@media (max-width: 1024px) {
.news-container {
grid-template-columns: 1fr;
margin-top: -1rem;
}
.news-sidebar {
position: static;
}
}
@media (max-width: 480px) {
.news-detail-content {
padding: 1.5rem;
border: none;
}
.news-share {
flex-wrap: wrap;
gap: 0.8rem;
}
.share-btn {
width: 100%;
text-align: center;
}
}
</style>
</Layout>