From 69b66775f8eb95f0cfea92c3cc8e9292a666ae1c Mon Sep 17 00:00:00 2001
From: toom1996 <toom1996@butnoice.com>
Date: Fri, 18 Jul 2025 15:20:55 +0800
Subject: [PATCH] update

---
 src/assets/css/bootstrap.css        |   1 -
 src/components/Breadcrumb.astro     |   4 +-
 src/components/Pagination.astro     |   2 +-
 src/layouts/Layout.astro            |   4 +-
 src/pages/news.astro                |  45 +-
 src/pages/news/[...slug].astro      | 676 +++++++++++++++-------------
 src/pages/news/tech/[...page].astro |   7 +
 utils/rpc.ts                        |   4 +
 8 files changed, 422 insertions(+), 321 deletions(-)
 create mode 100644 src/pages/news/tech/[...page].astro

diff --git a/src/assets/css/bootstrap.css b/src/assets/css/bootstrap.css
index 4a1ecde..ee48a38 100644
--- a/src/assets/css/bootstrap.css
+++ b/src/assets/css/bootstrap.css
@@ -294,7 +294,6 @@ a {
 a:hover,
 a:focus {
   color: #E74C3C;
-  text-decoration: underline;
 }
 a:focus {
   outline: thin dotted;
diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro
index acd2728..33b116c 100644
--- a/src/components/Breadcrumb.astro
+++ b/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;
 	}
diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
index df59ad1..731e097 100644
--- a/src/components/Pagination.astro
+++ b/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>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9c0504f..0b4a8c5 100644
--- a/src/layouts/Layout.astro
+++ b/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>
diff --git a/src/pages/news.astro b/src/pages/news.astro
index 85ad39b..87c48a1 100644
--- a/src/pages/news.astro
+++ b/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 { code, data, total = 0, about } = await newsIndex(config.id, limit, page);
-console.log(total)
+const { page = 1, columnDesc = `霍尔果斯飞驰广告有限公司致力于分享从基础到进阶的SEO优化策略、广告投放方法、内容运营技巧和网站转化率提升方案。` ,breadcrumb = [{ title: "资讯", link: "/news" }] } = Astro.props;
+const { code, data, total = 0, hot } = await newsIndex(config.id, limit, page);
+
 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
-                        data={[{ title: "行业专栏", link: "/news" }]}
-                    />
+                    <div>
+                        <BreadComponent data={breadcrumb} />
+                    </div>
+                    
                     <div class="archive-description">
-                        <p>
-                            欢迎来到我们的<a href="/news">行业专栏</a>，这里汇聚了关于数字营销、SEO优化及互联网行业最新动态的深度分析与实战经验。随着数字化转型的加速，越来越多的企业在探索如何在互联网浪潮中脱颖而出。我们专注于为营销人员、SEO专家以及各类企业提供最新的行业洞察、策略解析以及实用技巧。
-                        </p>
+                        <p><Fragment set:html={columnDesc}></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}
-                    currentPage={page}
+                    totalPages={Number(total)}
+                    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;
diff --git a/src/pages/news/[...slug].astro b/src/pages/news/[...slug].astro
index c97eef4..c4d7ba3 100644
--- a/src/pages/news/[...slug].astro
+++ b/src/pages/news/[...slug].astro
@@ -1,48 +1,56 @@
 ---
 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') {
-  return Astro.rewrite('/')
+if (slug == "seo_tech") {
+  return Astro.rewrite("/");
 }
 
-const {code, data} = await newsDetail(slug, config);
-
+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}
   title={`${data.title} - ${config.app_name}`}
 >
