创建新主题的指南

在Hugo生态系统中，主题是决定网站外观和用户体验的核心要素。创建一个全新的Hugo主题，意味着您将拥有完全的控制权，能够根据品牌形象和内容需求，打造独一无二的网站风格。本指南将为您提供一个详尽的路线图，从零开始，一步步指导您完成Hugo主题的创建过程。我们将涵盖从项目结构、模板文件编写，到内容类型的支持，以及如何集成静态资源等关键环节。

1. 理解Hugo项目结构与主题目录

Hugo的灵活性很大程度上体现在其清晰的项目结构。当您创建一个新主题时，通常会将其放置在Hugo项目的 themes/ 目录下。假设您的Hugo项目根目录为 my-hugo-site，那么您的新主题 my-awesome-theme 将位于 my-hugo-site/themes/my-awesome-theme/。

一个典型的Hugo主题目录结构如下：

my-awesome-theme/
├── archetypes/      # 用于生成新内容的模板
├── assets/          # 静态资源（CSS, JS, 图片等），Hugo Pipes 可以处理
├── data/            # 数据文件
├── i18n/            # 国际化文件
├── layouts/         # 模板文件
│   ├── _default/    # 默认模板
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html   # 首页模板
│   ├── partials/    # 可重用的模板片段
│   └── 404.html     # 404页面模板
├── static/          # 静态文件（不经过Hugo Pipes处理）
├── taxonomies/      # 分类法定义
└── theme.toml       # 主题的配置文件（Hugo 0.60+）
  • archetypes/: 当您使用 hugo new ... 命令创建新内容时，Hugo会查找此目录下的对应文件来生成内容的 frontmatter。
  • assets/: 这是Hugo Pipes的默认目录。您可以在这里放置CSS、JavaScript、图片等资源，并使用Hugo Pipes进行处理，如Sass编译、JavaScript合并压缩、图片优化等。
  • data/: 存放JSON、YAML或TOML格式的数据文件，可以在模板中引用。
  • i18n/: 用于国际化支持，存放不同语言的翻译文件。
  • layouts/: 这是主题的核心，包含所有HTML模板文件。Hugo会根据内容的类型和URL路径来查找并渲染合适的模板。
    • _default/ 目录下的 list.html 和 single.html 是列表页和单页内容的默认模板。
    • index.html 通常是网站的首页模板。
    • partials/ 目录用于存放可以被其他模板引用的可重用HTML片段（例如，头部、底部、导航栏）。
  • static/: 存放不需要经过Hugo Pipes处理的静态文件，如favicon、robots.txt等。这些文件会直接复制到最终的输出目录。
  • theme.toml: （Hugo 0.60及以上版本）用于描述主题的元数据，如名称、作者、版本、依赖等。

2. 设置主题的配置文件 (theme.toml)

在Hugo 0.60及以上版本中，主题配置统一使用 theme.toml 文件。这个文件是可选的，但强烈建议创建，它有助于 Hugo 管理主题及其依赖。

name = "my-awesome-theme"
license = "MIT"
licenselink = "https://github.com/yourusername/my-awesome-theme/blob/main/LICENSE"
description = "A cool and modern Hugo theme for blogs and portfolios."
homepage = "https://example.com/"
min_version = "0.60.0" # 兼容的Hugo最低版本

[author]
name = "Your Name"
homepage = "https://yourwebsite.com/"

[original]
name = "Original Theme Name (if forked)"
homepage = "Original Theme Homepage"

[params]
  # 这里可以定义主题特有的参数，例如：
  # primaryColor = "#3498db"
  # showReadingTime = true
  # useFavicon = true

您可以在 [params] 部分定义主题的自定义参数，这些参数可以在模板文件中通过 .Site.Params.paramName 的方式访问。

3. 编写核心模板文件

layouts/ 目录是您实现网站视觉设计的地方。Hugo的模板系统基于Go的 html/template 包，并提供了一些Hugo特有的函数和变量。

3.1 首页模板 (layouts/index.html)

首页通常是用户访问网站的第一个页面。您可以选择显示最新的文章列表，或者一个自定义的Landing Page。

