134: OpenIM WebSite 设计

开始

最近 OpenIM 的文档问题很多，于是我考虑了很久，沉下心来，好好的把 OpenIM 的文档重新设计一遍。

选择主题：

git clone https://github.com//google/docsy themes/docsy --depth=1

开始之前：

开始之前需要安装：npm, git, go

注意：hugo 需要下载带有 extended 的：

https://github.com/gohugoio/hugo/releases

❯ wget https://ghproxy.com/https://github.com/gohugoio/hugo/releases/download/v0.118.2/hugo_extended_0.118.2_linux-amd64.tar.gz
❯ tar -zxvf hugo_extended_0.118.2_linux-amd64.tar.gz
❯ mv hugo /usr/bin
❯ hugo version
hugo v0.118.2-da7983ac4b94d97d776d7c2405040de97e95c03d+extended linux/amd64 BuildDate=2023-08-31T11:23:51Z VendorInfo=gohugoio

必要的依赖安装：

❯ npm install -D autoprefixer
❯ npm install -D postcss-cli

从postcss-cli版本8开始，你还必须单独安装postcss:

❯ npm install -D postcss

OpenIM 站点结构设计

站点的地址：https://openim.io
代码仓库的地址：https://github.com/openim/website

OpenIM 是一个开源的社区，和传统的官方网站有所区别，对网站的要求更高，不管是文档的质量，以及代码的要求要更加的严格。我参考 Kubernetes 的官方社区网站 http://kubernetes.io/open in new window 为 OpenIM 提供了一些设计技巧。

OpenIM 的遗留问题

文档优化的 issue：https://github.com/openimsdk/open-im-server/issues/384

自从脚本目录重构后，文档成为了 OpenIM 存在的问题。

接口文档不够自动化，没有及时更新，可信度问题。
部署文档远远落后，出现部署报错问题
OpenIM 社区文档少之又少，非常不利于开发者上手，贡献者贡献。
OpenIM 的社区文档难以向国际化、专业化迈出脚步。
OpenIM 文档的文档仓库不规范，缺乏文档 README，难以上手，没有自动化功能。
OpenIM 的文档和各个仓库的紧密度不高，开发者开发代码，难以关注文档。
缺乏其他语言的文档，文档的架构设计不是特别好。
没有一套专业的流程（贡献，策略，方法指南）

模块设计

我为 OpenIM 设计了最主要的几个模块：

Blog: OpenIM 的博客（一些最新的博客，一些精选的文章）
Docs：OpenIM 的体系文档
Community：OpenIM 的社区生态（周会，周边，线下交流…)

重要的设计细节

考虑长期的维护力度以及参与度，我对整个 OpenIM 的站点设计有着很高的要求：

用户界面 (UI)：
- 颜色方案： 主色调采用深蓝色，代表技术与稳重，配合灰色或白色作为辅助色，以保持简洁和专业感。
- 响应式设计： 适配各种屏幕大小，确保无论是桌面，平板还是手机，用户体验都是一致的。
- 用户导航： 顶部导航栏清晰地展示“Blog”、“Docs”和“Community”三大模块，方便用户快速访问。
Blog 模块：
- 特色文章： 在首页或博客主页面展示最新和精选的文章，以吸引用户关注。
- 分类与标签： 方便用户按兴趣或主题进行浏览。
- 评论功能： 用户可以在每篇文章下方留下评论，以促进交流和反馈。
Docs 模块：
- 分层结构： 文档应分为“入门”，“高级”和“API 参考”等级别，帮助不同水平的用户找到合适的内容。
- 搜索功能： 允许用户快速查找相关的文档内容。
- 版本管理： 随着 OpenIM 的版本更新，文档也应有版本控制，方便用户查找到相应版本的文档。
Community 模块：
- 活动日历： 显示即将到来的双周会、线下交流等活动日期和细节。
- 会员展示： 展示活跃的社区成员或贡献者，以鼓励更多人参与。
- 资源链接： 提供与 OpenIM 相关的工具、插件和其他资源的链接。
其他考虑：
- 多语言支持： 考虑到 OpenIM 可能是国际性的社区，提供多语言支持会增加其受众范围。
- 访问速度： 确保网站加载速度快，为此可以采用 CDN、代码优化等技术。
- 安全性： 保护用户数据和网站内容不被恶意攻击或滥用，例如使用 HTTPS 和定期进行安全审查。

