QP
Quan Pham

Business Blog Component - Copy this Angular, Css Component to your project

Build a blog for a business website with a list of articles page, with pagination, article search, search by categoryslug, SEO friendly url, this is the data returned in json format from the server: { "message": "Get user posts successfully", "status": "OK", "data": { "posts": [ { "id": 50, "title": "Kích thước ảnh sản phẩm chuẩn trên website bao nhiêu là hợp lý?", "content": "<p>.</p>", "slug": "kich thuoc anh san pham chuan tren website bao nhieu la hop ly", "excerpt": "Vì sao cần sử dụng kích thước ảnh chuẩn cho websiteHỗ trợ SEO websiteCó thể thấy, hiện nay hầu hết các website đều áp dụng các chiến thuật SEO để giúp gia tăng thứ hạng, tăng lượng truy cập và tiếp cậ...", "totalPages": 13, "category": { "id": 2, "name": "NEXTJS", "code": "nextjs", "description": "NextJs", "postCount": 0 }, "status": "PUBLISHED", "email": "quan@poongin.co.kr", "meta": { "viewport": "width=device width, initial scale=1.0", "robots": "index, follow", "slug": "http://localhost:9090/kich thuoc anh san pham chuan tren website bao nhieu la hop ly", "created_at": "2024 10 13T14:45:21", "updated_at": "2024 10 15T21:04:17", "meta_title": "Kích thước ảnh sản phẩm chuẩn trên website bao nhiêu là hợp lý?", "meta_description": "Vì sao cần sử dụng kích thước ảnh chuẩn cho websiteHỗ trợ SEO websiteCó thể thấy, hiện nay hầu hết các website đều áp dụng các chiến thuật SEO để giúp gia tăng thứ hạng, tăng lượng truy cập và tiếp cậ...", "og_title": "Kích thước ảnh sản phẩm chuẩn trên website bao nhiêu là hợp lý?", "og_description": "Vì sao cần sử dụng kích thước ảnh chuẩn cho websiteHỗ trợ SEO websiteCó thể thấy, hiện nay hầu hết các website đều áp dụng các chiến thuật SEO để giúp gia tăng thứ hạng, tăng lượng truy cập và tiếp cậ...", "og_image": "https://res.cloudinary.com/damphlbsi/image/upload/v1728747929/blogapp/posts/bd5aiwpdb2gichh7lccr.jpg" }, "priority": 0, "tags": [ { "id": 1, "name": "Công nghệ", "slug": "slug 1" }, { "id": 9, "name": "giải trí", "slug": "giai tri" }, { "id": 10, "name": "tuyển dụng", "slug": "tuyen dung" } ], "created_at": "2024 10 13T14:45:20", "updated_at": "2024 10 30T22:37:49", "thumbnail_url": "https://res.cloudinary.com/damphlbsi/image/upload/v1728747929/blogapp/posts/bd5aiwpdb2gichh7lccr.jpg", "public_id": "blogapp/posts/bd5aiwpdb2gichh7lccr", "author_name": "Quan Pham", "profile_image": "https://res.cloudinary.com/damphlbsi/image/upload/v1728806654/blogapp/user_profile/mt4abcqvm8yn2a5rybcf.jpg", "ratings_count": 0, "comment_count": 5, "view_count": 388, "visibility": "PUBLIC", "revision_count": 7 }, { "id": 49, "title": "Copilot github là gì? Lý do nên sử dụng công cụ hỗ trợ lập trình này của GitHub", "content": "<h2>Copilot l&agrave; g&igrave;? L&yacute; do sử dụng?</h2>\n<h2><br>Copilot l&agrave; g&igrave;?</h2>\n<p><br>GitHub Copilot l&agrave; một c&ocirc;ng cụ ph&aacute;t triển độc đ&aacute;o được hợp t&aacute;c giữa GitHub v&agrave; OpenAI. ...", "totalPages": 13, "category": { "id": 3, "name": "REACTJS", "code": "reactjs", "description": null, "postCount": 0 }, "status": "PUBLISHED", "email": "quan@poongin.co.kr", "meta": { "viewport": "width=device width, initial scale=1.0", "robots": "index, follow", "slug": "http://localhost:9090/copilot github la gi ly do nen su dung cong cu ho tro lap trinh nay cua github", "created_at": "2024 10 11T23:32:03", "updated_at": "2024 10 12T15:33:25", "meta_title": "Copilot github là gì? Lý do nên sử dụng công cụ hỗ trợ lập trình này của GitHub", "meta_description": "<h2>Copilot l&agrave; g&igrave;? L&yacute; do sử dụng?</h2>\n<h2><br>Copilot l&agrave; g&igrave;?</h2>\n<p><br>GitHub Copilot l&agrave; một c&ocirc;ng cụ ph&aacut...", "og_title": "Copilot github là gì? Lý do nên sử dụng công cụ hỗ trợ lập trình này của GitHub", "og_description": "<h2>Copilot l&agrave; g&igrave;? L&yacute; do sử dụng?</h2>\n<h2><br>Copilot l&agrave; g&igrave;?</h2>\n<p><br>GitHub Copilot l&agrave; một c&ocirc;ng cụ ph&aacute;t triển độc đ&aacute;o được hợp t&aacu...", "og_image": "https://res.cloudinary.com/damphlbsi/image/upload/v1728569614/blogapp/posts/xezdj9jba44lzo8xrzt2.png" }, "priority": 0, "tags": [ { "id": 1, "name": "Công nghệ", "slug": "slug 1" } ], "created_at": "2024 10 11T23:32:02", "updated_at": "2024 10 29T13:02:28", "thumbnail_url": "https://res.cloudinary.com/damphlbsi/image/upload/v1728569614/blogapp/posts/xezdj9jba44lzo8xrzt2.png", "public_id": "public_id_49", "author_name": "Quan Pham", "profile_image": "https://res.cloudinary.com/damphlbsi/image/upload/v1728806654/blogapp/user_profile/mt4abcqvm8yn2a5rybcf.jpg", "ratings_count": 0, "comment_count": 2, "view_count": 134, "visibility": "PUBLIC", "revision_count": 4 } ], "totalPages": 13, "status": "OK" } }

Prompt
Component Preview

About

Business Blog Component - Create a business blog with article lists, pagination, category search, SEO-friendly URLs, built with Angula. Get code instantly!

Share

Last updated 1 month ago