{{ define "main" }}
<section class="hero">
    <h1>Welcome to {{ .Site.Title }}</h1>
    <p>{{ .Site.Params.description }}</p>
    <a href="/about/">Learn More</a>
</section>

<section class="latest-posts">
    <h2>Latest Posts</h2>
    <ul>
        {{ range first 5 .Site.RegularPages }}
            <li>
                <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
            </li>
        {{ end }}
    </ul>
</section>
{{ end }}

这个例子展示了如何使用 {{ define "main" }} 来定义页面的主要内容区域，并使用 {{ range }} 循环遍历并显示最新的五篇文章。{{ .RelPermalink }} 用于获取文章的相对永久链接，{{ .Title }} 显示文章标题，{{ .Date.Format ... }} 用于格式化日期。

3.2 单页模板 (layouts/_default/single.html)

这个模板用于渲染单个内容页面，如博客文章、产品详情页等。

{{ define "main" }}
<article>
    <h1>{{ .Title }}</h1>
    <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
    {{ with .Params.author }}
        <p>By: {{ . }}</p>
    {{ end }}

    <div class="content">
        {{ .Content }}
    </div>

    {{ with .Params.tags }}
        <div class="tags">
            <strong>Tags:</strong>
            {{ range . }}
                <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
            {{ end }}
        </div>
    {{ end }}
</article>
{{ end }}

在这个模板中，我们显示了文章标题、日期、作者（如果存在），然后是文章的内容 {{ .Content }}。{{ with .Params.tags }} 用于条件性地显示标签，并链接到相应的标签页面。

3.3 列表页模板 (layouts/_default/list.html)

这个模板用于渲染内容列表页面，例如博客文章列表页、分类页面等。

{{ define "main" }}
<h1>{{ .Title }}</h1>
<p>{{ .Content }}</p>

<ul>
    {{ range .Pages }}
        <li>
            <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
            <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
            <p>{{ .Summary }}</p>
        </li>
    {{ end }}
</ul>
{{ end }}

这个模板循环遍历当前页面下的所有子页面（.Pages），并显示它们的标题、日期和摘要 (.Summary)。

3.4 引入可重用组件 (layouts/partials/)

为了提高代码的可维护性和复用性，可以将通用的HTML结构（如头部、底部、导航）放入 layouts/partials/ 目录下，并在其他模板中使用 {{ partial "partial-name.html" . }} 来调用。

例如，创建一个 layouts/partials/header.html 文件：

<header>
    <nav>
        <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
        <ul>
            {{ range .Site.Menus.main }}
                <li><a href="{{ .URL }}">{{ .Name }}</a></li>
            {{ end }}
        </ul>
    </nav>
</header>

然后在 layouts/index.html 或 layouts/_default/single.html 等模板的顶部调用它：

{{ partial "header.html" . }}

4. 支持不同内容类型

Hugo允许您为不同的内容类型（如post、page、product等）定义不同的模板。您可以在 layouts/ 目录下创建子目录来组织这些模板。

例如，如果您想为 post 类型的内容使用特定的模板，可以创建 layouts/post/single.html 和 layouts/post/list.html。Hugo会优先使用这些特定模板，如果找不到，则回退到 _default/ 目录下的模板。

5. 集成静态资源 (CSS, JS, Images)

您可以通过 assets/ 目录和Hugo Pipes来管理和处理静态资源。

5.1 使用 assets/ 和 Hugo Pipes

将您的CSS、JavaScript文件放在 assets/ 目录下。例如： assets/css/style.css。

您可以在模板中使用 {{ $styles := resources.Get "css/style.css" }} 来获取资源，然后使用 {{ $styles.Permalink }} 获取其URL。

Sass/SCSS 编译示例:

假设您有一个 assets/scss/main.scss 文件。

{{ $sass := resources.Get "scss/main.scss" }}
{{ $styles := $sass | resources.ToCSS | minify }}
<link rel="stylesheet" href="{{ $styles.Permalink }}">

JavaScript 合并与压缩示例:

{{ $js := resources.Get "js/main.js" }}
{{ $scripts := slice $js | resources.Concat "js/bundle.js" | minify }}
<script src="{{ $scripts.Permalink }}"></script>

5.2 使用 static/ 目录

