页脚
Simple Footer
A logo, one row of links and a copyright line - stacked on mobile, spread on desktop.
#footer#simple#links
6 个框架初级
Loading…
A centred stack - wordmark, links, a row of social icon buttons and a copyright.
<!--
Every social icon is an icon-only link, so every one needs its own accessible
name - "GitHub", not "link". The <svg> is aria-hidden and the name comes from
a visually-hidden span rather than aria-label, because a span survives
automatic page translation and an aria-label frequently does not.
rel="noreferrer" alongside target="_blank": noopener is implied by modern
browsers, but noreferrer is not.
-->
<footer class="footsocial">
<div class="footsocial__inner">
<a class="footsocial__brand" href="/">Adysre</a>
<nav class="footsocial__nav" aria-label="Footer">
<ul class="footsocial__links">
<li><a class="footsocial__link" href="/about">About</a></li>
<li><a class="footsocial__link" href="/blog">Blog</a></li>
<li><a class="footsocial__link" href="/privacy">Privacy</a></li>
</ul>
</nav>
<ul class="footsocial__icons">
<li>
<a class="footsocial__icon" href="https://github.com/adysre" target="_blank" rel="noreferrer">
<svg class="footsocial__glyph" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.56-1.11-4.56-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2Z" />
</svg>
<span class="footsocial__sr">GitHub</span>
</a>
</li>
<li>
<a class="footsocial__icon" href="https://x.com/adysre" target="_blank" rel="noreferrer">
<svg class="footsocial__glyph" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M17.53 3H20.5l-6.49 7.42L21.64 21h-5.97l-4.68-6.12L5.6 21H2.63l6.94-7.93L2.36 3h6.12l4.23 5.59L17.53 3Zm-1.04 16.2h1.65L7.6 4.71H5.83L16.49 19.2Z" />
</svg>
<span class="footsocial__sr">X</span>
</a>
</li>
<li>
<a class="footsocial__icon" href="https://linkedin.com/company/adysre" target="_blank" rel="noreferrer">
<svg class="footsocial__glyph" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.65h.05a4.16 4.16 0 0 1 3.75-2.06c4 0 4.74 2.63 4.74 6.06V21h-4v-5.36c0-1.28-.02-2.92-1.78-2.92-1.79 0-2.06 1.39-2.06 2.83V21h-4V9Z" />
</svg>
<span class="footsocial__sr">LinkedIn</span>
</a>
</li>
</ul>
<p class="footsocial__copy">© <time datetime="2026">2026</time> Adysre Inc.</p>
</div>
</footer>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
socials | SocialLink[] | - | 以图标形式渲染的社交主页链接。 |
className | string | - | 合并到根元素上的额外类名。 |
Every social icon is an icon-only link, so every one needs its own accessible name - "GitHub", not "link". The name comes from a visually hidden `<span>` rather than `aria-label`, deliberately: a span survives automatic page translation, an `aria-label` frequently does not. The `<svg>` is `aria-hidden` so it cannot compete with it. The targets are 40px even though the glyphs are 20px - a 20px tap target fails on a phone regardless of how tidy it looks. Marks are drawn with `fill="currentColor"`, so recolouring the link recolours the icon and dark mode is one text colour rather than three fills. Pass your own `socials` array; each needs a `name`, an `href` and the `d` of a 24×24 path. `rel="noreferrer"` alongside `target="_blank"` because modern browsers imply `noopener` but not `noreferrer`.