Footer
简介
Footer 组件用于创建网站的页脚部分，提供版权信息、导航链接和社交媒体链接等内容。该组件支持高度自定义，可以根据需要显示或隐藏不同的部分。
组件特性：
- 清晰的信息层次 - 通过视觉层次和分组展示不同类别的页脚信息
- 响应式布局 - 在不同屏幕尺寸下保持良好的可用性和美观性
- 可定制性 - 支持多种配置选项，适应不同网站的需求
- 品牌一致性 - 与网站整体设计风格保持一致
- 多语言支持 - 支持多种语言显示，自动检测当前语言环境
- 社交媒体整合 - 提供社交媒体链接的展示
- 微信二维码支持
- WhatsApp 二维码支持
- 产品链接展示 - 可添加产品链接列表
- 友情链接展示 - 可添加友情链接列表
- Logo 展示 - 支持添加网站 Logo
案例
---
/**
* @component Footer.Basic
*
* @description
* 基础Footer组件示例，展示最简单的页脚用法。
*/
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";
// 产品数据
// 友情链接数据
// 社交媒体链接
const socialLinks = [
"https://github.com/cofficlab",
"https://twitter.com/cofficlab",
"https://weibo.com/cofficlab",
"https://www.linkedin.com/company/cofficlab",
];
// 联系方式信息
const contactInfo = {
address: "北京市朝阳区某某大厦 1001 室",
phone: "+86 138-0000-0000",
email: "contact@cofficlab.com",
workingHours: "周一至周五 9:00-18:00",
wechat: "cofficlab_wechat",
qq: "123456789",
};
// 法律信息
const legalInfo = {
termsLink: "/terms",
privacyLink: "/privacy",
icp: "京ICP备12345678号",
icpLink: "https://beian.miit.gov.cn",
};
// 关于信息
const aboutInfo = {
aboutLink: "/about",
contactLink: "/contact",
teamLink: "/team",
careersLink: "/careers",
};
// 资源信息
const resourcesInfo = {
newsLink: "/news",
historyLink: "/history",
partnersLink: "/partners",
blogLink: "/blog",
faqLink: "/faq",
mediaLink: "/media",
techStackLink: "/tech-stack",
};
// 二维码图片
const wechatQR = getLandscapeImage({
width: 200,
height: 200,
tag: "wechat-qr",
});
const whatsappQR = getLandscapeImage({
width: 200,
height: 200,
tag: "whatsapp-qr",
});
// 公司 Logo
const logo = getProductImage({
width: 120,
height: 40,
tag: "cofficlab-logo",
});
---
<Footer
siteName="CofficLab"
homeLink="/"
slogan="构建美好的数字体验"
company="CofficLab 科技有限公司"
copyright="© 2024 CofficLab. 保留所有权利"
inspirationalSlogan="让技术更简单，让体验更美好"
logo={logo}
background="base-200"
aboutInfo={aboutInfo}
contactInfo={contactInfo}
socialLinks={socialLinks}
wechatQR={wechatQR}
whatsappQR={whatsappQR}
legalInfo={legalInfo}
resourcesInfo={resourcesInfo}
/>
---
import { Footer, FooterProps } from "@coffic/cosy-ui";
---
<Footer
{...FooterProps()
.siteName('我的网站')
.homeLink('/')
.slogan('简单而强大')
.company('我的公司')
.inspirationalSlogan('构建美好的数字体验')
.build()}
/>
Props
aboutInfo
关于信息配置，包含关于我们、联系我们、团队介绍、职业机会等链接。
---
/**
* @component Footer.Basic
*
* @description
* 基础Footer组件示例，展示最简单的页脚用法。
*/
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";
// 产品数据
// 友情链接数据
// 社交媒体链接
const socialLinks = [
"https://github.com/cofficlab",
"https://twitter.com/cofficlab",
"https://weibo.com/cofficlab",
"https://www.linkedin.com/company/cofficlab",
];
// 联系方式信息
const contactInfo = {
address: "北京市朝阳区某某大厦 1001 室",
phone: "+86 138-0000-0000",
email: "contact@cofficlab.com",
workingHours: "周一至周五 9:00-18:00",
wechat: "cofficlab_wechat",
qq: "123456789",
};
// 法律信息
const legalInfo = {
termsLink: "/terms",
privacyLink: "/privacy",
icp: "京ICP备12345678号",
icpLink: "https://beian.miit.gov.cn",
};
// 关于信息
const aboutInfo = {
aboutLink: "/about",
contactLink: "/contact",
teamLink: "/team",
careersLink: "/careers",
};
// 资源信息
const resourcesInfo = {
newsLink: "/news",
historyLink: "/history",
partnersLink: "/partners",
blogLink: "/blog",
faqLink: "/faq",
mediaLink: "/media",
techStackLink: "/tech-stack",
};
// 二维码图片
const wechatQR = getLandscapeImage({
width: 200,
height: 200,
tag: "wechat-qr",
});
const whatsappQR = getLandscapeImage({
width: 200,
height: 200,
tag: "whatsapp-qr",
});
// 公司 Logo
const logo = getProductImage({
width: 120,
height: 40,
tag: "cofficlab-logo",
});
---
<Footer
siteName="CofficLab"
homeLink="/"
slogan="构建美好的数字体验"
company="CofficLab 科技有限公司"
copyright="© 2024 CofficLab. 保留所有权利"
inspirationalSlogan="让技术更简单，让体验更美好"
logo={logo}
background="base-200"
aboutInfo={aboutInfo}
contactInfo={contactInfo}
socialLinks={socialLinks}
wechatQR={wechatQR}
whatsappQR={whatsappQR}
legalInfo={legalInfo}
resourcesInfo={resourcesInfo}
/>
---
import { Footer, FooterProps } from "@coffic/cosy-ui";
---
<Footer
{...FooterProps()
.siteName('我的网站')
.homeLink('/')
.slogan('简单而强大')
.company('我的公司')
.inspirationalSlogan('构建美好的数字体验')
.build()}
/>
background
页脚背景色。支持以下所有预设背景（含透明度与渐变）：
- 基础：primary、secondary、accent、neutral、base-100、base-200、base-300、success、warning、error、info
- 透明度：上述基础色均支持 /10、/20、/30、/40、/50、/60、/70、/80、/90（如 primary/10）
- 渐变：gradient、gradient-primary、gradient-secondary、gradient-accent、gradient-success、gradient-warning、gradient-info、gradient-sky、gradient-sunset、gradient-forest、gradient-ocean、gradient-mountain、gradient-flower、gradient-watermelon、gradient-lemon、gradient-grape、gradient-blueberry、gradient-mango、gradient-kiwi、gradient-pitaya、gradient-banana
---
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
/>
---
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
background="primary"
/>
---
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
background="primary/10"
/>
---
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
background="accent"
/>
---
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
background="success"
/>
---
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
background="warning"
/>
---
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
background="error"
/>
---
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
background="secondary"
/>
---
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
background="neutral/50"
/>
---
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
background="gradient-sky"
/>
company
公司名称。
---
/**
* @component Footer.Basic
*
* @description
* 基础Footer组件示例，展示最简单的页脚用法。
*/
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";
// 产品数据
// 友情链接数据
// 社交媒体链接
const socialLinks = [
"https://github.com/cofficlab",
"https://twitter.com/cofficlab",
"https://weibo.com/cofficlab",
"https://www.linkedin.com/company/cofficlab",
];
// 联系方式信息
const contactInfo = {
address: "北京市朝阳区某某大厦 1001 室",
phone: "+86 138-0000-0000",
email: "contact@cofficlab.com",
workingHours: "周一至周五 9:00-18:00",
wechat: "cofficlab_wechat",
qq: "123456789",
};
// 法律信息
const legalInfo = {
termsLink: "/terms",
privacyLink: "/privacy",
icp: "京ICP备12345678号",
icpLink: "https://beian.miit.gov.cn",
};
// 关于信息
const aboutInfo = {
aboutLink: "/about",
contactLink: "/contact",
teamLink: "/team",
careersLink: "/careers",
};
// 资源信息
const resourcesInfo = {
newsLink: "/news",
historyLink: "/history",
partnersLink: "/partners",
blogLink: "/blog",
faqLink: "/faq",
mediaLink: "/media",
techStackLink: "/tech-stack",
};
// 二维码图片
const wechatQR = getLandscapeImage({
width: 200,
height: 200,
tag: "wechat-qr",
});
const whatsappQR = getLandscapeImage({
width: 200,
height: 200,
tag: "whatsapp-qr",
});
// 公司 Logo
const logo = getProductImage({
width: 120,
height: 40,
tag: "cofficlab-logo",
});
---
<Footer
siteName="CofficLab"
homeLink="/"
slogan="构建美好的数字体验"
company="CofficLab 科技有限公司"
copyright="© 2024 CofficLab. 保留所有权利"
inspirationalSlogan="让技术更简单，让体验更美好"
logo={logo}
background="base-200"
aboutInfo={aboutInfo}
contactInfo={contactInfo}
socialLinks={socialLinks}
wechatQR={wechatQR}
whatsappQR={whatsappQR}
legalInfo={legalInfo}
resourcesInfo={resourcesInfo}
/>
---
import { Footer, FooterProps } from "@coffic/cosy-ui";
---
<Footer
{...FooterProps()
.siteName('我的网站')
.homeLink('/')
.slogan('简单而强大')
.company('我的公司')
.inspirationalSlogan('构建美好的数字体验')
.build()}
/>
contactInfo
联系方式信息配置，包含地址、电话、邮箱、工作时间等详细信息。每个联系方式占一行，前方有小图标。
---
import { Footer } from "@coffic/cosy-ui";
import Book from "@/assets/book.png";
const contactInfo = {
address: "北京市朝阳区某某大厦 1001 室",
phone: "+86 138-0000-0000",
email: "contact@example.com",
workingHours: "周一至周五 9:00-18:00",
wechat: "wechat_id",
qq: "123456789",
};
const socialLinks = [
"https://weibo.com",
"https://github.com",
"https://twitter.com",
];
---
<Footer
siteName="CofficLab"
homeLink="/"
slogan="构建美好的数字体验"
company="CofficLab 科技有限公司"
copyright="© 2024 CofficLab. 保留所有权利"
inspirationalSlogan="让技术更简单，让体验更美好"
logo={Book}
aboutLink="/about"
contactLink="/contact"
teamLink="/team"
careersLink="/careers"
newsLink="/news"
historyLink="/history"
partnersLink="/partners"
blogLink="/blog"
faqLink="/faq"
mediaLink="/media"
techStackLink="/tech-stack"
termsLink="/terms"
privacyLink="/privacy"
contactInfo={contactInfo}
socialLinks={socialLinks}
icp="京ICP备12345678号"
icpLink="https://beian.miit.gov.cn"
/>
friendlyLinks
友情链接数组，每个对象包含name、href和可选的external属性。
---
/**
* @component Footer.WithFriendlyLinks
*
* @description
* 展示带有友情链接的页脚示例。
*/
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
friendlyLinks={[
{ name: '合作伙伴A', href: 'https://partner-a.com', external: true },
{ name: '合作伙伴B', href: 'https://partner-b.com', external: true },
{ name: '技术社区', href: 'https://tech-community.com', external: true },
{
name: '开源项目',
href: 'https://open-source-project.com',
external: true,
},
]}
/>
homeLink
首页链接。
---
/**
* @component Footer.Basic
*
* @description
* 基础Footer组件示例，展示最简单的页脚用法。
*/
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";
// 产品数据
// 友情链接数据
// 社交媒体链接
const socialLinks = [
"https://github.com/cofficlab",
"https://twitter.com/cofficlab",
"https://weibo.com/cofficlab",
"https://www.linkedin.com/company/cofficlab",
];
// 联系方式信息
const contactInfo = {
address: "北京市朝阳区某某大厦 1001 室",
phone: "+86 138-0000-0000",
email: "contact@cofficlab.com",
workingHours: "周一至周五 9:00-18:00",
wechat: "cofficlab_wechat",
qq: "123456789",
};
// 法律信息
const legalInfo = {
termsLink: "/terms",
privacyLink: "/privacy",
icp: "京ICP备12345678号",
icpLink: "https://beian.miit.gov.cn",
};
// 关于信息
const aboutInfo = {
aboutLink: "/about",
contactLink: "/contact",
teamLink: "/team",
careersLink: "/careers",
};
// 资源信息
const resourcesInfo = {
newsLink: "/news",
historyLink: "/history",
partnersLink: "/partners",
blogLink: "/blog",
faqLink: "/faq",
mediaLink: "/media",
techStackLink: "/tech-stack",
};
// 二维码图片
const wechatQR = getLandscapeImage({
width: 200,
height: 200,
tag: "wechat-qr",
});
const whatsappQR = getLandscapeImage({
width: 200,
height: 200,
tag: "whatsapp-qr",
});
// 公司 Logo
const logo = getProductImage({
width: 120,
height: 40,
tag: "cofficlab-logo",
});
---
<Footer
siteName="CofficLab"
homeLink="/"
slogan="构建美好的数字体验"
company="CofficLab 科技有限公司"
copyright="© 2024 CofficLab. 保留所有权利"
inspirationalSlogan="让技术更简单，让体验更美好"
logo={logo}
background="base-200"
aboutInfo={aboutInfo}
contactInfo={contactInfo}
socialLinks={socialLinks}
wechatQR={wechatQR}
whatsappQR={whatsappQR}
legalInfo={legalInfo}
resourcesInfo={resourcesInfo}
/>
---
import { Footer, FooterProps } from "@coffic/cosy-ui";
---
<Footer
{...FooterProps()
.siteName('我的网站')
.homeLink('/')
.slogan('简单而强大')
.company('我的公司')
.inspirationalSlogan('构建美好的数字体验')
.build()}
/>
legalInfo
法律信息配置，包含服务条款、隐私政策、ICP备案等法律相关内容。
---
/**
* @component Footer.Basic
*
* @description
* 基础Footer组件示例，展示最简单的页脚用法。
*/
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";
// 产品数据
// 友情链接数据
// 社交媒体链接
const socialLinks = [
"https://github.com/cofficlab",
"https://twitter.com/cofficlab",
"https://weibo.com/cofficlab",
"https://www.linkedin.com/company/cofficlab",
];
// 联系方式信息
const contactInfo = {
address: "北京市朝阳区某某大厦 1001 室",
phone: "+86 138-0000-0000",
email: "contact@cofficlab.com",
workingHours: "周一至周五 9:00-18:00",
wechat: "cofficlab_wechat",
qq: "123456789",
};
// 法律信息
const legalInfo = {
termsLink: "/terms",
privacyLink: "/privacy",
icp: "京ICP备12345678号",
icpLink: "https://beian.miit.gov.cn",
};
// 关于信息
const aboutInfo = {
aboutLink: "/about",
contactLink: "/contact",
teamLink: "/team",
careersLink: "/careers",
};
// 资源信息
const resourcesInfo = {
newsLink: "/news",
historyLink: "/history",
partnersLink: "/partners",
blogLink: "/blog",
faqLink: "/faq",
mediaLink: "/media",
techStackLink: "/tech-stack",
};
// 二维码图片
const wechatQR = getLandscapeImage({
width: 200,
height: 200,
tag: "wechat-qr",
});
const whatsappQR = getLandscapeImage({
width: 200,
height: 200,
tag: "whatsapp-qr",
});
// 公司 Logo
const logo = getProductImage({
width: 120,
height: 40,
tag: "cofficlab-logo",
});
---
<Footer
siteName="CofficLab"
homeLink="/"
slogan="构建美好的数字体验"
company="CofficLab 科技有限公司"
copyright="© 2024 CofficLab. 保留所有权利"
inspirationalSlogan="让技术更简单，让体验更美好"
logo={logo}
background="base-200"
aboutInfo={aboutInfo}
contactInfo={contactInfo}
socialLinks={socialLinks}
wechatQR={wechatQR}
whatsappQR={whatsappQR}
legalInfo={legalInfo}
resourcesInfo={resourcesInfo}
/>
---
import { Footer, FooterProps } from "@coffic/cosy-ui";
---
<Footer
{...FooterProps()
.siteName('我的网站')
.homeLink('/')
.slogan('简单而强大')
.company('我的公司')
.inspirationalSlogan('构建美好的数字体验')
.build()}
/>
inspirationalSlogan
鼓舞人心的标语，显示在横幅中。
---
/**
* @component Footer.Basic
*
* @description
* 基础Footer组件示例，展示最简单的页脚用法。
*/
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";
// 产品数据
// 友情链接数据
// 社交媒体链接
const socialLinks = [
"https://github.com/cofficlab",
"https://twitter.com/cofficlab",
"https://weibo.com/cofficlab",
"https://www.linkedin.com/company/cofficlab",
];
// 联系方式信息
const contactInfo = {
address: "北京市朝阳区某某大厦 1001 室",
phone: "+86 138-0000-0000",
email: "contact@cofficlab.com",
workingHours: "周一至周五 9:00-18:00",
wechat: "cofficlab_wechat",
qq: "123456789",
};
// 法律信息
const legalInfo = {
termsLink: "/terms",
privacyLink: "/privacy",
icp: "京ICP备12345678号",
icpLink: "https://beian.miit.gov.cn",
};
// 关于信息
const aboutInfo = {
aboutLink: "/about",
contactLink: "/contact",
teamLink: "/team",
careersLink: "/careers",
};
// 资源信息
const resourcesInfo = {
newsLink: "/news",
historyLink: "/history",
partnersLink: "/partners",
blogLink: "/blog",
faqLink: "/faq",
mediaLink: "/media",
techStackLink: "/tech-stack",
};
// 二维码图片
const wechatQR = getLandscapeImage({
width: 200,
height: 200,
tag: "wechat-qr",
});
const whatsappQR = getLandscapeImage({
width: 200,
height: 200,
tag: "whatsapp-qr",
});
// 公司 Logo
const logo = getProductImage({
width: 120,
height: 40,
tag: "cofficlab-logo",
});
---
<Footer
siteName="CofficLab"
homeLink="/"
slogan="构建美好的数字体验"
company="CofficLab 科技有限公司"
copyright="© 2024 CofficLab. 保留所有权利"
inspirationalSlogan="让技术更简单，让体验更美好"
logo={logo}
background="base-200"
aboutInfo={aboutInfo}
contactInfo={contactInfo}
socialLinks={socialLinks}
wechatQR={wechatQR}
whatsappQR={whatsappQR}
legalInfo={legalInfo}
resourcesInfo={resourcesInfo}
/>
---
import { Footer, FooterProps } from "@coffic/cosy-ui";
---
<Footer
{...FooterProps()
.siteName('我的网站')
.homeLink('/')
.slogan('简单而强大')
.company('我的公司')
.inspirationalSlogan('构建美好的数字体验')
.build()}
/>
logo
网站 Logo 图片源（ImageSource）。推荐使用组件库图片工具方法（如 getExampleImage）生成。
---
/**
* @component Footer.WithLogo
*
* @description
* 展示带有Logo的页脚示例。
*/
import { Footer, getExampleImage } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
logo={getExampleImage({
width: 100,
height: 100,
provider: 'robohash',
tag: 'logo',
})}
/>
---
/**
* @component Footer.WithLogoLocal
* @description 使用本地图片作为 Logo 的页脚示例
*/
import { Footer } from "@coffic/cosy-ui";
import book from "@/assets/book.png";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
logo={book}
/>
products
产品链接数组，每个对象包含name、href和可选的external属性。
---
/**
* @component Footer.WithProducts
*
* @description
* 展示带有产品链接的页脚示例。
*/
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
products={[
{ name: '产品A', href: '/products/a' },
{ name: '产品B', href: '/products/b' },
{ name: '产品C', href: '/products/c' },
{ name: '外部产品', href: 'https://example.com', external: true },
]}
/>
resourcesInfo
资源信息配置，包含新闻、博客、常见问题、历史、技术栈等资源链接。
---
/**
* @component Footer.Basic
*
* @description
* 基础Footer组件示例，展示最简单的页脚用法。
*/
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";
// 产品数据
// 友情链接数据
// 社交媒体链接
const socialLinks = [
"https://github.com/cofficlab",
"https://twitter.com/cofficlab",
"https://weibo.com/cofficlab",
"https://www.linkedin.com/company/cofficlab",
];
// 联系方式信息
const contactInfo = {
address: "北京市朝阳区某某大厦 1001 室",
phone: "+86 138-0000-0000",
email: "contact@cofficlab.com",
workingHours: "周一至周五 9:00-18:00",
wechat: "cofficlab_wechat",
qq: "123456789",
};
// 法律信息
const legalInfo = {
termsLink: "/terms",
privacyLink: "/privacy",
icp: "京ICP备12345678号",
icpLink: "https://beian.miit.gov.cn",
};
// 关于信息
const aboutInfo = {
aboutLink: "/about",
contactLink: "/contact",
teamLink: "/team",
careersLink: "/careers",
};
// 资源信息
const resourcesInfo = {
newsLink: "/news",
historyLink: "/history",
partnersLink: "/partners",
blogLink: "/blog",
faqLink: "/faq",
mediaLink: "/media",
techStackLink: "/tech-stack",
};
// 二维码图片
const wechatQR = getLandscapeImage({
width: 200,
height: 200,
tag: "wechat-qr",
});
const whatsappQR = getLandscapeImage({
width: 200,
height: 200,
tag: "whatsapp-qr",
});
// 公司 Logo
const logo = getProductImage({
width: 120,
height: 40,
tag: "cofficlab-logo",
});
---
<Footer
siteName="CofficLab"
homeLink="/"
slogan="构建美好的数字体验"
company="CofficLab 科技有限公司"
copyright="© 2024 CofficLab. 保留所有权利"
inspirationalSlogan="让技术更简单，让体验更美好"
logo={logo}
background="base-200"
aboutInfo={aboutInfo}
contactInfo={contactInfo}
socialLinks={socialLinks}
wechatQR={wechatQR}
whatsappQR={whatsappQR}
legalInfo={legalInfo}
resourcesInfo={resourcesInfo}
/>
---
import { Footer, FooterProps } from "@coffic/cosy-ui";
---
<Footer
{...FooterProps()
.siteName('我的网站')
.homeLink('/')
.slogan('简单而强大')
.company('我的公司')
.inspirationalSlogan('构建美好的数字体验')
.build()}
/>
siteName
网站名称。
---
/**
* @component Footer.Basic
*
* @description
* 基础Footer组件示例，展示最简单的页脚用法。
*/
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";
// 产品数据
// 友情链接数据
// 社交媒体链接
const socialLinks = [
"https://github.com/cofficlab",
"https://twitter.com/cofficlab",
"https://weibo.com/cofficlab",
"https://www.linkedin.com/company/cofficlab",
];
// 联系方式信息
const contactInfo = {
address: "北京市朝阳区某某大厦 1001 室",
phone: "+86 138-0000-0000",
email: "contact@cofficlab.com",
workingHours: "周一至周五 9:00-18:00",
wechat: "cofficlab_wechat",
qq: "123456789",
};
// 法律信息
const legalInfo = {
termsLink: "/terms",
privacyLink: "/privacy",
icp: "京ICP备12345678号",
icpLink: "https://beian.miit.gov.cn",
};
// 关于信息
const aboutInfo = {
aboutLink: "/about",
contactLink: "/contact",
teamLink: "/team",
careersLink: "/careers",
};
// 资源信息
const resourcesInfo = {
newsLink: "/news",
historyLink: "/history",
partnersLink: "/partners",
blogLink: "/blog",
faqLink: "/faq",
mediaLink: "/media",
techStackLink: "/tech-stack",
};
// 二维码图片
const wechatQR = getLandscapeImage({
width: 200,
height: 200,
tag: "wechat-qr",
});
const whatsappQR = getLandscapeImage({
width: 200,
height: 200,
tag: "whatsapp-qr",
});
// 公司 Logo
const logo = getProductImage({
width: 120,
height: 40,
tag: "cofficlab-logo",
});
---
<Footer
siteName="CofficLab"
homeLink="/"
slogan="构建美好的数字体验"
company="CofficLab 科技有限公司"
copyright="© 2024 CofficLab. 保留所有权利"
inspirationalSlogan="让技术更简单，让体验更美好"
logo={logo}
background="base-200"
aboutInfo={aboutInfo}
contactInfo={contactInfo}
socialLinks={socialLinks}
wechatQR={wechatQR}
whatsappQR={whatsappQR}
legalInfo={legalInfo}
resourcesInfo={resourcesInfo}
/>
---
import { Footer, FooterProps } from "@coffic/cosy-ui";
---
<Footer
{...FooterProps()
.siteName('我的网站')
.homeLink('/')
.slogan('简单而强大')
.company('我的公司')
.inspirationalSlogan('构建美好的数字体验')
.build()}
/>
slogan
网站标语。
---
/**
* @component Footer.Basic
*
* @description
* 基础Footer组件示例，展示最简单的页脚用法。
*/
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";
// 产品数据
// 友情链接数据
// 社交媒体链接
const socialLinks = [
"https://github.com/cofficlab",
"https://twitter.com/cofficlab",
"https://weibo.com/cofficlab",
"https://www.linkedin.com/company/cofficlab",
];
// 联系方式信息
const contactInfo = {
address: "北京市朝阳区某某大厦 1001 室",
phone: "+86 138-0000-0000",
email: "contact@cofficlab.com",
workingHours: "周一至周五 9:00-18:00",
wechat: "cofficlab_wechat",
qq: "123456789",
};
// 法律信息
const legalInfo = {
termsLink: "/terms",
privacyLink: "/privacy",
icp: "京ICP备12345678号",
icpLink: "https://beian.miit.gov.cn",
};
// 关于信息
const aboutInfo = {
aboutLink: "/about",
contactLink: "/contact",
teamLink: "/team",
careersLink: "/careers",
};
// 资源信息
const resourcesInfo = {
newsLink: "/news",
historyLink: "/history",
partnersLink: "/partners",
blogLink: "/blog",
faqLink: "/faq",
mediaLink: "/media",
techStackLink: "/tech-stack",
};
// 二维码图片
const wechatQR = getLandscapeImage({
width: 200,
height: 200,
tag: "wechat-qr",
});
const whatsappQR = getLandscapeImage({
width: 200,
height: 200,
tag: "whatsapp-qr",
});
// 公司 Logo
const logo = getProductImage({
width: 120,
height: 40,
tag: "cofficlab-logo",
});
---
<Footer
siteName="CofficLab"
homeLink="/"
slogan="构建美好的数字体验"
company="CofficLab 科技有限公司"
copyright="© 2024 CofficLab. 保留所有权利"
inspirationalSlogan="让技术更简单，让体验更美好"
logo={logo}
background="base-200"
aboutInfo={aboutInfo}
contactInfo={contactInfo}
socialLinks={socialLinks}
wechatQR={wechatQR}
whatsappQR={whatsappQR}
legalInfo={legalInfo}
resourcesInfo={resourcesInfo}
/>
---
import { Footer, FooterProps } from "@coffic/cosy-ui";
---
<Footer
{...FooterProps()
.siteName('我的网站')
.homeLink('/')
.slogan('简单而强大')
.company('我的公司')
.inspirationalSlogan('构建美好的数字体验')
.build()}
/>
socialLinks
社交媒体链接数组。
---
/**
* @component Footer.WithSocial
*
* @description
* 展示带有社交媒体链接的页脚示例。
*/
import { Footer } from "@coffic/cosy-ui";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
socialLinks={[
'https://github.com/myusername',
'https://twitter.com/myusername',
'https://linkedin.com/in/myusername',
'https://facebook.com/myusername',
]}
/>
wechatQR
微信二维码图片源，支持本地图片或远程URL。当提供此属性时，会在社交媒体链接区域显示微信图标，悬停时显示二维码。
---
import { Footer } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
wechatQR={qrCodeImage}
/>
---
import { Footer } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
wechatQR={qrCodeImage}
socialLinks={[
'https://github.com/myusername',
'https://twitter.com/myusername',
]}
/>
whatsappQR
WhatsApp 二维码图片源，支持本地图片或远程URL。当提供此属性时，会在社交媒体链接区域显示 WhatsApp 图标，悬停时显示二维码。
---
import { Footer } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
wechatQR={qrCodeImage}
/>
---
import { Footer } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
whatsappQR={qrCodeImage}
/>
---
import { Footer } from "@coffic/cosy-ui";
import bookImage from "@/assets/book.png";
---
<Footer
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
wechatQR={bookImage}
whatsappQR={bookImage}
socialLinks={[
'https://github.com/myusername',
'https://twitter.com/myusername',
]}
/>