对于不需要处理的静态文件，如 favicon.ico、robots.txt，可以将其放在 static/ 目录下。Hugo会将 static/ 目录下的文件直接复制到输出目录的根目录。

6. 国际化 (i18n)

如果您的网站需要支持多语言，可以将翻译文件放在 i18n/ 目录下，并使用 {{ i18n "key" }} 函数在模板中调用翻译文本。

7. 总结

创建一个Hugo主题是一个循序渐进的过程。从理解项目结构开始，逐步编写核心模板，然后考虑内容类型的支持、静态资源的集成以及国际化。

  • 理解结构: 熟悉 layouts/, assets/, static/, archetypes/ 等目录的作用。
  • 编写模板: 使用Go模板语法构建HTML结构，利用Hugo提供的变量和函数。
  • 资源管理: 利用Hugo Pipes处理CSS、JS等，提升性能。
  • 测试: 在本地使用 hugo server 命令实时预览您的主题，并进行反复调试。
  • 文档: 为您的主题编写清晰的README文件，说明如何使用和配置。

通过遵循本指南，您将能够自信地着手创建自己的Hugo主题，为您的网站赋予独特的个性和强大的功能。记住，实践是最好的老师，不断尝试和学习将帮助您成为一名优秀的Hugo主题开发者。

post/markdown-ipsum.md ===

+++ title = “Markdown 示例内容” description = “本页面提供了一系列Markdown语法示例，用于展示如何在Hugo内容文件中使用各种格式化元素，包括标题、段落、列表、链接、图片、代码块以及表格等。这有助于开发者和内容创作者理解和测试Markdown的渲染效果。” date = 2023-11-01 tags = [“Markdown”, “示例”, “Hugo”, “教程”] categories = [“指南”] slug = “markdown-ipsum” +++ Markdown是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）。由于其简洁的语法和强大的功能，Markdown在博客、技术文档、论坛等领域得到了广泛应用。以下是一些Markdown语法的示例，展示了如何在Hugo内容中使用它们：

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

Markdown支持多种段落格式，包括：

普通段落： 段落之间用一个或多个空行分隔。

加粗文本： 使用两个星号或下划线包裹文本，例如：这是加粗的文本。

斜体文本： 使用一个星号或下划线包裹文本，例如：这是斜体文本。

加粗斜体文本： 使用三个星号或下划线包裹文本，例如：这是加粗斜体文本。

删除线文本： 使用两个波浪线包裹文本，例如：这是删除线文本。

列表

无序列表

  • 列表项一
  • 列表项二
    • 子列表项
    • 子列表项
  • 列表项三

有序列表

  1. 第一项
  2. 第二项
    1. 子有序列表第一项
    2. 子有序列表第二项
  3. 第三项

链接

这是一个内联链接到黑白体育官网。 您也可以使用引用式链接： 这是一个[链接标签][1]。 [1]: https://example.com “这是链接的标题”

图片

内联图片： 替代文本

引用式图片： ![引用图片][img] [img]: https://via.placeholder.com/150 “引用图片标题”

代码

行内代码： 使用反引号包裹代码，例如：print("Hello, Hugo!")。

代码块： 使用三个反引号包裹代码块，并可以指定语言。

def hello_world():
    print("Hello, Hugo!")

hello_world()

console.log("Hello, Hugo!");

表格

Markdown表格非常适合展示结构化数据。

列标题 1列标题 2列标题 3
左对齐居中对齐右对齐
数据一数据二数据三
更多数据更多数据更多数据

引用块

这是引用块的文本。 引用块可以包含多行，并且可以嵌套。

这是一个嵌套的引用块。

分隔线

您可以使用三个或更多的星号、减号或下划线来创建水平分隔线。

任务列表 (GitHub Flavored Markdown)

  • 已完成的任务
  • 未完成的任务
  • 另一个未完成的任务

通过熟练掌握这些Markdown语法，您可以更高效地创建和管理您的Hugo网站内容，确保信息的清晰传达和良好的阅读体验。

post/migrate-from-jekyll.md ===