-    <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="product-tabs-wrap container">
-                <div class="product-tabs__heading">
-                    <div class="product-tabs__title body-medium">
-                        <!-- <a title={TP2_COLUMN_NEWS} href={TP2_COLUMN_NEWS_URL} class="product-link product-link__active">{TP2_COLUMN_NEWS}</a> -->
-                    </div>
-                </div>
-            </div>
+  <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="product-tabs-wrap container">
+        <div class="product-tabs__heading">
+          <div class="product-tabs__title body-medium">
+            <!-- <a title={TP2_COLUMN_NEWS} href={TP2_COLUMN_NEWS_URL} class="product-link product-link__active">{TP2_COLUMN_NEWS}</a> -->
+          </div>
         </div>
+      </div>
     </div>
+  </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,16 +66,28 @@ 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>
           )
         }
         {
           data.nextNews && (
-          <div>
+            <div>
               <span>下一篇: </span>
-              <a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
-          </div>
+              <a
+                class="news-next news-link"
+                title={data.nextNews.title}
+                href={`/news/${data.nextNews.id}`}
+              >
+                {data.nextNews.title}
+              </a>
+            </div>
           )
         }
       </div>
@@ -75,180 +95,232 @@ if (!data || code !== 0) {
     <aside class="news-sidebar">
       <div class="related-news">
         <h3>相关推荐</h3>
-        <div class="top-icon"></div>
         <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>
-          ))}
+          {
+            data.about.map((item) => (
+              <li>
+                <a
+                  class="news-link"
+                  title={item.title}
+                  href={`/news/${item.id}`}
+                >
+                  <span class="related-title">{item.title}</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;
+    }
+  }
+  .news-content img {
+    max-width: 100%;
+    height: auto;
+  }
 
-      @media (min-width: 1200px) and (max-width: 1500px) {
-          .header_full_banner {
-              padding-left: 125px;
-          }
-      }
-    .news-content img {
-      max-width: 100%;
-      height: auto;
+  article {
+    h1,
+    .h1,
+    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-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;
     }
 
-
-    article {
-
-      h1, .h1, h2, .h2, h3, .h3, h4, p {
-      font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
-        /* text-indent: unset !important; */
-      margin: 15px;
-        /* margin-top: 0.5rem; */
-        /* margin-bottom: unset; */
+    h1 {
+      display: block;
+      font-size: 2em;
+      margin-block-start: 0.67em;
+      margin-block-end: 0.67em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      font-weight: bold;
+      unicode-bidi: isolate;
     }
 
-      h1 {
-        display: block;
-        font-size: 2em;
-        margin-block-start: 0.67em;
-        margin-block-end: 0.67em;
-        margin-inline-start: 0px;
-        margin-inline-end: 0px;
-        font-weight: bold;
-        unicode-bidi: isolate;
-      }
-
-      h2 {
-        display: block;
-        font-size: 1.5em;
-        margin-block-start: 0.83em;
-        margin-block-end: 0.83em;
-        margin-inline-start: 0px;
-        margin-inline-end: 0px;
-        font-weight: bold;
-        unicode-bidi: isolate;
-      }
-
-      h3 {
-        display: block;
-        font-size: 1.17em;
-        margin-block-start: 1em;
-        margin-block-end: 1em;
-        margin-inline-start: 0px;
-        margin-inline-end: 0px;
-        font-weight: bold;
-        unicode-bidi: isolate;
-      }
-      h4 {
-        display: block;
-        margin-block-start: 1.33em;
-        margin-block-end: 1.33em;
-        margin-inline-start: 0px;
-        margin-inline-end: 0px;
-        font-weight: bold;
-        unicode-bidi: isolate;
-      }
-      h5 {
-        display: block;
-        font-size: 0.83em;
-        margin-block-start: 1.67em;
-        margin-block-end: 1.67em;
-        margin-inline-start: 0px;
-        margin-inline-end: 0px;
-        font-weight: bold;
-        unicode-bidi: isolate;
-      }
-
-      p {
-        display: block;
-        margin-block-start: 1em;
-        margin-block-end: 1em;
-        margin-inline-start: 0px;
-        margin-inline-end: 0px;
-        unicode-bidi: isolate;
-      }
+    h2 {
+      display: block;
+      font-size: 1.5em;
+      margin-block-start: 0.83em;
+      margin-block-end: 0.83em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      font-weight: bold;
+      unicode-bidi: isolate;
     }
 
-    article h1, .h1, h2, .h2, h3, .h3, h4{
-      font-weight: 700;
+    h3 {
+      display: block;
+      font-size: 1.17em;
+      margin-block-start: 1em;
+      margin-block-end: 1em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      font-weight: bold;
+      unicode-bidi: isolate;
+    }
+    h4 {
+      display: block;
+      margin-block-start: 1.33em;
+      margin-block-end: 1.33em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      font-weight: bold;
+      unicode-bidi: isolate;
+    }
+    h5 {
+      display: block;
+      font-size: 0.83em;
+      margin-block-start: 1.67em;
+      margin-block-end: 1.67em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      font-weight: bold;
+      unicode-bidi: isolate;
     }
 
-  </style>
+    p {
+      display: block;
+      margin-block-start: 1em;
+      margin-block-end: 1em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      unicode-bidi: isolate;
+    }
+
+  }
+
+  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;
+    grid-template-columns: 4fr 1.5fr;
+    gap: 1rem;
+  }
+
+  @media (max-width: 1024px) {
     .news-main {
-      display: grid;
-      flex-direction: row;
-      grid-template-columns: 4fr 1.5fr;
-      gap: 1rem;
-    }
-
-    @media (max-width: 1024px) {
-        .news-main {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-
-    .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
-    }
+  .top-icon {
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    border-bottom: 1px solid #e0e0e0;
+  }
 
-    .news-date {
-        font-weight: 700;
-        font-size: 14px;
-        color: #d0021b;
-        line-height: 17px;
-        margin-bottom: 30px;
-        display: inline-block
-    }
+  .news-date {
+    font-weight: 700;
+    font-size: 14px;
+    color: #d0021b;
+    line-height: 17px;
+    margin-bottom: 30px;
+    display: inline-block;
+  }
 
-    .news-meta {
-      border-bottom: 1px solid var(--text-primary);
-      color: black;
-      padding-bottom: 1rem;
-      margin-bottom: 1rem;
-    }
+  .news-meta {
+    border-bottom: 1px solid var(--text-primary);
+    color: black;
+    padding-bottom: 1rem;
+    margin-bottom: 1rem;
+  }
 
-    .title {
-      font-size: 2rem;
-      text-align: left;
-      font-weight: 700;
-      color: var(--text-primary);
-      margin-bottom: 1.5rem;
-      line-height: 1.4;
-    }
+  .title {
+    font-size: 1.5rem;
+    text-align: left;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 0.8rem;
+    margin-top: 0.8rem;
+    /* line-height: 1.4; */
+  }
 
-    .news-meta {
-      display: flex;
-      justify-content: center;
-      gap: 2rem;
-      margin-bottom: 1.5rem;
-    }
+  .news-meta {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    margin-bottom: 1.5rem;
+  }
 
-    .news-meta span{
-      color: var(--text-primary);
-    }
+  .news-meta span {
+    color: var(--text-primary);
+  }
 
-    .news-author a {
-      color: black;
-      text-decoration: none;
-    }
-/* 
+  .news-author a {
+    color: black;
+    text-decoration: none;
+  }
+  /* 
     .news-date::before {
       content: '📅';
     }
@@ -257,155 +329,155 @@ if (!data || code !== 0) {
       content: '👤';
     } */
 
-    .news-tags {
-      display: flex;
-      justify-content: center;
-      gap: 1rem;
-      flex-wrap: wrap;
-    }
+  .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 {
+    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-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;
-      /* gap: 2.5rem; */
-      position: relative;
+  .news-container {
+    max-width: 1200px;
+    padding: 1.5rem;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border: 1px solid #eee;
+  }
 
-      display: flex;
-      justify-content: center;
-    }
+  .news-detail-content {
+    border-right: 1px solid var(--text-primary);
+    /* padding: 3rem; */
+    position: relative;
+    overflow: hidden;
+  }
 
-    .news-detail-content {
-      border-right: 1px solid var(--text-primary);
-      /* padding: 3rem; */
-      position: relative;
-      overflow: hidden;
-    }
+  .news-content {
+    padding-top: 3rem;
+    font-size: 1.1rem;
+    line-height: 1.3;
+  }
 
-    .news-content {
-      padding-top: 3rem;
-      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 {
-      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 {
-      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-images img:hover {
-      transform: scale(1.02);
-    }
+  .news-content p {
+    margin-bottom: 1.8rem;
+  }
 
-    .news-content p {
-      margin-bottom: 1.8rem;
-    }
+  .news-content p:last-child {
+    margin-bottom: 0;
+  }
 
-    .news-content p:last-child {
-      margin-bottom: 0;
-    }
+  .news-navigation {
+    margin-top: 1rem;
+    border-top: 1px solid var(--divider-color);
+  }
 
-    .news-navigation {
-      margin-top: 1rem;
-      border-top: 1px solid var(--divider-color);
-    }
+  .news-sidebar {
+    padding: 1.5rem;
+    /* position: sticky; */
+    top: 2rem;
+    height: fit-content;
+    background-color: #ffffff;
+  }
 
-    .news-sidebar {
-      padding: 0 1.5rem 3rem;
-      /* position: sticky; */
-      top: 2rem;
-      height: fit-content;
-      background-color: #ffffff;
-    }
+  .related-news ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
 
-    .related-news ul {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-    }
-
-    .related-news li {
-      /* margin-bottom: 1.2rem;
+  .related-news li {
+    /* margin-bottom: 1.2rem;
       padding-bottom: 1.2rem; */
-      border-bottom: 1px solid var(--divider-color);
+    border-bottom: 1px solid var(--divider-color);
+  }
+
+  .related-news li:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+
+  .related-news a {
+    color: #000000;
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    padding: 0.2rem;
+    border-radius: var(--radius-md);
+  }
+
+  .related-news a:hover {
+    transform: translateX(5px);
+  }
+
+  .related-title {
+    font-size: 0.9rem;
+    line-height: 1.5;
+  }
+
+  .related-date {
+    font-size: 0.9rem;
+    color: var(--text-tertiary);
+  }
+
+  @media (max-width: 1024px) {
+    .news-sidebar {
+      position: static;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .news-detail-content {
+      border: none;
     }
 
-    .related-news li:last-child {
-      margin-bottom: 0;
-      padding-bottom: 0;
-      border-bottom: none;
+    .news-share {
+      flex-wrap: wrap;
+      gap: 0.8rem;
     }
 
-    .related-news a {
-      color: #000000;
-      display: flex;
-      flex-direction: column;
-      text-decoration: none;
-      transition: all 0.3s ease;
-      padding: 0.2rem;
-      border-radius: var(--radius-md);
+    .share-btn {
+      width: 100%;
+      text-align: center;
     }
-
-    .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-sidebar {
-        position: static;
-      }
-    }
-
-    @media (max-width: 480px) {
-
-      .news-detail-content {
-        border: none;
-      }
-
-      .news-share {
-        flex-wrap: wrap;
-        gap: 0.8rem;
-      }
-
-      .share-btn {
-        width: 100%;
-        text-align: center;
-      }
-    }
-  </style>
\ No newline at end of file
+  }
+</style>
diff --git a/src/pages/news/tech/[...page].astro b/src/pages/news/tech/[...page].astro
new file mode 100644
index 0000000..b27410f
--- /dev/null
+++ b/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}>
\ No newline at end of file
diff --git a/utils/rpc.ts b/utils/rpc.ts
index 5d8aa5e..d1f3c81 100644
--- a/utils/rpc.ts
+++ b/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