Complete website updates
Changes: 1. Removed Chatbot as separate service (integrated in AI Automation) 2. Added official social media icons (Facebook, Twitter, LinkedIn logos) 3. Added submenu in navigation for all services 4. Updated footer to match services (5 services) 5. Reordered services: Website, App, AI Transform, Marketing, AI Automation 6. All menu items link to specific pages (not landing page) 7. Redesigned process section (grid cards instead of connected line) 8. Added blog with Astro Content Collections (4 posts as .md files) 9. Created blog listing and individual post pages 10. All services have dedicated pages with original content Services (5 total): 1. พัฒนาเว็บไซต์ 2. พัฒนาแอปพลิเคชัน 3. ที่ปรึกษาองค์กร AI 4. ที่ปรึกษาการตลาดออนไลน์ 5. AI Automation Blog: - 4 posts migrated from original site - Astro Content Collections setup - /blog listing page - Dynamic /blog/[slug] pages
This commit is contained in:
41
src/pages/blog/[slug].astro
Normal file
41
src/pages/blog/[slug].astro
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.id },
|
||||
props: { post },
|
||||
}));
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title={post.data.title + ' | MoreminiMore'} description={post.data.description}>
|
||||
<article class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<div class="mb-12">
|
||||
<div class="flex flex-wrap gap-2 mb-6">
|
||||
{post.data.tags.map((tag) => (
|
||||
<span class="text-sm bg-accent-blue text-white px-3 py-1 rounded-full">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-secondary">{post.data.title}</h1>
|
||||
<div class="flex items-center gap-6 text-gray-600">
|
||||
<span class="flex items-center gap-2">✍️ {post.data.author}</span>
|
||||
<span class="flex items-center gap-2">📅 {post.data.pubDate.toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prose prose-lg max-w-none prose-headings:text-secondary prose-a:text-accent-blue prose-img:rounded-lg">
|
||||
<post:Content />
|
||||
</div>
|
||||
|
||||
<div class="mt-12 pt-8 border-t border-gray-200">
|
||||
<a href="/blog" class="text-accent-blue font-medium hover:underline flex items-center gap-2">← กลับไปหน้าบล็อก</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</Layout>
|
||||
43
src/pages/blog/index.astro
Normal file
43
src/pages/blog/index.astro
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const posts = await getCollection('blog');
|
||||
posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
|
||||
---
|
||||
|
||||
<Layout title="เรื่องน่ารู้ SEO & AI | MoreminiMore">
|
||||
<section class="py-20 bg-gradient-hero">
|
||||
<div class="container mx-auto px-4">
|
||||
<h1 class="text-5xl md:text-6xl font-bold text-center mb-6 text-secondary">เรื่องน่ารู้</h1>
|
||||
<p class="text-xl text-center text-gray-600 max-w-3xl mx-auto">บทความเกี่ยวกับ SEO, AI และดิจิตอลมาร์เก็ตติ้ง</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto">
|
||||
{posts.map((post) => (
|
||||
<article class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
|
||||
<div class="p-6">
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
{post.data.tags.map((tag) => (
|
||||
<span class="text-xs bg-accent-blue text-white px-3 py-1 rounded-full">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
<h2 class="text-xl font-bold mb-3 hover:text-accent-blue transition">
|
||||
<a href={`/blog/${post.id}/`} class="hover:underline">{post.data.title}</a>
|
||||
</h2>
|
||||
<p class="text-gray-600 mb-4 line-clamp-3">{post.data.description}</p>
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<span>{post.data.author}</span>
|
||||
<span>{post.data.pubDate.toLocaleDateString('th-TH')}</span>
|
||||
</div>
|
||||
<a href={`/blog/${post.id}/`} class="text-accent-blue font-medium hover:underline flex items-center gap-2 mt-4">อ่านเพิ่มเติม →</a>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user