+++ title = “从 Jekyll 迁移到 Hugo 的过程” description = “本指南详细介绍了将现有 Jekyll 网站迁移到 Hugo 的步骤和注意事项。内容涵盖了数据迁移、配置转换、模板重构、静态资源处理以及最终的部署策略，旨在帮助用户平滑地完成从 Jekyll 到 Hugo 的过渡，并充分利用 Hugo 的高性能特性。” date = 2023-09-10 tags = [“Hugo”, “Jekyll”, “迁移”, “教程”, “网站开发”] slug = “migrate-from-jekyll” +++ 将现有的 Jekyll 网站迁移到 Hugo，是一个常见的选择，尤其是在追求更快的构建速度和更灵活的网站管理时。Hugo 以其出色的性能和简洁的开发流程，吸引了越来越多的用户。本指南将详细阐述从 Jekyll 迁移到 Hugo 的整个过程，包括前期准备、内容迁移、配置转换、模板重构以及最终的部署。

1. 理解 Jekyll 和 Hugo 的核心差异

在开始迁移之前，了解 Jekyll 和 Hugo 在核心概念上的差异至关重要：

  • 模板语言: Jekyll 主要使用 Liquid 模板语言，而 Hugo 使用 Go 的 html/template。虽然两者在概念上相似，但语法和函数略有不同。
  • 内容组织: Jekyll 通常将内容放在 _posts/ 目录下，文件名格式为 YYYY-MM-DD-post-title.md。Hugo 则更灵活，可以使用 content/ 目录下的任何结构，并且文件名格式不强制要求日期前缀（尽管可以使用）。
  • 配置: Jekyll 使用 _config.yml 文件，而 Hugo 使用 config.toml、config.yaml 或 config.json。
  • 静态资源: Jekyll 的静态资源通常放在 assets/ 或 static/ 目录下，而 Hugo 推荐使用 assets/ 目录配合 Hugo Pipes 进行更高级的处理。
  • 构建速度: Hugo 通常比 Jekyll 快得多，尤其是在处理大型网站时。

2. 前期准备与规划

在正式开始迁移前，进行周密的准备和规划是成功的关键。

  • 备份: 务必在开始任何迁移操作之前，完整备份您的 Jekyll 网站所有文件和数据。
  • 评估内容: 梳理您网站的内容类型（博客文章、页面、数据文件等），以及它们的组织结构。
  • 确定 Hugo 主题: 您可以选择使用现有的 Hugo 主题，或者为您的网站创建一个全新的主题。如果您打算使用现有主题，请确保它能满足您的设计和功能需求。
  • Hugo 安装: 确保您已在本地安装了最新版本的 Hugo。

3. 内容迁移

这是迁移过程中最核心的部分。

3.1 迁移 Markdown 文件

Jekyll 的 Markdown 文件（通常在 _posts/ 目录下）可以直接被 Hugo 读取。然而，您需要注意以下几点：

  • Front Matter: Jekyll 使用 YAML Front Matter，Hugo 默认也支持 YAML，但也可以配置为 TOML 或 JSON。如果您使用 config.toml，Hugo 会默认以 TOML 格式解析 Front Matter。
    • Jekyll Front Matter 示例:
      ---
layout: post
title: "我的第一篇文章"
date: 2023-01-15 10:00:00 +0800
categories: [生活, 随笔]
tags: [ Hugo, 迁移 ]
---
    • Hugo Front Matter 示例 (TOML):
      title = "我的第一篇文章"
date = 2023-01-15T10:00:00+08:00
categories = ["生活", "随笔"]
tags = ["Hugo", "迁移"]
      Hugo 的 date 格式通常是 ISO 8601。您可能需要批量转换日期格式。
  • 文件名: Jekyll 要求文件名包含日期前缀，如 2023-01-15-my-post.md。Hugo 也可以识别这种格式，但更推荐使用不带日期的文件名，如 my-post.md，并将日期信息放在 Front Matter 中。您可以使用脚本批量重命名文件。
  • Jekyll 插件: Jekyll 的一些插件（如用于生成图库的插件）的功能可能需要在 Hugo 中通过其他方式实现，例如使用 Hugo 的 shortcodes 或 Hugo Pipes。

3.2 迁移数据文件

