返回顶部
s

shopify-manager-cliShopify管理工具

Manage Shopify store — products, metafields, metaobjects, blogs & articles via Shopify Admin GraphQL API. Pure official Shopify API wrapper with no third-party plugins required; built on the same API surface as Shopify CLI, giving you full control without extra dependencies.

作者: admin | 来源: ClawHub
源自
ClawHub
版本
V 1.0.3
安全检测
已通过
304
下载量
免费
免费
1
收藏
概述
安装方式
版本历史

shopify-manager-cli

Shopify 商店管理器

您可以通过运行 python3 scripts/shopify_admin.py 命令来帮助用户管理他们的 Shopify 商店。

前置条件

必须设置以下环境变量:

  • - SHOPIFYSTOREURL — 例如 https://my-store.myshopify.com
  • SHOPIFYACCESSTOKEN — 管理 API 访问令牌 (shpat…)
  • SHOPIFYAPI_VERSION — 可选,默认为 2025-01

如果未设置,请提醒用户在进行操作前先导出这些变量。

所需的管理 API 访问权限范围

自定义应用必须在 Shopify 管理后台的 设置 → 应用 → 开发应用 → 配置 中授予以下权限范围:

权限范围用途
readproducts / writeproducts产品列表/查看/创建/更新/删除
readmetaobjectdefinitions / writemetaobjectdefinitions
元对象定义 |
| readmetaobjects / writemetaobjects | 元对象列表/创建/更新/删除 |
| readcontent / writecontent | 博客列表/创建;文章列表/创建/更新/删除 |
| readfiles / writefiles | 文件上传;通过分阶段上传 API 上传产品图片 |

使用方法

  1. 1. 从用户的消息中识别资源类型(product / metafield / metaobject / blog / article / file)和操作(list / get / create / update / delete / define / set / upload)。
  2. 使用下面的命令参考映射到确切的子命令和标志。当用户省略可选参数(例如 --status、--author)时,使用文档中的默认值——除非缺少必需参数,否则不要提示。
  3. 当命令接受 --image-file 或本地文件路径时,直接传递路径;脚本会从磁盘读取文件并通过 Shopify 的分阶段上传 API 上传——无需预处理。
  4. 使用 Bash 工具运行命令。
  5. 以清晰可读的格式呈现输出(列表使用表格,详情使用 JSON)。
  6. 对于删除操作:在执行前务必与用户确认。

命令参考

产品

bash

列出产品(可选搜索过滤器)


输出列:id title [status] vendor productType $price tags


python3 scripts/shopify_admin.py product list [--filter status:active] [--limit 20]

获取产品详情

输出包括:id, title, status, vendor, productType, tags, variants (id/title/price/sku), metafields

python3 scripts/shopify_admin.py product get

创建产品(默认为 DRAFT 状态)

