D 实验室网站重构与运营（@bifenglin 牵头）

[will-ww]

根据先前的简单探讨 #295，同时参考 #391 工作的团队搭配，对该任务的分工可以是：

@bifenglin：项目经理，协调相关工作、资源调度、时间进度把握 @HalloMelon：产品经理，从用户体验的角度出发，设计产品的信息架构，交互方式，内容生成流程等工作 @Tenth-crew：研发工程师，负责具体基础设施和网站的搭建与迭代

X-lab 开放实验室的官方网站，和 #391 有着类似的需求，包括：

• 能够在 GitHub 上的仓库中进行多人协作生产内容
• 能够自动将仓库中的内容在前端中进行渲染，作为一个阅读体验良好的在线服务交付
• 能够同时支持 PC 端和移动端
• 能够支持响应式设计与布局

可以参考的技术选型包括：

• GitHub 托管模式：缺点是访问受限、速度较慢
• Docusaurus 模式：参考 https://open-digger.x-lab.info/
• Halo 模式：我们的老朋友 FIT2CLOUD 飞致云旗下的开源项目，参考 https://www.halo.run/

[bifenglin]

最后经过讨论，实验室门户技术选型使用Halo, 简单易操作。数据库使用我们已有的clickhouse数据库，服务器可以使用阿里云服务器。 目前规划 1.实验室概览简介页（要求图文，视频介绍） 2.实验室成果概览页（工业界活动、横向项目，获奖的荣誉, 学术成果） 4.实验室博客文章（论文, 成果，新闻） 6.实验室成员展示页（过往硕博生的去向，行业） 7.实验室招生简章（要求学生的能力，给出新手教程）

这两天@Tenth-crew部署到线上 @HalloMelon 给出实验室概览简介页 实验室成果概览页 初稿 实验室招生简章，实验室成员展示页，实验室成果概览页 @will-ww 有什么材料或者建议 实验室概览简介页可以参照https://github.com/X-lab2017 内容

[HalloMelon]

目前我有的一些想法如下： 导航栏设计

• 我觉得首页导航栏我们可以借鉴 2023开源年报 的形式

• 添加中/英两种模式
• 深/浅色主题采用开关样式
• 由于下图中所圈的三个跳转图标作用不大，因此可以省略，也可采用开源年报导航栏中的展示方式

其他细节

• 首页的模块顺序也可以重排一下：简介（内容可采用xlab在GitHub上的首页信息）、我们做了什么（仓库/项目/发的论文/年会等等）、人员组成
• 看了一下resources和popular topics两个模块，感觉有些多余，是不是可以考虑删去
• 网址上的logo和主页图标logo可以统一用同一张图片
• 在成员展示模块，采用类似DaSE教师名录页面展示方式，左边分类栏，右边是成员具体信息
• 删掉无用的图标等跳转链接
• 修改有误的信息（如contact部分的电话和地址）

[bifenglin]

为了更好的开源协作，将网站选型与数字课本一致，使用mkdocs作为技术栈。 resources和popular topics两个模块是指什么？整体设计有链接么？

[will-ww]

为了更好的开源协作，将网站选型与数字课本一致，使用mkdocs作为技术栈。 resources和popular topics两个模块是指什么？整体设计有链接么？

我觉得可以，这样大家相互之间还可以学习与支持~

[will-ww]

我和 Frank 又商量写下，要不还是选 Docusaurus 模式吧，比较大的原因是，Docusaurus 的文档支持插入 JS 代码、扩展 markdown 格式的内容；实验室后续会发布各种报告，里面需要这类交互式的形态，例如：

• https://open-digger.x-lab.info/en/blog/redis-analysis
• https://codepen.io/frank-zsy/pen/bGjyqQj
• https://codepen.io/frank-zsy/pen/abjMXBV
• 缺乏交互式效果的文章：https://mp.weixin.qq.com/s/ax_Rk_owpNRBkZJ3hoG3iw