文档自动化与同步管理方案

文档分流与设计

对于一个大型项目或多个项目的整合，文档的管理和组织是至关重要的。通过对文档的分流，我们可以有效地为不同的目标读者提供所需的信息：

文档抽象层设计: 对于文档结构，我们进行了大量的设计工作，以确保每个部分都有明确的目的和读者。
- Community: 社区交流和参与的指南和资料。
- Blog: 更新日志、新功能介绍以及相关文章。
- Docs: 技术文档、API参考、安装与配置指南等。

自动化文档生成与部署

自动化是实现高效文档管理的关键。我们提供了一套工具和流程，使文档的生成和部署变得简单：

自动化工具: 在Mac和Linux环境中，我们使用make和gendocs工具，对部分文档进行自动化生成。
- 示例: 使用以下命令可以自动生成多国家的markdown文档及其基础模板。
```
make new-post POST_NAME="openim-offline-deployment-design"
```
测试与部署: 利用GitHub actions对文档进行测试，并记录测试报告。此外，我们还设计了DevOps工作流，确保文档的质量和更新的准确性。
- 一旦文档通过测试，我们使用GitHub actions将其部署，并与netlify同步。netlify会自动完成其部署，从而生成相应的网页。
- 值得一提的是，https://netlify.app/在国内通过插件加速，保证了访问速度。

文档双向同步方案

在多仓库管理中，文档的双向同步是个挑战。我们设计了以下方案，以简化此过程：

Webhook链接: 通过webhook，我们链接了GitHub openim/website的各个目录与各个子仓库（例如openim-server, openim-chat）。
- 当在这些子仓库中对markdown文档进行修改时，这些更改会自动同步到website仓库中。这消除了手动维护和同步的需求，大大提高了效率。

总之，本方案为文档管理、自动化部署和双向同步提供了完整的指南和工具。这不仅确保了文档的质量和准确性，还大大提高了团队的生产效率。

英文的模块设计稿

Module Design

I have designed the key modules for OpenIM:

Blog: OpenIM's official blog, showcasing the latest posts and handpicked articles.
Docs: Comprehensive documentation for the OpenIM ecosystem.
Community: The vibrant community ecosystem of OpenIM, including biweekly meetings, affiliate events, and face-to-face interactions.

Critical Design Details

With a vision for long-term sustainability and community engagement, I hold the OpenIM site's design to the highest standards:

User Interface (UI):
- Color Scheme: Deep blue is chosen as the primary hue, signifying technology and reliability, complemented by shades of grey or white for a clean and professional aesthetic.
- Responsive Design: Optimized for various screen sizes, ensuring a consistent user experience across desktops, tablets, and mobile devices.
- User Navigation: A clear top navigation bar showcasing the three main modules: “Blog,” “Docs,” and “Community,” enabling swift user access.
Blog Module:
- Featured Posts: The homepage or main blog page prominently displays the newest and curated articles to engage visitors.
- Categories and Tags: Facilitates content discovery based on user interests or themes.
- Comment Functionality: Users can provide feedback and engage in discussions beneath each post.
Docs Module:
- Layered Structure: Documentation is categorized into levels like "Beginner," "Advanced," and "API Reference," catering to users of varying expertise.
- Search Capability: Empowers users to swiftly locate pertinent documentation.
- Version Control: As OpenIM evolves, its documentation incorporates version management for users to find relevant document editions.
Community Module:
- Event Calendar: Provides insights into upcoming biweekly meetings, offline interactions, and other event details.
- Member Showcase: Highlights active community participants or contributors to foster greater involvement.
- Resource Links: Curates links to tools, plugins, and other resources pertinent to OpenIM.
Other Considerations:
- Multilingual Support: Given OpenIM's potential global reach, offering multiple languages broadens its audience scope.
- Access Speed: A commitment to swift website loading times using technologies like CDN and code optimization.
- Security: Ensuring protection against malicious attacks or misuse by employing HTTPS and periodic security reviews.

Documentation Automation & Synchronization Strategy

Document Segmentation & Design

For consolidating vast projects, managing and organizing documents is paramount. By segmenting the content, we effectively cater to diverse reader profiles:

