• 简体中文
  • 友链页面

    ModernDuang 的友链页面用于展示你的友情链接,支持分组展示友链卡片交换友链板块。友链数据通过 _config.modernduang.yml 集中管理。

    友链分组

    首先,通过 friendGroups 定义友链的分组类别。每个分组由一个名称和对应的 emoji 图标组成:

    friendGroups:
      技术伙伴: 🌟
      日常: 🎨
      朋友们: 🤝
      RSS 订阅: 📡
    • 键为分组名称,值为显示用的 emoji 图标(推荐使用单字符 emoji)。
    • 分组数量无限制,但建议控制在 5 个以内以保持页面整洁。
    • 分组显示顺序与配置顺序一致。

    友链列表

    通过 friends 数组添加具体的友链条目,每个条目须指定所属的 group

    friends:
      - name: 张三的技术博客
        url: https://zhangsan.dev
        desc: 前端开发与生活记录
        avatar: https://zhangsan.dev/avatar.png
        group: 技术伙伴
    
      - name: 李四的小站
        url: https://lisi.blog
        desc: 读书、旅行、摄影
        avatar: https://lisi.blog/avatar.png
        group: 日常
    属性类型必填描述
    namestring友链站点名称
    urlstring友链站点 URL
    descstring简短描述(建议 10 字以内)
    avatarstring头像/Logo 图片 URL
    groupstring所属分组名称,需与 friendGroups 中的键完全匹配

    注意: 如果某条友链的 group 没有在 friendGroups 中定义,该友链将不会显示在页面上。

    友链卡片样式

    每个友链以圆形粘土风格卡片展示:

    ┌──────────────────┐
    │   [头像]  名称     │
    │          描述     │
    └──────────────────┘
    • 头像圆角裁剪显示
    • 悬停时卡片向上浮动并放大
    • 点击卡片任意区域即可访问友链站点(新标签页打开)

    交换友链板块(siteInfo)

    友链页面底部可展示你站点的交换信息,方便其他站长获取你的信息用于交换友链。通过 siteInfo 字段配置:

    siteInfo:
      url: https://yourblog.com
      avatar: https://yourblog.com/avatar.png
      atom: https://yourblog.com/atom.xml
    属性类型默认值描述
    urlstring''你的站点 URL
    avatarstring''你的站点头像/Logo
    atomstring''你的 Atom 订阅地址

    站点名称(name)和描述(description)会自动从 Hexo 主配置 _config.yml 中继承:

    # _config.yml
    title: 我的博客        # 对应 siteInfo 中的 name
    description: 记录技术与生活  # 对应 siteInfo 中的 description

    siteInfo 提供的数据用于友链页面底部的交换友链板块,在该板块中自动展示你的站点信息,方便其他站长获取。

    自定义交换友链板块

    友链页面底部的「交换友链」板块内容由主题目录下的 layout/_link-apply.md 文件定义。你可以直接编辑该文件来自定义板块的内容和格式。

    该文件支持以下语法:

    <!-- siteinfo --> 标记

    _link-apply.md 中使用 <!-- siteinfo --> HTML 注释标记来插入站点信息卡片的位置:

    请在留言中按如下格式提供您的站点信息(下方也是我的站点信息):
    
    <!-- siteinfo -->

    <!-- siteinfo --> 标记会被自动替换为你的站点信息卡片,包含博客名、简介、网站地址、头像图片和 Atom 订阅地址,访客可以一键复制各项信息。

    {%card%} 卡片语法

    使用 {%card%}内容{%card%} 包裹一段内容,使其渲染为带样式的提示卡片:

    {%card%}如果您符合以上条件,欢迎在下方评论区留言申请交换友链~{%card%}

    支持的 Markdown 语法

    _link-apply.md 中支持以下标准 Markdown 语法:

    • 标题(######
    • 无序列表(-
    • 链接([文字](url)
    • 加粗(**文字**)和斜体(*文字*
    • 分割线(---

    完整示例

    layout/_link-apply.md

    ---
    title: 交换友链
    ---
    
    朋友,我需要您的网站:
    
    - 支持 HTTPS 站点且稳定运行
    - 必须符合中国大陆法律法规
    - 不包含广告、盈利、大量搬运内容
    
    {%card%}如果您符合以上条件,欢迎在下方评论区留言申请交换友链~{%card%}
    
    请在留言中按如下格式提供您的站点信息(下方也是我的站点信息):
    
    <!-- siteinfo -->
    
    ---
    
    ### 温馨提示
    
    - 我会尽快处理您的申请
    - 下方评论区显示可能有些许延迟,感谢您的等候~

    友链页面 Markdown

    友链页面本身(通过 hexo new page links 创建,即 source/links/index.md)用于撰写页面顶部的说明文字:

    ---
    title: 友链
    date: 2024-01-01
    layout: links
    ---
    
    欢迎来到我的友链页面!以下是我常访问的一些优秀站点。

    注意: {%card%}...{%card%} 标签和 <!-- siteinfo --> 标记是用于 layout/_link-apply.md 中的,不要写在 source/links/index.md 中。友链卡片列表和交换友链板块由主题自动渲染,无需在页面 Markdown 中手动插入。

    完整配置示例

    # friendGroups — 友链分组定义
    friendGroups:
      技术伙伴: 🌟
      日常: 🎨
      朋友们: 🤝
    
    # siteInfo — 你的站点信息(用于交换板块)
    siteInfo:
      url: https://myblog.com
      avatar: https://myblog.com/avatar.png
      atom: https://myblog.com/atom.xml
    
    # friends — 友链列表
    friends:
      - name: 张三的技术博客
        url: https://zhangsan.dev
        desc: 前端开发与生活记录
        avatar: https://zhangsan.dev/avatar.png
        group: 技术伙伴
    
      - name: 李四的小站
        url: https://lisi.blog
        desc: 读书、旅行、摄影
        avatar: https://lisi.blog/avatar.png
        group: 日常
    
      - name: 王五的笔记
        url: https://wangwu.cc
        desc: 后端工程师的成长之路
        avatar: https://wangwu.cc/avatar.png
        group: 技术伙伴

    相关页面