Article
Content
You can update article content and design UI by editing .json and .md files. No component code required.
This guide walks you through every part of the template — from the homepage and about page to services and contact — so you know exactly which file to edit for each change.
Home Page
Your homepage is powered by src/data/home.json. Every section — hero, why choose us, gallery, services — comes from this one file.
Just change the JSON values to match your project. No code changes required.
Complete JSON Structure
{ "url": "insert your website url domain here", "title": "insert title in here", "description": "Your website description", "favicon": "url image for your favicon", "image": "url image for image banner", "navbar": "Navbar title in here", "nav_list": [ { "nav": "Home", "link": "/" } ], "social": [ { "title": "Facebook", "link": "https://www.facebook.com" }, { "title": "Your social media name", "link": "social media url in here" }, { "title": "Instagram", "link": "your instagram url in here" } ], "contact": { "address": "insert your address in here", "city": "insert city here", "country": "Insert country in here", "phone": "insert your phone number here", "email": "insert your email here" }}Add a New Navbar Menu
To add a new menu item, copy this block and paste it inside nav_list:
{ "nav": "New nav", "link": "Link url new nav in here"}Add a New Social Link
To add a new social media link, copy this block and paste it inside social:
{ "title": "Your Social Name", "link": "your social url in here"}Complete Implementation Example
{ "title": "Creative Photo ART", "description": "Berkarya lah dengan kegilaan yang mahal, bukan berkarya dengan kemahalan yang gila", "slogan": "The ART of Photography", "gallery_btn": "View Gallery", "gallery_link": "/gallery", "about_btn": "About Us", "about_link": "/about", "image": "https://1.bp.blogspot.com/-PpuwVeFeO0w/YLfCIUCkOSI/AAAAAAAAOs0/kxHFwqGPj-MVztEP6vgWV8Z0fS_gPYbeACLcBGAsYHQ/s2048/18953314_10209551377442243_3396338501492840522_o.jpg", "why": "Why Chose Us", "why_text": "The reason why you choose our photography art service is because we have the best experience and artistic touch for you.", "why_list": [ { "icon": "/img/icon/gear.svg", "title": "Gear", "content": "We use the lastest gear for photography, SONY ILCE 9 III, Nikon D5." }, { "icon": "/img/icon/lens.svg", "title": "Lens", "content": "We have lenses with complete focal lengths, wide, telephoto and medium." }, { "icon": "/img/icon/studio.svg", "title": "Studio", "content": "We have a photo studio with complete themes to support photography your needs." }, { "icon": "/img/icon/art.svg", "title": "Art", "content": "Of course, with a high artistic touch for each of your photos." } ], "gallery_title": "The Beauty of ART", "gallery_description": "An outdoor photo concept with a beautiful view, for aesthetic beauty and beautiful photo moments.", "gallery_list": [ { "image": "https://1.bp.blogspot.com/-HduEH49KLpo/YLfCBS99yEI/AAAAAAAAOr4/8qv3ZXMjs1kR7Muh6axQmOLGbwnZ17QjwCLcBGAsYHQ/s2048/17505084_10208927489445433_8299680891748473903_o.jpg", "alt": "beauty photography art" }, { "image": "https://1.bp.blogspot.com/-Se8TMKgBcp8/YLfCKckrnBI/AAAAAAAAOtM/l55_l61sG0I0mUBfdJdlWlk5WyFjvjQnQCLcBGAsYHQ/s2048/26232735_10211155035692697_8588651837254134095_o.jpg", "alt": "photographer modern" }, { "image": "https://1.bp.blogspot.com/-zz6ZBWey6cE/YLfB2SEvuHI/AAAAAAAAOqE/wn4VDZT7zw8_2R_uAwRz9xlURjMkaTRlQCLcBGAsYHQ/s960/13346591_10206574468541381_4843643184755347251_n.jpg", "alt": "photography art" }, { "image": "https://1.bp.blogspot.com/-S8ByDwT2se0/YLfCFJqp_6I/AAAAAAAAOsY/AvmVtpgmRNgWiasy5Rk-MBisUmyR5oZWgCLcBGAsYHQ/s2048/18156377_10209203921276056_3087814225938880391_o.jpg", "alt": "beauty photo art" }, { "image": "https://1.bp.blogspot.com/-0fpNAc6cuI4/YLfB2UpxA-I/AAAAAAAAOqA/7q_e3fmDkYMDqqoCkpAW1zMuLUQnJdxNQCLcBGAsYHQ/s960/13335750_10206583711532450_4308826111850619021_n.jpg", "alt": "conceptual photography" }, { "image": "https://1.bp.blogspot.com/-aRtJXcIBkAc/YLfB6oLVXGI/AAAAAAAAOqw/3dXRB6s7aiA8COKeEEYh8qrgFaXNcxoywCLcBGAsYHQ/s960/13882189_10207026366718553_2408832815959962227_n.jpg", "alt": "fashion photography" }, { "image": "https://1.bp.blogspot.com/-EQbRyqkjr8s/YLb6BY3_REI/AAAAAAAAOV0/nPVB8zO__28Z5ad-5togoAifg9UA5MAhgCLcBGAsYHQ/s960/13083155_10206338047871012_5155540471143450680_n.jpg", "alt": "outdoor photography" }, { "image": "https://1.bp.blogspot.com/-1ReGcUqFbe8/YLfB0QKTx_I/AAAAAAAAOpo/XXgv413_qiEKT7rTM6Y0xLI_PGOtzlF6gCLcBGAsYHQ/s960/13237833_10206495993579556_2798868216571640906_n.jpg", "alt": "portfolio photography website" }, { "image": "https://1.bp.blogspot.com/-z5sMqabAino/YLfCMPcvczI/AAAAAAAAOtg/b6EIzHwv4RYwzwjpwj8m55EFh3OSkKDZQCLcBGAsYHQ/s2048/45741466_10213312752834277_1552007129856999424_n.jpg", "alt": "complete portfolio website photography gallery" } ], "services": "Our Services", "services_list": [ { "title": "Wedding Photography", "text": "Capture the beautiful moments of your wedding with our wedding photography service.", "link": "/services/wedding" }, { "title": "Beauty Retouch", "text": "For product and makeup portfolio needs, retouch is the right choice.", "link": "/services/retouch" }, { "title": "Fashion Photography", "text": "Create the perfect Colors for your fashion photography with us.", "link": "/services/fashion" }, { "title": "Conceptual Art", "text": "Create photos that have high artistic value with photo art concepts", "link": "/services/conceptual" } ], "services_image": "https://1.bp.blogspot.com/-7C0R9BtHc5Y/YLfJLIH29HI/AAAAAAAAOvA/He34dVQkRBYpb5MQr5vlCNRQRTu4_qg0QCLcBGAsYHQ/s2048/15304566_10207948653855155_9091427513408646431_o.jpg"}Header Area
The header is the first thing visitors see — it contains the title, slogan, and main CTAs.
JSON code:
"title": "Creative Photo ART","description": "Berkarya lah dengan kegilaan yang mahal, bukan berkarya dengan kemahalan yang gila","slogan": "The ART of Photography","gallery_btn": "View Gallery","gallery_link": "/gallery","about_btn": "About Us","about_link": "/about","image": "https://1.bp.blogspot.com/-PpuwVeFeO0w/YLfCIUCkOSI/AAAAAAAAOs0/kxHFwqGPj-MVztEP6vgWV8Z0fS_gPYbeACLcBGAsYHQ/s2048/18953314_10209551377442243_3396338501492840522_o.jpg"Why Area
The “Why Choose Us” section highlights your main selling points.
"why": "Why Chose Us","why_text": "The reason why you choose our photography art service is because we have the best experience and artistic touch for you.","why_list": [ { "icon": "/img/icon/gear.svg", "title": "Gear", "content": "We use the lastest gear for photography, SONY ILCE 9 III, Nikon D5." }, { "icon": "/img/icon/lens.svg", "title": "Lens", "content": "We have lenses with complete focal lengths, wide, telephoto and medium." }, { "icon": "/img/icon/studio.svg", "title": "Studio", "content": "We have a photo studio with complete themes to support photography your needs." }, { "icon": "/img/icon/art.svg", "title": "Art", "content": "Of course, with a high artistic touch for each of your photos." }]Gallery Area
Your main visual showcase — a grid of images.
"gallery_title": "The Beauty of ART","gallery_description": "An outdoor photo concept with a beautiful view, for aesthetic beauty and beautiful photo moments.","gallery_list": [ { "image": "https://1.bp.blogspot.com/-HduEH49KLpo/YLfCBS99yEI/AAAAAAAAOr4/8qv3ZXMjs1kR7Muh6axQmOLGbwnZ17QjwCLcBGAsYHQ/s2048/17505084_10208927489445433_8299680891748473903_o.jpg", "alt": "beauty photography art" }, { "image": "https://1.bp.blogspot.com/-Se8TMKgBcp8/YLfCKckrnBI/AAAAAAAAOtM/l55_l61sG0I0mUBfdJdlWlk5WyFjvjQnQCLcBGAsYHQ/s2048/26232735_10211155035692697_8588651837254134095_o.jpg", "alt": "photographer modern" }]Section Area
The services list on the homepage.
"services": "Our Services","services_list": [ { "title": "Wedding Photography", "text": "Capture the beautiful moments of your wedding with our wedding photography service.", "link": "/services/wedding" }, { "title": "Beauty Retouch", "text": "For product and makeup portfolio needs, retouch is the right choice.", "link": "/services/retouch" }, { "title": "Fashion Photography", "text": "Create the perfect Colors for your fashion photography with us.", "link": "/services/fashion" }, { "title": "Conceptual Art", "text": "Create photos that have high artistic value with photo art concepts", "link": "/services/conceptual" }],"services_image": "https://1.bp.blogspot.com/-7C0R9BtHc5Y/YLfJLIH29HI/AAAAAAAAOvA/He34dVQkRBYpb5MQr5vlCNRQRTu4_qg0QCLcBGAsYHQ/s2048/15304566_10207948653855155_9091427513408646431_o.jpg"About Page
Your about page is a separate Markdown file at src/pages/about/index.md.
Open it with your code editor and update the frontmatter and content.
Output:
Frontmatter format:
---layout: ../../design/about.astrotitle: "Title about page"description: "About page description here"image: "image url for about page"intro: "Intro about page"pubDate: "insert publish date here"---
Now you can write article with markdown format here...Full implementation example:
---layout: ../../design/about.astrotitle: "About Creative Conceptual Art"description: "Cretive conceptual art photography about."image: "https://1.bp.blogspot.com/-yUfHAzf3CNY/YLduhgcV2AI/AAAAAAAAKII/kRz4E_tTlrMQCLg3QowOJ0q-vMYXUXONgCLcBGAsYHQ/s16000/11896437_10204825580860282_6076729124706789877_o.jpg"intro: "What creative conceptual art photography do"pubDate: "2023-12-04"---
We have a team of photographers to help and touch your imagination for photo art.
For wedding photography / birthday moments - with natural or conceptual photo art.
For Personal or Model Photos in the studio or outdoor.
We have lots of ideas to help you get your touch on artistic photography.
If you need photography services, contact us immediately.Services Page
Your services pages are in src/pages/services/. Each service gets its own Markdown file.
To create a new service, copy an existing service file, rename it to match your service URL, and update the content.
Output:
Frontmatter format:
---layout: ../../design/services/servicesPage.astrotitle: "Title your services"description: "Description for your services"intro: "Intro about your services"image: "URL image cover for services article"pubDate: "publish date here"tags: ["your tag in here", "tag1", "tag2"]---
Now you can write article with markdown in here...Full implementation example:
---layout: ../../design/services/servicesPage.astrotitle: "Conceptual Art"description: "Caputre your moment and create photo concept with Conceptual art photography services"intro: "Conceptual ART photography"image: "https://1.bp.blogspot.com/-m35-InVTVA4/YLfSC8zR6RI/AAAAAAAAOyc/DQcBknqi28APaOOuhzBzsVLGPuxCmXyPACLcBGAsYHQ/s2048/36870944_10212502263492550_7984323407032352768_n.jpg"pubDate: "2022-11-28"tags: ["conceptual art photography", "conceptual", "photo art", "concept photo"]---
If you need photography services with conceptual art, then we are the right answer for you.
With the best experience, perfect results for a work of art photo for you.You can use our conceputal art photo services for your various needs. For wedding photos, birthdays, and for your portfolio.After creating service pages, your services will automatically appear on the services list page.
Output:
Contact Page
Your contact page lives at src/pages/contact/index.md.
Open it with your code editor and update the content.
Output:
Frontmatter format:
---layout: ../../design/contact.astrotitle: "Title for Contact page"description: "Description about your Contact"image: "URL image cover for contact page"pubDate: "input publish date"---
Write your contact article in here...Full implementation example:
---layout: ../../design/contact.astrotitle: "Contact Us"description: "Contact Conceptual Art Photography"image: "https://1.bp.blogspot.com/-ZLAvC62pMXE/YLZ0ePyxx2I/AAAAAAAAOVc/RN-CYlBx39c63m8V_oEQKhTjf_IzvMN9QCLcBGAsYHQ/s2048/49716230_10213671167914430_3007686978012446720_n.jpg"pubDate: "2023-12-04"---
If you need consultation and have a photography art project, then discuss with us about the best photo art needs for you.Contact Form Integration
The contact form is connected to your email through the contact section in src/data/config.json. Update the email field with your address.
After updating, confirm your mail server on your email provider side so messages can be delivered.