Document Abstraction Layers:
Significant design efforts ensure each section serves a distinct purpose and audience.
- Community: Guidelines and resources for community engagement.
- Blog: Changelogs, feature introspections, and relevant articles.
- Docs: Technical documents, API references, installation, and configuration guides.

Automated Document Generation & Deployment

Automation is the cornerstone of efficient documentation management. We've instituted tools and workflows to simplify document creation and deployment:

Automation Tools: On Mac and Linux platforms, we employ make and gendocs to automate certain documentation processes.
- Example: The following command auto-generates multilingual markdown documents and their foundational templates.
```
make new-post POST_NAME="openim-offline-deployment-design"
```
Testing & Deployment: GitHub actions test the documents, generating test reports. Additionally, a DevOps workflow ensures documentation accuracy and relevance.
- Upon passing tests, GitHub actions deploy these, synchronizing with Netlify. Netlify then completes the deployment, rendering the corresponding web pages.
- Notably, https://netlify.app/ leverages plugins for accelerated access in regions like China.

Bidirectional Document Synchronization Strategy

In multi-repository management, bidirectional document synchronization is challenging. We've devised the following solution to streamline this process:

Webhook Integration:
Webhooks link the directories of
```
GitHub openim/website
```
with sub-repositories like openim-server and openim-chat :
- Modifications made to markdown documents in these sub-repositories automatically reflect in the website repository, eliminating manual maintenance and synchronization, thereby enhancing efficiency.

In summary, this strategy offers a comprehensive guide and toolset for document management, automated deployment, and bidirectional synchronization. This not only guarantees document precision and quality but also significantly elevates the team's productivity.

添加内容

替代站点结构：

默认情况下，您的网站有一个主页（使用 _default 布局）， /docs/ 下的文档部分， /blog/ 下的博客部分和 /community/ 下的社区部分。每个节的类型（决定了它使用的布局）与其目录名相匹配。

在某些情况下，您可能想要有不同的目录结构，但仍然使用 Docsy 的布局。一个常见的示例是“Dosc site”，其中大多数页面（包括主页）都使用 docs 布局，或者您可能更希望使用/news/博客布局处理目录。

对于该/news/部分，您可以在索引页中指定以下前言，这会将该部分及其下面的所有内容的类型更改为“blog”：

---
title: "Latest News"
linkTitle: "News"
menu:
  main:
    weight: 30

cascade:
  - type: "blog"
---

如果您想创建一个“Doc”网站，在顶层指定类似以下内容_index.md会将所有顶层部分设置为“文档”，“新闻”除外：

---
title: "My Wonderful Site"

cascade:
  - type: "blog"
    toc_root: true
    _target:
    path: "/news/**"
  - type: "docs"
    _target:
    path: "/**"
---

注意这里添加toc_root。将某个部分设置为 true 会使其被视为网站的单独部分，并具有自己的左侧导航菜单。

风格

We don’t mandate any particular style for your page contents. However, if you’d like some guidance on how to write and format clear, concise technical documentation, we recommend the Google Developer Documentation Style Guideopen in new window, particularly the Style Guide Highlightsopen in new window.

文档开头

文档开头的部分被称为“front matter”。这部分用于定义文章或页面的元数据。Hugo 支持几种不同的 front matter 格式，包括 YAML、TOML 和 JSON。

使用 +++ 是 TOML 格式的标识。
使用 --- 是 YAML 格式的标识。

front matter 支持很多类型：

title: 文章或页面的标题。
description: 文章或页面的简短描述。
date: 文章或页面的发布日期。
lastmod: 文章或页面的最后修改日期。
draft: 如果设置为 true，该文章或页面将被视为草稿，不会在生成的网站中显示。
slug: 自定义的URL片段，代替自动生成的URL。
aliases: 为内容设置其他URL，通常用于重定向。
tags: 与内容相关的标签列表。
categories: 与内容相关的分类列表。
author: 文章或页面的作者。
layout: 指定内容的特定布局（如果有的话）。
type: 内容的类型（例如 "post", "page" 等）。
weight: 在列表中的排序权重。数字越小，内容在列表中的位置越高。
featured_image: 文章或页面的特色图像。
expiryDate: 内容的过期日期。在此日期后，内容将不再公开显示。
series: 将内容链接到一个系列。
url: 手动指定该页面的URL。

