Footer

Footer

Files: src/config/config.toml, src/content/sections/<language>/footer.md, src/config/menu.<language>.json, src/config/social.json, src/i18n/<language>.json · Skill level: Beginner

The footer closes every page with a heading, your contact details, your links, the copyright, the language links, a row of Ask AI links, and the theme credit. Margo has three footer layouts. All three read the same copy file, footer.md, so you write the footer once.

Above the footer, most inner pages also show a call to action (the section call-to-action.md). It is a section, not part of the footer: see Sections and Contact & Booking.

Choose A Footer Layout

[settings.layout]
  # wordmark | dark band: two-line heading with a cycling word, 3 contact columns, menu row, large site name
  # columns  | light: heading line, ruled link columns, newsletter form, copyright row
  # email    | light: the email address set large with a copy button, social links, small menu + copyright
  footer = "email"

One page, another layout. Add footerLayout to the page’s frontmatter. It wins over the config:

---
title: "Studio"
footerLayout: "columns" # wordmark | columns | email
---

src/content/homepage/english/home-studio.md uses columns this way, and home-photo.md sets email.

Footer Copy

Every layout reads src/content/sections/english/footer.md (and the file with the same name in each other language folder):

webgl: "none" # `wordmark`: animated background: flow | dots | none
title: "Have something worth *{cycle}*\nTell me about it."
cycle: ["designing", "printing", "framing"]
columns:
  - label: "Say hello"
    value: "[email protected]"
    url: "mailto:[email protected]"
    copy: true
  - label: "By phone"
    value: "+1 (555) 010-0199"
    url: "tel:+15550100199"
  - label: "Elsewhere"
    socials: true
email: "[email protected]"
wordmark: ""
bottomMenu: [3]
linkColumns: # trimmed
  - label: "Studio"
    menu: 2
  - label: "Social"
    socials: true
  - label: "Offices"
    lines: ["Rotterdam, NL", "Montréal, CA"]
newsletter:
  enable: true
  title: "**Notes from the studio.** New work and what we learned, four times a year."
  note: "One click to unsubscribe. Read the [privacy policy](/privacy-policy/)."
emailLabel: "**A project in mind?** Write to me, I answer within a day."
smallMenu: [2]

The sample email, phone number, and offices are placeholders: replace them in every language folder. The Copy email and Copied labels are footer.copyEmail and footer.copied in the language files.

Footer Links

The links come from the footer list in src/config/menu.<language>.json, and the layouts pick its groups by position (bottomMenu, linkColumns, smallMenu). The wordmark footer shows every link once in one row. See Menus.

Copyright

[settings.copyright]
  enable = true
  text   = "" # `{year}` and `{brand}` are replaced with the build year and `site.title`

Leave text empty to use footer.copyright from the language files (”© {year} {brand}. All rights reserved.” in English). {year} becomes the year of the build, so the notice stays current, and {brand} becomes [site] title. A text here is used in every language.

Ask AI Row

Every footer layout ends with a row of links that ask an AI assistant about the current page, and links to the page’s Markdown copy, llms.txt, and llms-full.txt. It ships on:

[settings.pageActions]
  enable    = true
  footer    = true # false removes this row
  providers = ["chatgpt", "claude", "perplexity", "grok"] # empty hides the "Ask" links

Its labels are ai.footerAsk, ai.footerRead, and ai.footerMarkdown in the language files. See AI Links & llms Files.

Theme Credit

Every footer layout shows the theme credit under the copyright, and it is also the last line of llms.txt. It is editable in config.toml. The part of text in [brackets] becomes the link to url:

[settings.themeCredit]
  enable = true
  text   = "Built on the Margo Astro theme by [Getastrothemes]"
  url    = "https://getastrothemes.com/astro-themes/margo/"

Newsletter

The columns footer shows a Mailchimp signup form next to its heading. It posts to [settings.subscription] formAction in config.toml, which ships as a placeholder: until you set it, npm run dev shows a warning inside the form. [settings.subscription] enable = false hides every signup form, and newsletter.enable: false in footer.md hides only this one. See Forms.

Social Links

The social links in the footers (and in the mobile menu) come from src/config/social.json:

{
  "main": [
    {
      "enable": true,
      "label": "instagram",
      "icon": "/images/icons/instagram.svg",
      "url": "https://www.instagram.com"
    }
  ]
}

The shipped list has Facebook, Twitter, Instagram, and LinkedIn, and the links point to the networks’ home pages. Replace each url with your own profile, and set enable to false on networks you don’t use. label is the network name; icon is an SVG in src/assets/images/icons/.

Files For Developers

src/layouts/components/global/Footer.astro picks the layout (from the page’s footerLayout, else [settings.layout] footer, else wordmark) and builds the copyright line. The layouts are in src/layouts/components/global/footer/: FooterWordmark.astro, FooterColumns.astro, and FooterEmail.astro, with FooterAi.astro (the Ask AI row), FooterCredit.astro (the theme credit), FooterLanguages.astro (the language links), and footerContent.ts (reads footer.md).

Do It With AI

Set the footer to the [wordmark | columns | email] layout in [settings.layout] of
src/config/config.toml. In footer.md in every language folder of src/content/sections/, put my
email [EMAIL] and phone [PHONE] in columns and email, rewrite title and cycle for my work
([ONE LINE ABOUT ME]), and translate them. Put my social profiles in src/config/social.json:
[URLS], and set enable: false on the networks I didn't list.