Techlo Theme Documentation

Customizing Layouts

Techlo is built from reusable sections. Most pages are assembled by importing section components in src/pages/[...lang]/... files, while each section reads its default content from src/content/sections/<language>/.

• Layout files: src/layouts/components/sections/
• Content files (Markdown): src/content/sections/<language>/

For example, if you want to change the “About” section on the homepage, there are two layers involved:

1. The page layout that includes the section
2. The section content Markdown file

Customizing the Section Markdown File

Step 1: Locate the page layout file

The main homepage file is:

• src/pages/[...lang]/index.astro

Techlo also includes other page entry files such as:

• src/pages/[...lang]/home-two.astro
• src/pages/[...lang]/home-three.astro
• src/pages/[...lang]/about.astro
• src/pages/[...lang]/contact.astro

Step 2: Find the section in the layout file

Open the page file and look for the section imports and render calls:

src/pages/[...lang]/index.astro

---
import Base from "@/layouts/Base.astro";
import Banner from "@/components/sections/Banner.astro";
import Features from "@/components/sections/Features.astro";
import ServicesSection from "@/components/sections/ServicesSection.astro";
import ProjectsSection from "@/components/sections/ProjectsSection.astro";
import TeamSection from "@/components/sections/TeamSection.astro";
import BlogSection from "@/components/sections/BlogSection.astro";
---

<Base {...homepageContent?.data} headerLayout="one" hasFooterDarkBackground={true}>
  <Banner />
  <Features />
  <ServicesSection />
  <ProjectsSection content={{ options: { layout: "masonry", limit: 7 } }} />
  <TeamSection />
  <BlogSection />
</Base>

From this, you can see which component controls each homepage block. Many sections also accept props such as content, hasSectionBackground, hasLightBackground, and hasDarkAppearance to tune their appearance per page.

Step 3: Modify the Markdown file

Next, open the related section content file, for example:

• src/content/sections/english/about-section.md

Example frontmatter:

---
enable: true # Boolean: true | false
imagePosition: "left" # Enum: left | right

images:
  large: "/images/about-us/about-1-a.jpg"
  small: "/images/about-us/about-1-b.jpg"

title: |
  More than 25+ years we provide IT solutions
description: |
  We help organizations modernize technology with clear planning, focused delivery, and maintainable systems.

# EXTRATYPE OPTIONS: "skills" | "list-x" | "list-y" | "stats" | "none"
extraType: "none"

buttons:
  - enable: true
    label: "More About Us"
    url: "/about"
    variant: "fill"
    hoverEffect: "magnetic-text-flip"
---

To hide the entire section, set enable: false. To change the copy or artwork, update the frontmatter fields.

Customizing the Section Layout File

For deeper structural changes, edit the section component itself:

1. Open src/layouts/components/sections/AboutOne.astro (or the matching section component)
2. Adjust the Astro markup, logic, or styling

Techlo sections typically follow this pattern:

• fetch default content with getEntryCTM("sections", "...", Astro.currentLocale)
• merge optional content overrides passed in from the page
• bail out early when enable is false

That means content-level changes are safe for most users, while layout changes are the right path for more advanced design edits.

Page-Level Content Overrides

Page entries can override a section’s default content without touching the section file. For example, the homepage entry can override the Services section title:

src/content/homepage/english/-index.md

servicesSection:
  enable: true
  title: "What We Can Do for Our Clients"

The page passes that object into the section component, which merges it over the section’s own Markdown defaults.