您需要提供的最少标题是标题（title）：其他一切都取决于您

添加文档和博客文章

您最常用的模板可能是 docs 模板（如本页所用）或非常相似的 blog 模板。这两个模板包括：

左导航
GitHub链接（从您的站点配置填充），供读者编辑页面或创建问 issue
页面菜单

以及所有站点页面使用的公共页眉和页脚。应用哪个模板取决于您是将内容添加到 blog 还是 docs 内容目录。您可以在导航和搜索中找到有关如何创建导航和页面菜单的更多信息。

管理和组织文档

虽然Docsy的顶级部分允许您为不同类型的内容创建站点部分，但您可能还希望在 docs 部分中组织文档内容。例如，此站点的 docs 部分目录有多个子目录，分别用于“入门”、“内容”和“自定义”等。每个子目录都有一个 _index.md （也可以是一个 _index.html ），它充当一个章节索引页面，并告诉Hugo相关目录是文档的一个子章节。

Docsy的 docs 布局为您提供了一个左侧导航窗格，其中包含一个基于您的 docs 文件结构自动生成的嵌套菜单。 docs/ 目录中的每个独立页面或子部分 _index.md 或 _index.html 页面使用来自页面或索引的链接名称和 weight 元数据获得顶级菜单项。

要将文档添加到子部分，只需将页面文件添加到相关子目录。除了子部分索引页之外，您添加到子部分的任何页面都将显示在子菜单中（请向左查看运行中的子菜单！），再次按页码 weight 排序。在导航和搜索中了解有关添加Docsy导航元数据的更多信息

文档部分登录页

默认情况下，文档部分的登录页（部分目录中的 _index.md 或 _index.html ）使用的布局会将格式化的链接列表添加到部分中的页面，并带有它们的frontmatter描述。此站点中的“内容和自定义”登录页就是一个很好的例子。

要显示指向该部分页面的简单项目符号链接列表，请在登录页的frontmatter中指定 simple_list: true ：

---
title: "Simple List Page"
simple_list: true
weight: 20
---

要完全不显示链接，请在登录页的frontmatter中指定 no_list: true ：

---
title: "No List Page"
no_list: true
weight: 20
---

组织和管理 blog 页面

Docsy的 blog 布局也为你提供了一个左侧导航菜单（就像 docs 布局一样），以及一个应用于 /blog/_index.md 的列表类型的博客索引页面，并自动以倒序时间顺序显示你最近所有帖子的片段。

要创建不同的博客类别来组织您的帖子，请在 blog/ 中创建子文件夹。例如，在我们的示例站点中，我们有 news 和 releases 。每个类别都需要有自己的 _index.md 或 _index.html 登陆页面文件，指定类别标题，以便在左侧导航和顶级博客登陆页面中正确显示。以下是 releases 的索引页：

---
title: "New Releases"
linkTitle: "Releases"
weight: 20
---

若要向博客文章添加作者和日期信息，请将其添加到页面frontmatter：

---
date: 2018-10-06
title: "Easy documentation with Docsy"
linkTitle: "Announcing Docsy"
description: "The Docsy Hugo theme lets project maintainers and contributors focus on content, not on reinventing a website infrastructure from scratch"
author: Riona MacNamara
resources:
  - src: "**.{png,jpg}"
    title: "Image #:counter"
    params:
    byline: "Photo: Riona MacNamara / CC-BY-CA"
---

如果你已经复制了示例站点，并且你不想要一个博客部分，或者想链接到一个外部博客，只需删除 blog 子目录。

添加 community 页面

community 登录页模板具有样板内容，这些内容会自动填充 hugo.toml / hugo.yaml / hugo.json 中指定的项目名称和社区链接，为您的用户提供指向资源的快速链接，以帮助他们参与您的项目。默认情况下，相同的链接也会添加到您的网站页脚。

params:
  links:
    user:
      - name: User mailing list
        url: 'https://example.org/mail'
        icon: fa fa-envelope
        desc: Discussion and help from your fellow users
      - name: Twitter
        url: 'https://example.org/twitter'
        icon: fab fa-twitter
        desc: Follow us on Twitter to get the latest news!
      - name: Stack Overflow
        url: 'https://example.org/stack'
        icon: fab fa-stack-overflow
        desc: Practical questions and curated answers
    developer:
      - name: GitHub
        url: 'https://github.com/google/docsy'
        icon: fab fa-github
        desc: Development takes place here!
      - name: Slack
        url: 'https://example.org/slack'
        icon: fab fa-slack
        desc: Chat with other project developers
      - name: Developer mailing list
        url: 'https://example.org/mail'
        icon: fa fa-envelope
        desc: Discuss development issues around the project

