update

src/assets/css/bootstrap.css

@@ -294,7 +294,6 @@ a {
 a:hover,
 a:focus {
   color: #E74C3C;
-  text-decoration: underline;
 }
 a:focus {
   outline: thin dotted;

src/components/Breadcrumb.astro

@@ -6,7 +6,7 @@ const {data} = Astro.props;
     {
         data.map((item: { title: string; link: string }) => {
             return (
-                <span class="separator">/</span>
+                <span class="separator"> > </span>
                 <a href={item.link}>{item.title}</a>
             )
         })
@@ -17,6 +17,8 @@ const {data} = Astro.props;
     .breadcrumb {
 		/* margin-left: 1rem; */
 		/* margin-bottom: 1rem; */
+        padding: 1rem;
+        border-bottom: 1px solid #ebebeb;
 		font-size: 1rem;
         font-weight: bold;
 	}

src/components/Pagination.astro

@@ -26,7 +26,7 @@ if (totalPages <= 7) {
     showPages.push(1, '...', currentPage - 1, currentPage, currentPage + 1, '...', totalPages);
   }
 }
-
+console.log(showPages)
 ---
 <nav class="pagination">
   <ul>

src/layouts/Layout.astro

@@ -40,7 +40,7 @@ const {desc = '霍尔果斯飞驰广告传媒有限公司是一家充满活力
 				 <nav class="top-nav">
 					<ul class="top-nav">
 						<li class=""><a href="/" class="scroll">首页 <span> </span></a></li>
-						<li class="page-scroll"><a href="/news" class="scroll">行业专栏<span> </span></a></li>
+						<li class="page-scroll"><a href="/news" class="scroll">资讯<span> </span></a></li>
 						<li class="page-scroll"><a href="/service" class="scroll">我们的服务 <span> </span></a></li>
 						<li class="page-scroll"><a href="/about" class="scroll">关于我们 <span> </span></a></li>
 						<li class="contatct-active" class="page-scroll"><a href="#contact" class="scroll">联系我们</a></li>
@@ -97,7 +97,7 @@ const {desc = '霍尔果斯飞驰广告传媒有限公司是一家充满活力
 					<div class="columns">
 						<ul>
 							<li><a href='/about-us'>关于我们</a></li>
-							<li><a href='/news'>行业专栏</a></li>
+							<li><a href='/news'>资讯</a></li>
 							<li><a href='/service'>我们的服务</a></li>
 						</ul>
 					</div>

src/pages/news.astro

@@ -10,12 +10,12 @@ import BreadComponent from "../components/Breadcrumb.astro";
 const config = getConfig(Astro);
 
 // 每页显示多少条
-const limit = 12;
+const limit = 10;
 
 // 页码
-const { page = 1 } = Astro.props;
+const { page = 1, columnDesc = `霍尔果斯飞驰广告有限公司致力于分享从基础到进阶的SEO优化策略、广告投放方法、内容运营技巧和网站转化率提升方案。` ,breadcrumb = [{ title: "资讯", link: "/news" }] } = Astro.props;
-const { code, data, total = 0, about } = await newsIndex(config.id, limit, page);
+const { code, data, total = 0, hot } = await newsIndex(config.id, limit, page);
-console.log(total)
+
 if (!data || code !== 0) {
     return Astro.redirect("/404");
 }
@@ -30,13 +30,12 @@ if (!data || code !== 0) {
                     class="archive-head"
                     style="grid-column: 1 / 3;grid-row: 1 / 2;"
                 >
-                    <BreadComponent
+                    <div>
-                        data={[{ title: "行业专栏", link: "/news" }]}
+                        <BreadComponent data={breadcrumb} />
-                    />
+                    </div>
+                    
                     <div class="archive-description">
-                        <p>
+                        <p><Fragment set:html={columnDesc}></p>
-                            欢迎来到我们的<a href="/news">行业专栏</a>，这里汇聚了关于数字营销、SEO优化及互联网行业最新动态的深度分析与实战经验。随着数字化转型的加速，越来越多的企业在探索如何在互联网浪潮中脱颖而出。我们专注于为营销人员、SEO专家以及各类企业提供最新的行业洞察、策略解析以及实用技巧。
-                        </p>
                     </div>
                 </div>
                 <div class="news-list-row">
@@ -85,6 +84,10 @@ if (!data || code !== 0) {
                                             <p class="entry-summary news-card-summary">
                                                 {e.description}
                                             </p>
+                                            <div>
+                                                <a href={e.column_tag_url}><span class="label label-success">{e.column_tag}</span></a>
+                                                {/* <a href={e.column_tag_url}><span class="label label-info">{e.column_tag}</span></a> */}
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -93,18 +96,18 @@ if (!data || code !== 0) {
                     }
                 </div>
                 <PaginationComponent
-                    totalPages={total}
+                    totalPages={Number(total)}
-                    currentPage={page}
+                    currentPage={Number(page)}
                     baseUrl={`/news/page/`}
                 />
             </div>
         </div>
         <div class="slide-container">
             <div class="widget widget-tie divPrevious">
-                <h3>最新文章</h3>
+                <h3>热门文章</h3>
                 <ul>
                     {
-                        about?.map((item, index) => {
+                        hot?.map((item, index) => {
                             return (
                                 <li class={`previous-${index + 1}`}>
                                     <div class="previous-one-img">
@@ -189,9 +192,19 @@ if (!data || code !== 0) {
         }
     }
 
+    .archive-description {
+        margin: 1rem;
+    }
+    
     .slide-container {
         padding: 1rem;
     }
+
+    .news-card-header > h2 {
+        margin: 1rem 0 1rem 0;
+        font-size: 18px;
+    }
+
     .archive-head {
         grid-column: 1 / 3;
         grid-row: 1 / 2;
@@ -226,6 +239,10 @@ if (!data || code !== 0) {
         display: flex;
     }
 
+    .news-card-summary {
+        color:#6e6e6e
+    }
+
     .sidebar {
         float: left;
         margin-left: -360px;

src/pages/news/[...slug].astro

@@ -1,25 +1,26 @@
 ---
 import Layout from "../../layouts/Layout.astro";
-import { getConfig } from '../../../utils/config'
+import { getConfig } from "../../../utils/config";
 import { newsDetail } from "../../../utils/rpc";
 import Breadcrumb from "../../components/Breadcrumb.astro";
 const { slug } = Astro.params;
-const config = getConfig(Astro)
+const config = getConfig(Astro);
 const requestUrl = Astro.request.url;
+const breadcrumb = [{title: '资讯', link: '/news'},{title: '教程', link: '/news/tech'}, {title: '正文', link: ''}]
 if (!slug) {
-  return Astro.redirect('/404');
+  return Astro.redirect("/404");
 }
 
-if (slug == 'seo_tech') {
+if (slug == "seo_tech") {
-  return Astro.rewrite('/')
+  return Astro.rewrite("/");
 }
 
 const { code, data } = await newsDetail(slug, config);
-
 if (!data || code !== 0) {
-  return Astro.redirect('/404');
+  return Astro.redirect("/404");
 }
 ---
+
 <Layout
   desc={data.description}
   keywords={data.keywords}
@@ -27,7 +28,11 @@ if (!data || code !== 0) {
 >
   <div class="v4 header-placeholder nav-v2" id="header-placeholder"></div>
   <div class="html-text-component parbase">
-        <div class="v4 n06-news-second-navigation" id="news-second-navigation-v4" data-component="n06-news-second-navigation">
+    <div
+      class="v4 n06-news-second-navigation"
+      id="news-second-navigation-v4"
+      data-component="n06-news-second-navigation"
+    >
       <div class="product-tabs-wrap container">
         <div class="product-tabs__heading">
           <div class="product-tabs__title body-medium">
@@ -39,10 +44,13 @@ if (!data || code !== 0) {
   </div>
   <main class="news-main">
     <div class="news-container">
-      <!-- <Breadcrumb data={[]}/> -->
+      <Breadcrumb data={breadcrumb} />
       <header>
         <h1 class="title" title={data.title}>{data.title}</h1>
-        <span class="label label-default">Label</span>
+        <span>{data.created_at}</span>
+        <a href={data.column_tag_url}
+          ><span class="label label-success">{data.column_tag}</span></a
+        >
       </header>
       <article class="news-detail-content">
         <div class="top-icon"></div>
@@ -58,7 +66,13 @@ if (!data || code !== 0) {
           data.prevNews && (
             <div>
               <span>上一篇: </span>
-              <a class="news-prev news-link" title={data.prevNews.title} href={`/news/${data.prevNews.id}`}>{data.prevNews.title}</a>
+              <a
+                class="news-prev news-link"
+                title={data.prevNews.title}
+                href={`/news/${data.prevNews.id}`}
+              >
+                {data.prevNews.title}
+              </a>
             </div>
           )
         }
@@ -66,7 +80,13 @@ if (!data || code !== 0) {
           data.nextNews && (
             <div>
               <span>下一篇: </span>
-              <a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
+              <a
+                class="news-next news-link"
+                title={data.nextNews.title}
+                href={`/news/${data.nextNews.id}`}
+              >
+                {data.nextNews.title}
+              </a>
             </div>
           )
         }
@@ -75,23 +95,26 @@ if (!data || code !== 0) {
     <aside class="news-sidebar">
       <div class="related-news">
         <h3>相关推荐</h3>
-        <div class="top-icon"></div>
         <ul>
-          {data.about.map(item => (
+          {
+            data.about.map((item) => (
               <li>
-              <a class="news-link" title={item.title} href={`/news/${item.id}`}>
+                <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>
   </main>
 </Layout>
 <style is:inline>
-
   @media (min-width: 1200px) and (max-width: 1500px) {
     .header_full_banner {
       padding-left: 125px;
@@ -102,15 +125,39 @@ if (!data || code !== 0) {
     height: auto;
   }
 
-
   article {
-
+    h1,
-      h1, .h1, h2, .h2, h3, .h3, h4, p {
+    .h1,
-      font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
+    h2,
+    .h2,
+    h3,
+    .h3,
+    h4,
+    p,
+    ol > li,
+    ul > li
+    {
+      font:
+        14px Helvetica Neue,
+        Helvetica,
+        PingFang SC,
+        Tahoma,
+        Arial,
+        sans-serif;
       /* text-indent: unset !important; */
-      margin: 15px;
+      /* margin: 15px; */
       /* margin-top: 0.5rem; */
       /* margin-bottom: unset; */
+      letter-spacing: .5px;
+      line-height: 32px;
+      margin-bottom: 15px;
+      font-size: 16px;
+      line-height: 32px;
+      margin-bottom: 24px;
+      text-align: justify;
+      color: #3b3b3b;
+      font-weight: 400;
+      word-break: break-word;
     }
 
     h1 {
@@ -173,14 +220,45 @@ if (!data || code !== 0) {
       margin-inline-end: 0px;
       unicode-bidi: isolate;
     }
+
   }
 
-    article h1, .h1, h2, .h2, h3, .h3, h4{
+  article h1,
+  .h1,
+  h2,
+  .h2,
+  h3,
+  .h3,
+  h4 {
     font-weight: 700;
   }
 
+  .breadcrumb {
+    border-bottom: none !important;
+    padding: unset !important;
+  }
+
+  header > h1 {
+    margin: unset;
+  }
 </style>
 <style>
+  .related-news > h3:after {
+    content: "";
+    width: 70px;
+    height: 1px;
+    background: #e94c3d;
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+  }
+  .related-news > h3 {
+    padding-bottom: 10px;
+    margin: unset;
+    border-bottom: 1px solid #ebebeb;
+    font-size: 15px;
+    position: relative;
+  }
   .news-main {
     display: grid;
     flex-direction: row;
@@ -195,17 +273,10 @@ if (!data || code !== 0) {
     }
   }
 
-    .news-container {
-      display: flex;
-      flex-direction: column;
-      background: #fff;
-      border: 1px solid #eee;
-    }
-
   .top-icon {
     margin-bottom: 1rem;
     margin-top: 1rem;
-        border-bottom: 1px solid #e0e0e0
+    border-bottom: 1px solid #e0e0e0;
   }
 
   .news-date {
@@ -214,7 +285,7 @@ if (!data || code !== 0) {
     color: #d0021b;
     line-height: 17px;
     margin-bottom: 30px;
-        display: inline-block
+    display: inline-block;
   }
 
   .news-meta {
@@ -225,12 +296,13 @@ if (!data || code !== 0) {
   }
 
   .title {
-      font-size: 2rem;
+    font-size: 1.5rem;
     text-align: left;
     font-weight: 700;
     color: var(--text-primary);
-      margin-bottom: 1.5rem;
+    margin-bottom: 0.8rem;
-      line-height: 1.4;
+    margin-top: 0.8rem;
+    /* line-height: 1.4; */
   }
 
   .news-meta {
@@ -282,13 +354,14 @@ if (!data || code !== 0) {
 
   .news-container {
     max-width: 1200px;
-      /* margin: -2rem auto 0; */
+    padding: 1.5rem;
-      padding: 0 1.5rem 3rem;
-      /* gap: 2.5rem; */
     position: relative;
-
     display: flex;
     justify-content: center;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border: 1px solid #eee;
   }
 
   .news-detail-content {
@@ -337,7 +410,7 @@ if (!data || code !== 0) {
   }
 
   .news-sidebar {
-      padding: 0 1.5rem 3rem;
+    padding: 1.5rem;
     /* position: sticky; */
     top: 2rem;
     height: fit-content;
@@ -377,7 +450,7 @@ if (!data || code !== 0) {
   }
 
   .related-title {
-      font-size: 1rem;
+    font-size: 0.9rem;
     line-height: 1.5;
   }
 
@@ -393,7 +466,6 @@ if (!data || code !== 0) {
   }
 
   @media (max-width: 480px) {
-
     .news-detail-content {
       border: none;
     }

src/pages/news/tech/[...page].astro

@@ -0,0 +1,7 @@
+---
+import News from '../../news.astro'
+const {page = 1} = Astro.params;
+const breadcrumb = [{title: '资讯', link: '/news'}, {title: '教程', link: '/news/tech'}]
+const columnDesc = '精选覆盖SEO优化、数字广告投放、网站转化率提升等多个方向的实用教程，帮助企业在2025年抓住数字营销红利。由霍尔果斯飞驰广告有限公司多年的实战经验总结，适用于各类企业与网站运营者。'
+---
+<News page = {page} breadcrumb = {breadcrumb} columnDesc = {columnDesc}>

utils/rpc.ts

@@ -30,6 +30,8 @@ export interface InewsIndex {
     content: string
     created_at: string
     updated_at: string
+    column_tag: string
+    column_tag_url: string
 }
 export async function newsIndex(websiteId:number = 0, limit:number = 10, page:number = 1):Promise<result<InewsIndex[]>>{
     const client = getRpcClient()
@@ -52,6 +54,8 @@ export interface InewsDetail {
     content: string
     created_at: string
     updated_at: string
+    column_tag: string
+    column_tag_url: string
     about: {
         id: number
         title: string