Update PostLayout.astro

src/layouts/PostLayout.astro

@@ -13,9 +13,7 @@ type Props = {
 };
 
 const { site } = config;
-
-const { title, description, ogImage, canonicalURL, pubDatetime, modDatetime } =
-  Astro.props;
+const { title, description, ogImage, canonicalURL, pubDatetime, modDatetime } = Astro.props;
 
 const structuredData = {
   "@context": "https://schema.org",
@@ -24,49 +22,42 @@ const structuredData = {
   image: ogImage,
   ...(pubDatetime && { datePublished: pubDatetime.toISOString() }),
   ...(modDatetime && { dateModified: modDatetime.toISOString() }),
-  author: [
-    {
-      "@type": "Person",
-      name: site.author,
-      ...(site.profile && { url: site.profile }),
-    },
-  ],
+  author: [{ "@type": "Person", name: site.author, ...(site.profile && { url: site.profile }) }],
 };
 ---
 
 <Layout {title} {description} {ogImage} {canonicalURL}>
   <Fragment slot="head">
     <meta property="og:type" content="article" />
-    {
-      pubDatetime && (
-        <meta
-          property="article:published_time"
-          content={pubDatetime.toISOString()}
-        />
-      )
-    }
-    {
-      modDatetime && (
-        <meta
-          property="article:modified_time"
-          content={modDatetime.toISOString()}
-        />
-      )
-    }
-    <script
-      type="application/ld+json"
-      is:inline
-      set:html={JSON.stringify(structuredData)}
-    />
+    {pubDatetime && <meta property="article:published_time" content={pubDatetime.toISOString()} />}
+    {modDatetime && <meta property="article:modified_time" content={modDatetime.toISOString()} />}
+    <script type="application/ld+json" is:inline set:html={JSON.stringify(structuredData)} />
   </Fragment>
 
-  <!-- 文章内容（保持原有结构） -->
+  <!-- 文章主体 -->
   <article class="prose prose-lg max-w-3xl mx-auto px-4">
     <slot />
   </article>
 
-  <!-- 👇 评论区域：应用与文章相同的宽度和居中样式 -->
-  <div class="max-w-3xl mx-auto px-4 mt-8 w-full">
+  <!-- 评论区域：宽度对齐、居中、清除浮动 -->
+  <div class="comment-wrapper max-w-3xl mx-auto px-4 mt-8 w-full" style="clear: both;">
     <Comment />
   </div>
 </Layout>
+
+<!-- 全局样式修复黑线问题（仅针对评论区域） -->
+<style is:global>
+  .comment-wrapper a,
+  .comment-wrapper button,
+  .comment-wrapper .tk-submit {
+    text-decoration: none !important;
+    border-bottom: none !important;
+    box-shadow: none !important; /* 有时黑线是 box-shadow 造成的 */
+  }
+  /* 如果评论框内部输入框出现黑线 */
+  .comment-wrapper input,
+  .comment-wrapper textarea {
+    border: 1px solid #ccc; /* 保持边框但去掉下划线风格 */
+    border-bottom: 1px solid #ccc !important; /* 保证底部不是黑色 */
+  }
+</style>