如果您正在创建自己的网站并希望使用此模板添加页面，请在内容根目录中添加 /community/_index.md 文件。如果你已经复制了示例站点，并且不想要社区页面，只需删除项目存储库中的 /content/en/community/ 目录。

添加静态的资源内容

您可能希望在您的网站上提供一些非Hugo构建的内容：例如，如果您使用Doxygen、Javadoc或其他文档生成工具生成了参考文档。

要添加要“按原样”提供的静态内容，只需将内容作为文件夹和/或文件添加到站点的 static 目录中。部署站点时，此目录中的内容将在站点根路径上提供。因此，例如，如果您在 /static/reference/cpp/ 添加了内容，用户可以在 http://{server-url}/reference/cpp/ 访问该内容，并且您可以从 /reference/cpp/{file name} 的其他页面链接到此目录中的页面。

RSS feeds

默认情况下，Hugo将为主页和任何部分创建RSS提要。对于主RSS提要，您可以通过在 hugo.toml / hugo.yaml / hugo.json 中设置站点参数来控制要包含的部分。这是默认配置：

rss_sections:
  - blog

要禁用所有RSS源，请将以下内容添加到您的 hugo.toml / hugo.yaml / hugo.json ：

disableKinds:
  - RSS

Sitemap

默认情况下，Hugo会为您生成的站点创建一个 sitemap.xml 文件：例如，这里是这个站点的站点地图。

您可以在 hugo.toml / hugo.yaml / hugo.json 中配置站点地图的更新频率、站点地图文件名和默认页面优先级：

sitemap:
  changefreq: monthly
  filename: sitemap.xml
  priority: 0.5

比如说我的 blog 的站点地图：https://nsddd.top/sitemap.xml

要为给定页面覆盖这些值中的任何一个，请在页面frontmatter中指定它：

---
title: "Adding Content"
linkTitle: "Adding Content"
weight: 1
description: >
  Add different types of content to your Docsy site.  
sitemap:
  priority: 1.0
---

外观

默认情况下，使用Docsy的站点具有主题的默认字体、颜色和一般外观。

但是，如果你想要自己的配色方案（你很可能会！）你可以很容易地用你自己的项目特定值覆盖主题默认值- Hugo会在寻找建立网站的信息时首先查看你的项目文件。

由于Docsy使用Bootstrap 4和SCSS进行样式化，您可以在其特殊的SCSS项目变量文件中覆盖单个值（例如项目颜色和字体），或者通过创建自己的样式来进行更严格的定制。

Docsy还提供了样式化代码块的选项，使用Chroma或Prism进行高亮显示。

Project style files

要自定义项目的外观，请创建您自己的以下Docsy占位符文件之一或两个版本（注意 _project.scss 后缀）：

assets/scss/_variables_project.scss 用于添加主题变量（如站点颜色）的项目特定定义，以及您想要设置的任何其他Bootstrap变量值。您可以在 assets/scss/_variables.scss 中找到Docsy主题变量及其默认值的列表。有关其他Bootstrap 4变量的信息，请参阅变量默认值和Bootstrap的 v4-dev/scss/_variables.scss 文件。
assets/scss/ _styles_project.scss 是您可以添加自己的自定义SCSS样式的地方，包括覆盖Docsy主题SCSS文件中的任何样式。

PostCSS（CSS浏览器前缀的自动修复）在服务器模式下运行时不会启用（有点慢），因此Chrome是开发的推荐选择。

Site colors

要自定义站点的颜色，请将SCSS变量覆盖添加到 assets/scss/_variables_project.scss 。例如，可以按以下方式设置主站点颜色和辅助站点颜色：

$primary: #390040;
$secondary: #A23B72;

默认情况下，该主题具有渐变背景（ $enable-gradients ）和阴影（ $enable-shadows ）等功能。也可以通过将变量设置为 false 在项目变量文件中切换这些变量。

Fonts