供大家参考哈~ @bifenglin

[Tenth-crew]

之前为了更好的进行开源协作选择了 mkdocs 作为技术栈，但是现在的最终方案还没有确定。所以利用 mkdocs 进行了初步的实验室网站构建。如下图所示

[bifenglin]

mkdocs应该支持渲染，我们可以先基于mkdocs把内容丰富起来。 接下来 @HalloMelon 根据内容框架实现相关内容的设计。

[HalloMelon]

好的~我先写个markdown文档，定一下基础内容

[HalloMelon]

我把网站首页以及一些项目以英文方式进行了整理，并修改添加了一些细节。project里可以加一下历届学长学姐的论文、博客之类的，但这个需要后期再收集一下。 home.md projects.md

成员页具体的信息需要 @bifenglin 毕博再看看，我结合了之前网页里的信息，但不能确定有些信息是否仍符合现在的情况。另外，各个成员的外链也需要收集一下。 members.md

[Tenth-crew]

网站的中的 home/about us/project 页面已经完成设置，其中 home 与 project 能够完成中英文切换，目前还缺乏 about us 文件的中文版本，其英文版本为：about.md

目前中英文的切换效果如图所示

[will-ww]

关于实验室网站重构的一些建议：

1、解放思路、放开手脚

本次的网站重构，不是将原来的内容，换一个框架或开源的解决方案。而是迭代出一套开放组织的内容运营解决方案，目前以咱们的 X-lab 开放实验室作为一个落地的尝试。

因此，可以尝试从用户视角出发，进而细化出所需功能，最后到具体栏目和内容的设置。

2、当做一个开源项目来运营

用开源的方式运营开放组织（如 X-lab），就是我们相信的一个最佳实践，因此才有我们前面技术选型中的候选方案。因此，重点需要考虑的是，如何在多人 Git 协同的模式下，进行内容生成的流程，最后所呈现的内容，是次要的方面。

3、基于开源的功能扩展与生态建设

再拔高一步，需要将解决方案和其他开源工具进行集成与整合，例如日历功能、知识库管理功能，这样从 MVP 出发，逐渐发展成一套系统化的解决方案，对一个开源组织的内容运营系统，会有巨大的帮助。

欢迎大家继续交流~

[bifenglin]

我把网站首页以及一些项目以英文方式进行了整理，并修改添加了一些细节。project里可以加一下历届学长学姐的论文、博客之类的，但这个需要后期再收集一下。 home.md projects.md

成员页具体的信息需要 @bifenglin 毕博再看看，我结合了之前网页里的信息，但不能确定有些信息是否仍符合现在的情况。另外，各个成员的外链也需要收集一下。 members.md

以git的形式协作，请在仓库发起一个issue。现在问题是我没找到对应文件地址。所以issue无法引用。 @Tenth-crew

[Tenth-crew]

好的毕博，已经将目前版本的xlab_website上传，仓库地址为：https://github.com/Tenth-crew/xlab_website/tree/master 协作方式可以通过修改 /docs/en/members.md 进行协作。 members.md 文件地址在：https://github.com/Tenth-crew/xlab_website/blob/master/docs/en/members.md

[bifenglin]

可以直接提交PR到https://github.com/X-lab2017/X-lab-website仓库 然后变成main分支，旧版本到一个release分支

[bifenglin]

需要添加README，给出贡献指南，包括了解技术架构和文件架构。 @Tenth-crew

[Tenth-crew]

需要添加README，给出贡献指南，包括了解技术架构和文件架构。 @Tenth-crew

好的，最近会更新

[Tenth-crew]

已添加REAMD并介绍贡献方式：https://github.com/X-lab2017/X-lab2017.github.io/tree/main

需要添加README，给出贡献指南，包括了解技术架构和文件架构。 @Tenth-crew

[will-ww]

该项工作，转到 https://github.com/X-lab2017/open-wonderland/issues/421 中继续开展~