python3 scripts/shopify_admin.py product create [--description <html>] [--vendor <name>] [--tags tag1 tag2] [--image-url https://...] [--image-file /path/to/a.jpg] [--image-alt Alt text] [--status DRAFT|ACTIVE|ARCHIVED] <h1>更新产品(仅指定要更改的字段)</h1> python3 scripts/shopify_admin.py product update <id> [--title ...] [--description ...] [--vendor ...] [--tags t1 t2] [--image-url https://...] [--image-file /path/to/a.jpg] [--image-alt Alt text] [--status ...] <h1>删除产品(⚠️ 不可逆——先确认)</h1> python3 scripts/shopify_admin.py product delete <id> <h3>元字段</h3> <p>bash<br> <h1>列出资源类型的元字段定义</h1><br> python3 scripts/shopify<em>admin.py metafield list <owner</em>type> [--limit 50]</p> <h1>创建元字段定义</h1> python3 scripts/shopify<em>admin.py metafield define <owner</em>type> <key> <type> [--name 显示名称] [--namespace ns] [--pin] <h1>在资源上设置元字段值</h1> python3 scripts/shopify<em>admin.py metafield set <OwnerType> <owner</em>id> <key> <value> [--type type] [--namespace ns] <p>所有者类型:product、customer、order、shop、collection、productvariant、company、location 等。</p> <p>元字段类型:single<em>line</em>text<em>field、multi</em>line<em>text</em>field、rich<em>text</em>field、number<em>integer、number</em>decimal、boolean、color、date、date<em>time、url、json、money、weight、volume、dimension、rating、product</em>reference、collection<em>reference、file</em>reference、metaobject_reference、list.*</p> <h3>元对象</h3> <p>bash<br> <h1>创建元对象定义</h1><br> <h1>字段规格格式:key:type[:name[:required]]</h1><br> python3 scripts/shopify<em>admin.py metaobject define <type> <field</em>specs>... [--name 显示名称] [--display-key <field_key>]</p> <h1>创建/更新元对象条目</h1> <h1>字段值格式:key=value</h1> python3 scripts/shopify_admin.py metaobject create <type> <handle> <key=value>... <h1>列出元对象条目</h1> python3 scripts/shopify_admin.py metaobject list <type> [--limit 20] <h1>更新元对象条目</h1> python3 scripts/shopify_admin.py metaobject update <id> <key=value>... <h1>删除元对象条目(⚠️ 先确认)</h1> python3 scripts/shopify_admin.py metaobject delete <id> <h3>博客</h3> <p>bash<br> <h1>列出博客</h1><br> python3 scripts/shopify_admin.py blog list [--limit 20]</p> <h1>创建博客</h1> python3 scripts/shopify_admin.py blog create <title> <h3>文件</h3> <p>bash<br> <h1>上传文件到 Shopify 管理后台 → 设置 → 文件</h1><br> python3 scripts/shopify<em>admin.py file upload /path/to/file.pdf [--alt 替代文本] [--filename file.pdf] [--content-type FILE|IMAGE|VIDEO|MODEL</em>3D] [--duplicate APPEND<em>UUID|RAISE</em>ERROR|REPLACE]</p> <h3>文章</h3> <p>bash<br> <h1>列出文章(可选按博客过滤)</h1><br> python3 scripts/shopify<em>admin.py article list [--blog <blog</em>id>] [--limit 20]</p> <h1>创建文章(省略时 --author 默认为 Admin)</h1> python3 scripts/shopify<em>admin.py article create --blog <blog</em>id> <title> <body_html> [--author 姓名] [--tags t1 t2] [--publish] <h1>创建带有作者信息的文章</h1> python3 scripts/shopify_admin.py article create --blog 123 越野跑指南 <p>越野跑技巧。</p> --author 张三 --tags running trails --publish <h1>更新文章作者</h1> python3 scripts/shopify_admin.py article update <id> --author 新作者姓名 <h1>更新文章</h1> python3 scripts/shopify_admin.py article update <id> [--title ...] [--body ...] [--author 姓名] [--tags t1 t2] [--publish|--unpublish] <h1>发布/取消发布(设置可见性)</h1> python3 scripts/shopify_admin.py article update <id> --publish python3 scripts/shopify_admin.py article update <id> --unpublish <h1>删除文章(⚠️ 先确认)</h1> python3 scripts/shopify_admin.py article delete <id> <h4>作者说明</h4> <ul><li>- --author 设置文章上显示的显示名称(例如张三)。</li><li>省略时默认为 Admin。</li><li>列出文章时,输出已包含 by <author> 列以显示作者信息。</li><li>作者存储为纯文本字符串——它<strong>不</strong>链接到 Shopify 员工账户。</li></ul> <h2>ID 格式</h2> <p>用户可以提供:<br> <ul><li>- 数字 ID:123</li><li>完整的 Shopify GID:gid://shopify/Product/123</li></ul></p> <p>脚本会自动处理两种格式。</p> <h2>自然语言映射示例</h2> <table><thead><tr><th>用户说</th><th>命令</th></tr></thead><tbody><tr><td>列出所有活跃产品</td><td>product list --filter status:active</td></tr><tr><td>显示产品 123</td></tr></tbody></table> product get 123 | | 创建一个 GeoStep 品牌的登山靴产品 | product create 登山靴 --vendor GeoStep | | 为产品添加一个 care<em>guide 文本字段 | metafield define product care</em>guide single<em>line</em>text_field --name 护理指南 | | 为产品 123 设置护理指南为手洗 | metafield set Product 123 care_guide 仅限手洗 | | 定义一个包含姓名和简介的设计师元对象 | metaobject define designer name:single<em>line</em>text<em>field:姓名 bio:multi</em>line<em>text</em>field:简介 --display-key name | |</div> </div> <div class="tags"> <h4>标签</h4> <span class="tag">skill</span> <span class="tag">ai</span> </div> </div> </div> <div class="tab-content" id="tab-install"> <div class="install-panel"> <h3>通过对话安装</h3> <p>该技能支持在以下平台通过对话安装:</p> <div class="platform-list"> <span class="platform-tag">OpenClaw</span> <span class="platform-tag">WorkBuddy</span> <span class="platform-tag">QClaw</span> <span class="platform-tag">Kimi</span> <span class="platform-tag">Claude</span> </div> <div class="install-method"> <h4>方式一:安装 SkillHub 和技能</h4> <div class="code-block"> <button class="copy-btn" onclick="copyToClipboard('帮我安装 SkillHub 和 shopify-manager-cli-1776173402 技能', this)">复制</button> <code>帮我安装 SkillHub 和 shopify-manager-cli-1776173402 技能</code> </div> </div> <div class="install-method"> <h4>方式二:设置 SkillHub 为优先技能安装源</h4> <div class="code-block"> <button class="copy-btn" onclick="copyToClipboard('设置 SkillHub 为我的优先技能安装源,然后帮我安装 shopify-manager-cli-1776173402 技能', this)">复制</button> <code>设置 SkillHub 为我的优先技能安装源,然后帮我安装 shopify-manager-cli-1776173402 技能</code> </div> </div> <h3 style="margin-top: 30px;">通过命令行安装</h3> <div class="install-method"> <div class="code-block"> <button class="copy-btn" onclick="copyToClipboard('skillhub install shopify-manager-cli-1776173402', this)">复制</button> <code>skillhub install shopify-manager-cli-1776173402</code> </div> </div> <h3 style="margin-top: 30px;">下载</h3> <a href="plugin.php?id=hl_skillhub&mod=download&version_id=13083&token=30815e8f295f4bb3d0faa55a9b283b39" class="download-btn"> ⬇ 下载 shopify-manager-cli v1.0.3(免费) </a> <p class="download-info"> 文件大小: 11.62 KB | 发布时间: 2026-4-15 13:02 </p> </div> </div> <div class="tab-content" id="tab-versions"> <div class="version-list"> <div class="version-item"> <div class="version-header"> <span class="version-number">v1.0.3</span> <span class="latest-tag">最新</span> <span class="version-date">2026-4-15 13:02</span> </div> <div class="changelog"> - Added SHOPIFY_API_VERSION to required environment variables in metadata.<br /> - Declared SHOPIFY_ACCESS_TOKEN as primaryEnv in metadata.<br /> - No other functional changes; documentation and command references remain the same. </div> </div> </div> </div> <!-- 推荐技能 --> <div class="related-skills"> <h3>相关推荐</h3> <div class="skill-list-related"> <div class="skillhub-card-related"> <a href="plugin.php?id=hl_skillhub&mod=detail&slug=self-improving-agent-1776396682"> <div class="skill-icon"> <div class="default-icon">s</div> </div> <h3 class="skill-name">self-improvement</h3> <p class="skill-desc">Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.</p> <div class="skill-meta"> <div class="stats"> <span>⭐ 3209</span> <span>⬇ 392958</span> </div> <span class="skill-source">AI智能</span> </div> </a> </div> <div class="skillhub-card-related"> <a href="plugin.php?id=hl_skillhub&mod=detail&slug=self-improving-agent-1776382578"> <div class="skill-icon"> <div class="default-icon">s</div> </div> <h3 class="skill-name">self-improvement</h3> <p class="skill-desc">Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.</p> <div class="skill-meta"> <div class="stats"> <span>⭐ 3209</span> <span>⬇ 392957</span> </div> <span class="skill-source">AI智能</span> </div> </a> </div> <div class="skillhub-card-related"> <a href="plugin.php?id=hl_skillhub&mod=detail&slug=self-improving-agent-1776282374"> <div class="skill-icon"> <div class="default-icon">s</div> </div> <h3 class="skill-name">self-improvement</h3> <p class="skill-desc">Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.</p> <div class="skill-meta"> <div class="stats"> <span>⭐ 3195</span> <span>⬇ 389589</span> </div> <span class="skill-source">AI智能</span> </div> </a> </div> <div class="skillhub-card-related"> <a href="plugin.php?id=hl_skillhub&mod=detail&slug=self-improving-agent-1776190579"> <div class="skill-icon"> <div class="default-icon">s</div> </div> <h3 class="skill-name">self-improvement</h3> <p class="skill-desc">Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.</p> <div class="skill-meta"> <div class="stats"> <span>⭐ 3177</span> <span>⬇ 386644</span> </div> <span class="skill-source">AI智能</span> </div> </a> </div> </div> </div> </div> </div> <style> .skill-detail { padding: 20px 0; min-height: 100vh; } .breadcrumb { margin-bottom: 20px; color: #666; } .breadcrumb a { color: #155BD5; } .breadcrumb span { margin: 0 5px; } .skill-detail-header { display: flex; gap: 24px; padding: 30px; background: #fff; border-radius: 12px; margin-bottom: 20px; border: 1px solid #e8e8e8; } .skill-icon-large { width: 120px; height: 120px; flex-shrink: 0; } .skill-icon-large img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; } .skill-icon-large .default-icon-large { width: 100%; height: 100%; border-radius: 20px; background: #155BD5; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: bold; } .skill-info { flex: 1; } .skill-header-action { flex-shrink: 0; display: flex; align-items: center; padding-left: 20px; } .header-download-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #155BD5; color: #fff; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s ease; white-space: nowrap; } .header-download-btn:hover { background: #0d4bb5; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(21, 91, 213, 0.3); } .header-download-btn.buy { background: #f97316; } .header-download-btn.buy:hover { background: #ea580c; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); } .skill-info h1 { font-size: 36px; font-weight: 700; color: #1e293b; margin-bottom: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .skill-info h1 .name-cn { font-size: 20px; color: #666; font-weight: 500; background: #f1f5f9; padding: 4px 14px; border-radius: 20px; white-space: nowrap; } .skill-info .skill-desc { font-size: 16px; color: #666; margin-bottom: 8px; } .skill-info .skill-scenarios { font-size: 14px; color: #999; margin-bottom: 10px; } .skill-info .skill-author { font-size: 13px; color: #999; } /* 统计面板 */ .stats-panel { display: flex; align-items: center; background: #fff; border-radius: 12px; padding: 24px 0; margin-bottom: 24px; border: 1px solid #e8e8e8; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .stats-panel .stats-item { flex: 1; text-align: center; padding: 0 16px; } .stats-panel .stats-divider { width: 1px; height: 48px; background: linear-gradient(180deg, transparent, #e8e8e8, transparent); } .stats-panel .stats-icon { width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; background: #f1f5f9; color: #64748b; } .stats-panel .stats-icon.source-icon { background: #e0e7ff; color: #6366f1; } .stats-panel .stats-icon.version-icon { background: #fef3c7; color: #d97706; } .stats-panel .stats-icon.security-icon { background: #fee2e2; color: #9ca3af; } .stats-panel .stats-icon.security-icon.verified { background: #d1fae5; color: #10b981; } .stats-panel .stats-value { font-size: 15px; font-weight: 600; color: #374151; margin-bottom: 4px; } .stats-panel .stats-number { font-size: 24px; font-weight: 700; color: #111827; margin-bottom: 4px; line-height: 1.2; } .stats-panel .stats-label { font-size: 13px; color: #9ca3af; } .stats-panel .stats-item.highlight .stats-label { color: #6b7280; } .skill-tabs { display: flex; gap: 40px; border-bottom: 1px solid #e8e8e8; margin-bottom: 20px; } .skill-tabs .tab-item { padding: 15px 0; color: #666; cursor: pointer; border-bottom: 2px solid transparent; font-size: 16px; } .skill-tabs .tab-item.active { color: #155BD5; border-bottom-color: #155BD5; } .tab-content { background: #fff; border-radius: 12px; padding: 30px; margin-bottom: 20px; border: 1px solid #e8e8e8; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; display: none; } .tab-content.active { opacity: 1; transform: translateY(0); display: block; } .lang-switcher { display: flex; gap: 8px; margin-bottom: 16px; justify-content: flex-end; } .lang-switcher .lang-btn { padding: 4px 16px; border: 1px solid #d1d5db; background: #fff; border-radius: 20px; font-size: 13px; color: #6b7280; cursor: pointer; transition: all 0.2s; } .lang-switcher .lang-btn:hover { border-color: #155BD5; color: #155BD5; } .lang-switcher .lang-btn.active { background: #155BD5; color: #fff; border-color: #155BD5; } .overview-content h3 { margin-bottom: 15px; } /* Markdown 预览样式 */ .markdown-body { line-height: 1.8; color: #333; margin-bottom: 20px; } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; color: #1e293b; } .markdown-body h1 { font-size: 2em; border-bottom: 1px solid #e8e8e8; padding-bottom: 8px; } .markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid #e8e8e8; padding-bottom: 8px; } .markdown-body h3 { font-size: 1.25em; } .markdown-body p { margin-bottom: 16px; } .markdown-body ul, .markdown-body ol { padding-left: 2em; margin-bottom: 16px; } .markdown-body li { margin-bottom: 4px; } .markdown-body code { padding: 2px 6px; background: #f1f5f9; border-radius: 4px; font-family: 'Consolas', monospace; font-size: 0.9em; color: #155BD5; } .markdown-body pre { padding: 16px; background: #1e1e1e; border-radius: 8px; overflow-x: auto; margin-bottom: 16px; } .markdown-body pre code { background: transparent; color: #d4d4d4; padding: 0; } .markdown-body blockquote { padding: 0 1em; border-left: 4px solid #155BD5; color: #666; margin-bottom: 16px; } .markdown-body table { width: 100%; border-collapse: collapse; margin-bottom: 16px; } .markdown-body th, .markdown-body td { padding: 8px 12px; border: 1px solid #e8e8e8; } .markdown-body th { background: #f8f9fa; font-weight: 600; } .markdown-body a { color: #155BD5; text-decoration: none; } .markdown-body a:hover { text-decoration: underline; } .markdown-body img { max-width: 100%; border-radius: 8px; } .overview-content .tags { margin-top: 20px; } .overview-content .tags h4 { margin-bottom: 10px; } .overview-content .tag { display: inline-block; padding: 4px 12px; background: #f0f0f0; border-radius: 4px; margin-right: 8px; margin-bottom: 8px; font-size: 13px; } .install-panel h3 { margin-bottom: 15px; } .platform-list { margin-bottom: 20px; } .platform-tag { display: inline-block; padding: 4px 12px; background: #e3f2fd; color: #1976d2; border-radius: 4px; margin-right: 8px; font-size: 13px; } .install-method { margin-bottom: 25px; } .install-method h4 { margin-bottom: 10px; font-size: 14px; color: #666; } .code-block { position: relative; background: #1e1e1e; border-radius: 8px; padding: 16px 60px 16px 16px; } .code-block code { color: #d4d4d4; font-family: 'Consolas', monospace; font-size: 14px; } .copy-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 4px 12px; background: #333; border: none; border-radius: 4px; color: #fff; cursor: pointer; font-size: 12px; } .copy-btn:hover { background: #444; } .copy-btn.copied { background: #10b981 !important; animation: copyPulse 0.3s ease; } @keyframes copyPulse { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.1); } } .download-btn { display: inline-block; padding: 12px 24px; background: #155BD5; color: #fff; border-radius: 8px; text-decoration: none; font-size: 14px; } .download-btn:hover { background: #0d4bb5; } .download-info { margin-top: 10px; font-size: 13px; color: #999; } .version-list .version-item { padding: 20px 0; border-bottom: 1px solid #e8e8e8; } .version-list .version-item:last-child { border-bottom: none; } .version-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .version-header .version-number { font-size: 18px; font-weight: 600; } .version-header .latest-tag { padding: 2px 8px; background: #e8f5e9; color: #4caf50; border-radius: 4px; font-size: 12px; } .version-header .version-date { margin-left: auto; color: #999; font-size: 13px; } .changelog { color: #666; line-height: 1.6; } /* 相关推荐 */ .related-skills { margin-top: 40px; padding: 24px; background: #fff; border-radius: 12px; border: 1px solid #e8e8e8; } .related-skills h3 { margin-bottom: 20px; font-size: 18px; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 8px; } .related-skills h3:before { content: ''; width: 4px; height: 20px; background: #155BD5; border-radius: 2px; } .skill-list-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .skillhub-card-related { border-radius: 16px; padding: 20px; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.03); } .skillhub-card-related:hover { box-shadow: 0 8px 24px rgba(21, 91, 213, 0.15); transform: translateY(-4px); } .skillhub-card-related:active { transform: scale(0.98); } .skillhub-card-related a { color: inherit; text-decoration: none; } .skillhub-card-related .skill-icon { width: 56px; height: 56px; margin-bottom: 12px; } .skillhub-card-related .skill-icon .default-icon { width: 100%; height: 100%; border-radius: 12px; background: #155BD5; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; } .skillhub-card-related .skill-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #333; } .skillhub-card-related .skill-desc { font-size: 13px; color: #666; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 12px; min-height: 39px; } .skillhub-card-related .skill-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #999; } .skillhub-card-related .skill-meta .stats { display: flex; gap: 12px; } .skillhub-card-related .skill-source { background: #f0f0f0; padding: 2px 10px; border-radius: 12px; font-size: 12px; } @media screen and (max-width: 768px) { .skill-detail-header { flex-direction: column; text-align: center; padding: 24px 20px; } .skill-icon-large { width: 80px; height: 80px; } .skill-icon-large .default-icon-large { font-size: 32px; } .skill-info h1 { font-size: 24px; } .skill-info h1 .name-cn { font-size: 14px; padding: 2px 10px; margin-left: 0; margin-top: 6px; } .skill-header-action { padding-left: 0; padding-top: 16px; width: 100%; justify-content: center; } .header-download-btn { width: 100%; justify-content: center; max-width: 280px; } .stats-panel { flex-wrap: wrap; padding: 16px 0; } .stats-panel .stats-item { flex: 1 1 30%; min-width: 80px; padding: 12px 8px; } .stats-panel .stats-divider { width: 1px; height: 36px; } .stats-panel .stats-icon { width: 32px; height: 32px; font-size: 14px; } .stats-panel .stats-number { font-size: 18px; } .stats-panel .stats-value { font-size: 13px; } .stats-panel .stats-label { font-size: 11px; } .skill-tabs { overflow-x: auto; gap: 24px; -webkit-overflow-scrolling: touch; } .skill-tabs .tab-item { white-space: nowrap; } .code-block { padding: 16px 50px 16px 16px; } .code-block code { font-size: 12px; word-break: break-all; } } /* Paid skill notice */ .paid-notice { text-align: center; padding: 40px 24px; background: linear-gradient(135deg, #fff7ed, #ffedd5); border-radius: 12px; border: 1px solid #fed7aa; } .paid-notice-icon { width: 56px; height: 56px; margin: 0 auto 16px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #f97316; box-shadow: 0 2px 8px rgba(249,115,22,0.15); } .paid-notice h3 { font-size: 20px; color: #9a3412; margin-bottom: 8px; } .paid-notice p { font-size: 14px; color: #c2410c; margin: 4px 0; } .paid-buy-box { padding: 20px; background: #fff7ed; border-radius: 8px; border: 1px solid #fed7aa; margin-bottom: 12px; } .paid-buy-box p { color: #7c2d12; font-size: 15px; margin: 0; }</style> <script> // 复制功能 function copyToClipboard(text, btn) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(function() { showCopied(btn); }).catch(function() { fallbackCopy(text, btn); }); } else { fallbackCopy(text, btn); } } function fallbackCopy(text, btn) { var textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); showCopied(btn); } catch (err) { btn.textContent = '失败'; } document.body.removeChild(textarea); } function showCopied(btn) { var originalText = btn.textContent; btn.textContent = '已复制!'; btn.classList.add('copied'); setTimeout(function() { btn.textContent = originalText; btn.classList.remove('copied'); }, 2000); } // Tab 切换 document.addEventListener('DOMContentLoaded', function() { var tabItems = document.querySelectorAll('.skill-tabs .tab-item'); var tabContents = document.querySelectorAll('.tab-content'); tabItems.forEach(function(item) { item.addEventListener('click', function() { var target = this.getAttribute('data-tab'); var targetContent = document.getElementById('tab-' + target); // 移除所有 active tabItems.forEach(function(t) { t.classList.remove('active'); }); tabContents.forEach(function(c) { c.classList.remove('active'); }); // 添加 active this.classList.add('active'); // 延迟添加动画类,确保过渡效果 setTimeout(function() { targetContent.classList.add('active'); }, 50); window.location.hash = target; }); }); var hash = window.location.hash.replace('#', ''); if (hash) { var targetTab = document.querySelector('.skill-tabs .tab-item[data-tab="' + hash + '"]'); if (targetTab) { targetTab.click(); } } // 中英文描述切换 var langSwitcher = document.getElementById('langSwitcher'); if (langSwitcher) { var descEn = document.querySelector('#markdownContent .desc-en'); var descCn = document.querySelector('#markdownContent .desc-cn'); var toggleBtn = document.getElementById('langToggleBtn'); var currentLang = 'cn'; toggleBtn.addEventListener('click', function() { if (currentLang === 'en') { currentLang = 'cn'; toggleBtn.textContent = 'English'; if (descEn) descEn.style.display = 'none'; if (descCn) descCn.style.display = 'block'; } else { currentLang = 'en'; toggleBtn.textContent = '中文'; if (descCn) descCn.style.display = 'none'; if (descEn) descEn.style.display = 'block'; } }); } }); </script></div> <script src="source/plugin/hl_skillhub/static/js/main.js"></script><div style="height:299px; overflow:hidden" class="cl"> <div class="hl_footer cl"> <div class="hl_fttop cl"> <div class="w1180 cl"> <div class="hl_ftl" style=" position: relative;"> <ul> <li> <div class="hl_h5">闲社论坛</div> <a href="category-43.html" target="_blank">关于我们</a> <a href="/vip/" target="_blank">会员介绍</a> <a href="forum-99-1.html">开通会员</a> <a href="forum-98-1.html" target="_blank">羊毛论坛</a> </li> <li> <div class="hl_h5">闲社论坛</div> <a href="category-43.html" target="_blank">羊毛交流论坛</a> <a href="/vip/" target="_blank">线报讨论社区</a> <a href="forum-99-1.html">优惠分享交流</a> <a href="forum-98-1.html" target="_blank">线报更新服务</a> </li> <li> <div class="hl_h5">网站服务</div> <a href="https://wpa.qq.com/msgrd?v=3&uin=515151560&site=qq&menu=yes" target="_blank" rel="nofollow">会员咨询:515151560</a> <a href="https://wpa.qq.com/msgrd?v=3&uin=515151570&site=qq&menu=yes" target="_blank" rel="nofollow">广告合作:515151570</a> <a href="https://wpa.qq.com/msgrd?v=3&uin=515151580&site=qq&menu=yes" target="_blank" rel="nofollow">投诉建议:515151580</a> <a href="https://wpa.qq.com/msgrd?v=3&uin=515151590&site=qq&menu=yes" target="_blank" rel="nofollow">售后指导:515151590</a> </li> <div class="clear"></div> </ul> <p style="font-size: 16px;color: #fff;width: 370px;text-align: center;margin-top: 5px;position: absolute; left:0px; bottom:0px"> 多链集团旗下-闲社网</p> </div> <div class="hl_ftm"> <div class="hl_h5">闲社网热线 </div> <div class="hl_h2">免费联系电话 </div> <div class="hl_fttel"> 0527-80111111 </div> <h6 class="cl mtm hl_time"><a href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&key=XzkzODA1MTM1NF80NjQ5NDZfNDAwMDgwOTkxMV8yXw" target="_blank" rel="nofollow"><img src="template/xianshe/neoconex/qqline.png"></a>            <a href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&key=XzkzODA1MTM1NF80NjQ5NDZfNDAwMDgwOTkxMV8yXw" target="_blank" rel="nofollow"><img alt="qqline" title="qqline" src="template/xianshe/neoconex/qqline.png"></a></h6> <p class="hl_time">服务时间:周一到周日 8:00-24:00</p> </div> <div class="hl_ftl"> <ul> <li> <div class="hl_h5">公众号</div> <span style="font-size:18px;color: #fff;display: block;">闲社</span> <span style="font-size:18px;color: #fff;">闲社线报社区</span> </li> <div class="clear"></div> </ul> </div> <div class="hl_ftr"> <div class="hl_h5">关注闲社网</div> <div class="hl_guznzhuxx"> <ul> <li> <img alt="wxkf" title="wxkf" src="template/xianshe/neoconex/wxkf.jpg"> <p>闲社在线客服</p> </li> <li> <img alt="wx" title="wx" src="template/xianshe/neoconex/wx.jpg"> <p>关注闲社网微信</p> </li> <li style=" margin-right: 0;"> <img alt="app" title="app" src="template/xianshe/neoconex/app.png"> <p>闲社网APP</p> </li> <div class="clear"></div> </ul> </div> </div> <div class="clear"></div> </div> </div> </div> <div class="hl_ftbottom"> <div class="w1180 cl"> <div class="hl_ftblt"> <p> <a href="archiver/" rel="nofollow">Archiver</a><span>·</span><a href="forum.php?mobile=yes" rel="nofollow">手机版</a><span>·</span><span>闲社网·闲社论坛·羊毛社区· 多链控股集团有限公司</span> <span>·</span> <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP备2025199260号-1</a></p> <p> Powered by <a href="http://www.discuz.net" target="_blank" rel="nofollow">Discuz!</a> <em>X5.0</em>   © 2024-2025 <a href="https://www.xianshe.com/" target="_blank">闲社网·线报更新论坛·羊毛分享社区·http://xianshe.com</a> </p> </div> <div class="hl_ftrgh"> <a id="_pingansec_bottomimagelarge_p2p" rel="nofollow" href="https://kashen.com/d/?z6"><img alt="p2p_official_large" title="p2p_official_large" src="template/xianshe/neoconex/p2p_official_large.jpg" /></a> </div> <div class="clear"></div> </div> </div> </div> <div id="scrolltop"> <span hidefocus="true"><a title="返回顶部" onclick="window.scrollTo('0','0')" class="scrolltopa"><b>返回顶部</b></a></span> </div> <script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); }); checkBlind();</script> </body> </html>