主题使用 Open Sansopen in new window 作为其主要字体。要禁用Google字体并使用系统字体，请在 assets/scss/_variables_project.scss 中设置此SCSS变量：

$td-enable-google-fonts: false;

要配置另一个Google Font：

$google_font_name: "Open Sans";
$google_font_family: "Open+Sans:300,300i,400,400i,700,700i";

请注意，如果您决定使用具有不同权重的字体（在内置配置中，这是 300 （浅色）， 400 （中等）和 700 （粗体）），您还需要调整与权重相关的变量，即：从 $font-weight- 开始的变量。

CSS utilities

有关可用CSS实用程序类的文档，请参阅Bootstrap文档。这一主题本身在这方面的贡献很少。然而，我们添加了一些颜色状态CSS类，这些类在动态环境中可能很有用：

.-bg-<color>
.-text-<color>

<color> 的值可以是颜色名称 primary 、 white 、 dark 、 warning 、 light 、 success 、 300 、 blue 、 orange 等中的任一个。

使用 .-bg-<color> 时，文本颜色将被调整以获得适当的对比度：

<div class="-bg-primary p-3 display-4">Background: Primary</div>
<div class="-bg-200 p-3 display-4">Background: Gray 200</div>

使用色度高亮显示代码

使用Hugo 0.60及更高版本，您可以使用默认应用于您的围栏代码块的色度从一系列代码块高亮和颜色样式中进行选择。如果你复制了最近的 hugo.toml ，你的网站使用Tango（像这个网站），否则Hugo默认为Monokai。您可以使用您的 hugo.toml / hugo.yaml / hugo.json 切换到任何可用的Chroma样式（包括Docsy默认Tango）：

markup:
  goldmark:
    renderer:
      unsafe: true
  highlight:
    style: tango

默认情况下，代码高亮显示样式不会应用于没有指定语言的代码块，相反，您会得到Docsy默认的灰色和黑色文本样式。

如果您希望代码突出显示样式应用于所有代码块（即使没有语言），请在您的 hugo.toml / hugo.yaml / hugo.json 中的 [markup.highlight] 下取消注释或添加以下行。

guessSyntax: true

如果您使用的Docsy版本高于 0.6.0 ，代码块会在右上角显示一个“复制到剪贴板”图标。要禁用此功能，请在配置文件中将 disable_click2copy_chroma 设置为 true ：

您可以在Hugo中找到有关代码高亮显示的更多信息，并在语法高亮显示中使用色度。

常见问题

Can I use the latest Hugo version on Netlify?

Yes you can! Read this.

I get "this feature is not available in your current Hugo version"

If you process SCSS or SASS to CSS in your Hugo project, you need the Hugo extended version, or else you may see this error message:

error: failed to transform resource: TOCSS: failed to transform "scss/main.scss" (text/x-scss): this feature is not available in your current Hugo version

We release two set of binaries for technical reasons. The extended is what you get by default, as an example, when you run brew install hugo on macOS. On the release pageopen in new window, look for archives with extended in the name.

To confirm, run hugo version and look for the word extended.

Can I use the latest Hugo version on Netlify?

这个标题问的是：“我可以在 Netlify 上使用最新的 Hugo 版本吗？”

答案是：“当然可以！”并为读者提供了一个链接，以供查看如何在 Netlify 上配置 Hugo 的版本。

I get "this feature is not available in your current Hugo version"

这个标题描述了一个用户可能遇到的问题：“我得到了'在您当前的 Hugo 版本中，此功能不可用'这样的消息。”

文本接下来解释了产生这个问题的原因：如果你在 Hugo 项目中将 SCSS 或 SASS 处理为 CSS，那么你需要 Hugo 的 extended（扩展）版本，否则你可能会看到这个错误信息。

接着给出了一个错误信息的示例，这条错误信息说明在尝试转换 SCSS 文件时出现了问题，因为当前的 Hugo 版本不支持这个特性。

接着，文本解释了 Hugo 为何会发布两种版本的二进制文件，并提到了如何在 macOS 上通过 brew 工具安装 Hugo 扩展版本。要确定是否已经安装了扩展版本，用户可以运行 hugo version 并检查输出信息中是否有 “extended” 这个词。

最后，提供了 Hugo 的官方发布页面链接，用户可以在那里找到并下载带有 extended 标识的版本。

参考