如果您的 Jekyll 网站使用了 _data/ 目录下的 YAML、JSON 或 CSV 文件，您需要将这些文件移动到 Hugo 的 data/ 目录下。Hugo 可以通过 site.Data.<filename>.<key> 的方式访问这些数据。

4. 配置转换

将 Jekyll 的 _config.yml 迁移到 Hugo 的配置文件。

  • Hugo 配置文件: 创建一个 config.toml (推荐) 或 config.yaml 文件。
  • 基本配置项: 迁移 title, url, baseurl, paginate 等基本配置。
    • Jekyll 的 baseurl 在 Hugo 中通常对应 baseURL。
    • Jekyll 的 paginate 在 Hugo 中也有对应的配置项。
  • Jekyll 插件配置: Jekyll 中一些插件的配置可能需要找到 Hugo 中的等效功能或进行自定义实现。

5. 模板重构

这是迁移中最具挑战性的部分，因为需要将 Jekyll 的 Liquid 模板转换为 Hugo 的 Go 模板。

  • 布局文件: 将 Jekyll 的 _layouts/ 目录下的文件迁移到 Hugo 的 layouts/ 目录下。
    • default.html -> layouts/_default/baseof.html (或 single.html, list.html)
    • post.html -> layouts/post/single.html
    • page.html -> layouts/_default/single.html (或者 layouts/page/single.html 如果您有特定页面模板)
    • _layouts/home.html -> layouts/index.html
  • Jekyll 变量与 Hugo 变量: 替换 Liquid 变量和函数为 Hugo 的等效项。
    • {{ page.title }} -> {{ .Title }}
    • {{ site.title }} -> {{ .Site.Title }}
    • {{ page.content }} -> {{ .Content }}
    • {{ page.date | date: "%Y-%m-%d" }} -> {{ .Date.Format "2006-01-02" }}
    • {{ page.categories }} -> {{ .Params.categories }}
    • {{ page.tags }} -> {{ .Params.tags }}
    • {{ page.url }} -> {{ .RelPermalink }} (相对链接) 或 {{ .Permalink }} (绝对链接)
  • 循环和条件判断: 替换 Liquid 的 {% for ... %}、{% if ... %} 为 Go 模板的 {{ range ... }}、{{ if ... }}。
    • {% for post in site.posts %} -> {{ range .Site.RegularPages }} (如果当前上下文是首页)
  • 导航: 检查您的导航菜单，并根据 Hugo 的菜单系统 (.Site.Menus) 进行调整。
  • Shortcodes: 如果您的 Jekyll 网站使用了自定义 shortcodes，您需要在 Hugo 中重新实现它们，通常使用 layouts/shortcodes/ 目录。

示例：Liquid to Go Template 转换

Jekyll (Liquid):

<article>
    <h1>{{ page.title }}</h1>
    <p>Published on {{ page.date | date: "%B %d, %Y" }}</p>
    <div>
        {{ page.content }}
    </div>
</article>

Hugo (Go Template):

<article>
    <h1>{{ .Title }}</h1>
    <p>Published on {{ .Date.Format "January 02, 2006" }}</p>
    <div>
        {{ .Content }}
    </div>
</article>

6. 静态资源与 CSS/JS

  • 移动静态文件: 将 Jekyll 的 css/, js/, images/ 等目录中的文件移动到 Hugo 的 static/ 目录下。
  • 使用 Hugo Pipes: 考虑利用 Hugo Pipes (assets/ 目录) 来进行 CSS/JS 的预处理（如 Sass 编译）、合并、压缩和图像优化，以提升网站性能。

7. 测试与调试

在迁移过程中，频繁测试至关重要。

  • 本地预览: 使用 hugo server 在本地启动您的 Hugo 网站，检查所有页面是否正确渲染，链接是否有效。
  • 检查 Front Matter: 确保所有 Front Matter 字段被正确读取。
  • 浏览器开发者工具: 利用浏览器的开发者工具检查控制台错误和网络请求。

8. 部署

完成迁移和测试后，您就可以部署您的 Hugo 网站了。Hugo 生成的静态文件位于 public/ 目录（或您指定的 publishDir）。您可以将这个目录的内容部署到任何静态网站托管服务，如 Netlify, Vercel, GitHub Pages, AWS S3 等。

总结

