徽标使用

徽标使用

问题

1<a target="_blank" href="https://nginx.org/" title="本站Nginx反向代理服务 Nginx"><img alt="Nginx" src="https://img.shields.io/badge/Nginx-Proxy?logo=Nginx&label=Proxy"></a>`, 这个徽标要怎么用？

回答

你提供的代码是一个 Nginx 反向代理徽标（Badge），通常用于网页或 GitHub 项目的 README.md 中，展示当前服务使用了 Nginx 作为反向代理。以下是详细的使用方法和说明：

1. 徽标效果预览

（实际显示为动态 Shields.io 徽标，背景色和图标会自动适配)

2. 使用方法

方式一：直接插入 HTML

将代码粘贴到网页的 HTML 文件中（如博客、文档站点）：

1<a target="_blank" href="https://nginx.org/" title="本站Nginx反向代理服务 Nginx">
2  <img alt="Nginx" src="https://img.shields.io/badge/Nginx-Proxy?logo=Nginx&label=Proxy">
3</a>
4
5
6
7<a target="_blank" href="https://nginx.org/" title="本站Nginx反向代理服务 Nginx">
8  <img alt="Nginx" src="https://img.shields.io/badge/xxx-CDN?logo=Nginx&label=CDN">
9</a>

• 功能说明：
  • 点击徽标会跳转到 Nginx 官网（https://nginx.org/）。
  • title 属性是鼠标悬停时的提示文字。
  • alt 属性是图片的替代文本（SEO 友好）。

方式二：Markdown 文件（如 GitHub README.md）

在 Markdown 中使用：

1[![Nginx Proxy](https://img.shields.io/badge/Nginx-Proxy?logo=Nginx&label=Proxy)](https://nginx.org/)

• 效果：
  

[

3. 自定义徽标参数

Shields.io 徽标支持动态生成，你可以通过修改 URL 参数调整样式：

• 基础格式：
  https://img.shields.io/badge/{左侧文本}-{右侧文本}?logo={图标名称}&color={颜色}&label={标签文本}

• 示例：

   1![Nginx](https://img.shields.io/badge/Nginx-反向代理-269539?logo=Nginx&logoColor=white&label=Proxy)
   2
   3
   4![Nginx](https://img.shields.io/badge/Nginx-反向代理-269539?logo=Nginx&logoColor=white&label=Proxy)
   5
   6
   7
   8---
   9
  10      <a target="_blank" href="https://www.dogecloud.com/" title="本站部署服务使用 dogecloud"><img alt="dogecloud" src="https://img.shields.io/badge/Alibaba-Cloud?logo=alibabacloud&label=Server&color=%23FF6A00"></a>

  效果：
  

• 常用参数：

  参数	作用	示例值
  logo	图标名称（支持 simple-icons）	Nginx、Apache
  color	右侧背景色（HEX 或颜色名）	269539、orange
  label	左侧标签文本	Proxy、CDN
  logoColor	图标颜色	white、black

4. 其他类似徽标

如果需要展示其他技术栈的代理服务，可替换以下关键词：

• Caddy:

  1![Caddy](https://img.shields.io/badge/Caddy-Proxy-1e88e5?logo=Caddy&logoColor=white)

  

• Traefik:

  1![Traefik](https://img.shields.io/badge/Traefik-Proxy-24A1C1?logo=TraefikProxy&logoColor=white)
  2
  3
  4
  5
  6![Traefik](https://img.shields.io/badge/Traefik-Proxy-24A1C1?logo=TraefikProxy&logoColor=white)

  

5. 注意事项

1. 图标名称：需参考 simple-icons 的官方命名（如 Nginx 而非 nginx）。
2. 网络依赖：徽标需联网加载（基于 Shields.io 服务）。
3. 自定义服务：如果是自建代理，可以修改链接指向你的文档页。

总结

• 直接复制代码到 HTML 或 Markdown 中即可使用。
• 通过 Shields.io 参数自定义颜色、图标和文本。
• 兼容性：适用于 GitHub、GitLab、文档网站等支持 HTML/Markdown 的平台。