Docsy theme examples

Example sites that have low to no customization:

Site	Repo
This Docsy documentation siteopen in new window	https://github.com/google/docsy
“Goldydocs” - a Docsy example siteopen in new window	https://github.com/google/docsy-example
https://www.kubeflow.org/	https://github.com/kubeflow/website
https://agones.dev/site/	https://github.com/googleforgames/agones/tree/main/site
https://googlecontainertools.github.io/kpt/	https://github.com/GoogleContainerTools/kpt/tree/main/docs
Navidrome Music Serveropen in new window	https://github.com/navidrome/website
https://docs.agilebase.co.uk/	https://github.com/okohll/abdocs
https://jvmperf.net/	https://github.com/cchesser/java-perf-workshop
gRPCopen in new window	https://github.com/grpc/grpc.io
tekton.devopen in new window	https://github.com/tektoncd
fluxcd.ioopen in new window	https://github.com/fluxcd/website
Graphvizopen in new window	https://gitlab.com/graphviz/graphviz.gitlab.io
Cloudpodsopen in new window	https://github.com/yunionio/docs
Seleniumopen in new window	https://github.com/SeleniumHQ/seleniumhq.github.io
fission.ioopen in new window	https://github.com/fission/fission.io
Stroomopen in new window	https://github.com/gchq/stroom-docs
OpenTelemetryopen in new window	https://github.com/open-telemetry/opentelemetry.io
CloudWeGoopen in new window	https://github.com/cloudwego/cloudwego.github.io
etcdopen in new window	https://github.com/etcd-io/website
protobuf.devopen in new window	https://github.com/protocolbuffers/protocolbuffers.github.io

Customized Docsy examples

Example sites that include a moderate to high amount of customization:

Site	Repo
Apache Airflowopen in new window	https://github.com/apache/airflow-site/
Docsy Mostly Docsopen in new window	https://github.com/gwatts/mostlydocs/
Kubernetesopen in new window	https://github.com/kubernetes/website
XLTopen in new window	https://github.com/Xceptance/xlt-documentation
Dapropen in new window	https://github.com/dapr/docs

# 134: OpenIM WebSite 设计

# 开始

# OpenIM 站点结构设计

# OpenIM 的遗留问题

# 模块设计

# 重要的设计细节

# 文档自动化与同步管理方案

# 文档分流与设计

# 自动化文档生成与部署

# 文档双向同步方案

# 英文的模块设计稿

# Module Design

# Critical Design Details

# Documentation Automation & Synchronization Strategy

# Document Segmentation & Design

# Automated Document Generation & Deployment

# Bidirectional Document Synchronization Strategy

# 添加内容

# 风格

# 文档开头

# 添加文档和博客文章

# 管理和组织文档

# 文档部分登录页

# 组织和管理 blog 页面

# 添加 community 页面

# 添加静态的资源内容

# RSS feeds

# Sitemap

# 外观

# Project style files

# Site colors

# Fonts

# CSS utilities

# 使用色度高亮显示代码

# 常见问题

# Can I use the latest Hugo version on Netlify?

# I get "this feature is not available in your current Hugo version"

# Can I use the latest Hugo version on Netlify?

# I get "this feature is not available in your current Hugo version"

# 参考

# Docsy theme examples

# Customized Docsy examples

134: OpenIM WebSite 设计

开始

OpenIM 站点结构设计

OpenIM 的遗留问题

模块设计

重要的设计细节

文档自动化与同步管理方案

文档分流与设计

自动化文档生成与部署

文档双向同步方案

英文的模块设计稿

Module Design

Critical Design Details

Documentation Automation & Synchronization Strategy

Document Segmentation & Design

Automated Document Generation & Deployment

Bidirectional Document Synchronization Strategy

添加内容

风格

文档开头

添加文档和博客文章

管理和组织文档

文档部分登录页

组织和管理 blog 页面

添加 community 页面

添加静态的资源内容

RSS feeds

Sitemap

外观

Project style files

Site colors

Fonts

CSS utilities

使用色度高亮显示代码

常见问题

Can I use the latest Hugo version on Netlify?

I get "this feature is not available in your current Hugo version"

Can I use the latest Hugo version on Netlify?

I get "this feature is not available in your current Hugo version"

参考

Docsy theme examples

Customized Docsy examples