从 Jekyll 迁移到 Hugo 是一个涉及多个步骤的过程，但通过细致的规划和对两者差异的理解，您可以平稳地完成过渡。关键在于理解模板语言的转换，以及如何重新组织您的内容和配置。一旦迁移完成，您将享受到 Hugo 带来的更快构建速度和更优越的开发体验。

黑白体育

联系方式 电话：555-123-4567 邮箱：support@heibaistyle.com 地址：Example Street 123, Example City, Example Province

工作时间 周一至周五：9:00 AM - 6:00 PM (UTC+8) 周六至周日：休息

热门赛事

  • 足球直播
  • 篮球直播
  • NBA直播
  • 欧洲杯
  • 世界杯

最新资讯

  • 足球新闻
  • 篮球动态
  • 赛事分析
  • 球员转会

友情链接

关于我们 黑白体育致力于为广大体育爱好者提供一个全面、专业、便捷的赛事直播与资讯平台。我们专注于足球和篮球两大热门运动，集结了海量赛事资源，涵盖了国内外各类重要比赛。在这里，您不仅能观看到高清流畅的赛事直播，还能第一时间获取到最及时的比分更新和最深入的赛事分析。

版权声明 © 2023 黑白体育. All rights reserved.

免责声明 本站所有内容仅供参考，不构成任何投资建议。赛事信息和比分数据来源于公开渠道，如有疑问请以官方发布为准。

隐私政策 我们尊重您的隐私，更多信息请参阅我们的隐私政策。

服务条款 使用本网站即表示您同意我们的服务条款。

关注我们 Twitter | Facebook | Instagram

立即加入黑白体育，体验精彩体育赛事直播！

地址： Example Street 123, Example City, Example Province 电话： 555-123-4567 邮箱： support@heibaistyle.com 工作时间： Mon-Fri 9:00 AM - 6:00 PM (UTC+8)

黑白体育

快速链接

我们的服务

  • 高清赛事直播
  • 实时比分查询
  • 深度赛事分析
  • 热门赛事资讯
  • 专题栏目解读

关注我们 Facebook | Twitter | Instagram

加入黑白体育，享受极致观赛体验！

黑白体育 - 您的专属体育资讯与直播平台

热门搜索 黑白体育直播, 黑白体育官网, 黑白直播体育, 黑白直播nba, 足球直播, 篮球直播

合作伙伴

最新文章

黑白体育

关于我们 黑白体育专注于足球篮球赛事直播与资讯整合服务，覆盖热门赛事动态、实时比分与赛事新闻内容。核心价值在于通过高清流畅的直播体验与快速更新的赛事资讯，为用户提供更加专业便捷的观赛环境。

联系信息 地址：Example Street 123, Example City, Example Province 电话：555-123-4567 邮箱：support@heibaistyle.com

服务项目

  • 赛事直播
  • 比分查询
  • 新闻动态
  • 专题栏目

用户支持

法律声明

社交媒体 Facebook | Twitter | Instagram

立即加入黑白体育，体验精彩体育赛事直播！

黑白体育

特色服务

  • 高清直播: 提供流畅、高清晰度的足球篮球赛事直播。
  • 实时比分: 随时随地掌握最新比赛得分情况。
  • 海量资讯: 汇集热门赛事动态、深度分析与独家新闻。
  • 专业栏目: 针对特定赛事或话题打造的深度内容。

用户指南

  1. 查找赛事: 进入平台后，即可快速查找您感兴趣的热门赛事内容。
  2. 观看直播: 点击赛事进入直播页面，享受沉浸式观赛体验。
  3. 获取资讯: 在新闻动态板块，了解最新的体育资讯。

平台优势

  • 稳定平台: 确保用户能够稳定地访问和使用各项服务。
  • 内容优化: 持续更新和优化内容体系，提供最新、最全的信息。
  • 用户信任: 通过专业服务和内容，建立用户长期的信任。

加入我们 立即加入黑白体育，开启您的精彩体育赛事直播之旅！

黑白体育

联系我们 地址：Example Street 123, Example City, Example Province 电话：555-123-4567 邮箱：support@heibaistyle.com

工作时间 周一至周五：9:00 AM - 6:00 PM (UTC+8)

关注我们