D 实验室网站重构与运营（@bifenglin 牵头）
Closed this issue · 18 comments
根据先前的简单探讨 #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/
最后经过讨论，实验室门户技术选型使用Halo, 简单易操作。数据库使用我们已有的clickhouse数据库，服务器可以使用阿里云服务器。
目前规划
1.实验室概览简介页（要求图文，视频介绍）
2.实验室成果概览页（工业界活动、横向项目，获奖的荣誉, 学术成果）
4.实验室博客文章（论文, 成果，新闻）
6.实验室成员展示页（过往硕博生的去向，行业）
7.实验室招生简章（要求学生的能力，给出新手教程）
这两天@Tenth-crew部署到线上
@HalloMelon 给出实验室概览简介页 实验室成果概览页 初稿
实验室招生简章，实验室成员展示页，实验室成果概览页 @will-ww 有什么材料或者建议
实验室概览简介页可以参照https://github.com/X-lab2017 内容
目前我有的一些想法如下：
导航栏设计
- 我觉得首页导航栏我们可以借鉴 2023开源年报 的形式
- 添加中/英两种模式
- 深/浅色主题采用开关样式
- 由于下图中所圈的三个跳转图标作用不大，因此可以省略，也可采用开源年报导航栏中的展示方式
其他细节
- 首页的模块顺序也可以重排一下：简介（内容可采用xlab在GitHub上的首页信息）、我们做了什么（仓库/项目/发的论文/年会等等）、人员组成
- 看了一下resources和popular topics两个模块，感觉有些多余，是不是可以考虑删去
- 网址上的logo和主页图标logo可以统一用同一张图片
- 在成员展示模块，采用类似DaSE教师名录页面展示方式，左边分类栏，右边是成员具体信息
- 删掉无用的图标等跳转链接
- 修改有误的信息（如contact部分的电话和地址）
为了更好的开源协作，将网站选型与数字课本一致，使用mkdocs作为技术栈。
resources和popular topics两个模块是指什么？整体设计有链接么？
为了更好的开源协作，将网站选型与数字课本一致，使用mkdocs作为技术栈。 resources和popular topics两个模块是指什么？整体设计有链接么？
我觉得可以，这样大家相互之间还可以学习与支持~
我和 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
之前为了更好的进行开源协作选择了 mkdocs 作为技术栈，但是现在的最终方案还没有确定。所以利用 mkdocs 进行了初步的实验室网站构建。如下图所示
mkdocs应该支持渲染，我们可以先基于mkdocs把内容丰富起来。
接下来 @HalloMelon 根据内容框架实现相关内容的设计。
好的~我先写个markdown文档，定一下基础内容
我把网站首页以及一些项目以英文方式进行了整理，并修改添加了一些细节。project里可以加一下历届学长学姐的论文、博客之类的，但这个需要后期再收集一下。
home.md
projects.md
成员页具体的信息需要 @bifenglin 毕博再看看，我结合了之前网页里的信息，但不能确定有些信息是否仍符合现在的情况。另外，各个成员的外链也需要收集一下。
members.md
网站的中的 home/about us/project 页面已经完成设置，其中 home 与 project 能够完成中英文切换，目前还缺乏 about us 文件的中文版本，其英文版本为：about.md
目前中英文的切换效果如图所示
关于实验室网站重构的一些建议：
1、解放思路、放开手脚
本次的网站重构，不是将原来的内容，换一个框架或开源的解决方案。而是迭代出一套开放组织的内容运营解决方案，目前以咱们的 X-lab 开放实验室作为一个落地的尝试。
因此，可以尝试从用户视角出发，进而细化出所需功能，最后到具体栏目和内容的设置。
2、当做一个开源项目来运营
用开源的方式运营开放组织（如 X-lab），就是我们相信的一个最佳实践，因此才有我们前面技术选型中的候选方案。因此，重点需要考虑的是，如何在多人 Git 协同的模式下，进行内容生成的流程，最后所呈现的内容，是次要的方面。
3、基于开源的功能扩展与生态建设
再拔高一步，需要将解决方案和其他开源工具进行集成与整合，例如日历功能、知识库管理功能，这样从 MVP 出发，逐渐发展成一套系统化的解决方案，对一个开源组织的内容运营系统，会有巨大的帮助。
欢迎大家继续交流~
我把网站首页以及一些项目以英文方式进行了整理，并修改添加了一些细节。project里可以加一下历届学长学姐的论文、博客之类的，但这个需要后期再收集一下。 home.md projects.md
成员页具体的信息需要 @bifenglin 毕博再看看，我结合了之前网页里的信息，但不能确定有些信息是否仍符合现在的情况。另外，各个成员的外链也需要收集一下。 members.md
以git的形式协作，请在仓库发起一个issue。现在问题是我没找到对应文件地址。所以issue无法引用。 @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
可以直接提交PR到https://github.com/X-lab2017/X-lab-website仓库
然后变成main分支，旧版本到一个release分支
需要添加README，给出贡献指南，包括了解技术架构和文件架构。 @Tenth-crew
需要添加README，给出贡献指南，包括了解技术架构和文件架构。 @Tenth-crew
好的，最近会更新
已添加REAMD并介绍贡献方式：https://github.com/X-lab2017/X-lab2017.github.io/tree/main
需要添加README，给出贡献指南，包括了解技术架构和文件架构。 @Tenth-crew