前言前段时间打算给自己的开源项目做一个首页。涉及的资源是整合的。其实原来的项目已经有了一个文档主页,比较简单,大致是这样的:其实看着还可以吧?这是通过docsify完成的。Docsify是一个优秀的文档生成工具。使用起来相对简单。你只需要编写内容的markdown文件即可。支持markdown的大部分语法,也扩展了一些语法显示效果。但是我觉得docsify虽然在构建文档方面还不错,但是在构建项目主页方面就有点寒酸了。首先它的定位是一个文档工具,其次主题样式不够丰富,页面的定制化也比较差,就这么套路。我对静态建站工具有几个要求主题丰富,美观简洁。毕竟项目首页是一个项目的门面,好看是非常重要的。搭建简单,我尽量只关注内容部分,因为毕竟我对前端不精通,不想为了搭建而去学习很多前端知识一个主页。主页要结构合理,有大项目主页的既视感。页面定制性强,不能雷同。它可以最大限度地整合资源和多级目录。静态网站生成工具我将目前常见的静态网站生成工具与这些需求进行了比较。最后,我决定在Hexo、VuePress和Docusaurus中做出选择。仔细比较功能点后,我最终选择了Docusaurus,因为……它看起来不错。当然外观是很重要的一环,第二个原因是Hexo是个烂大街,个人认为不太适合做开源项目的首页。虽然VuePress也很好,中文支持也很好,但是我对Vue不是太精通,所以选择放弃。Docusaurus是Facebook开源的静态站点生成框架。它比较新,在中国可能很多人还不知道。但是Facebook的许多新的开源项目网站现在都在使用Docusaurus。这是Docusaurus的官方主页:Docusaurus是基于React构建的。基本上可以满足我对项目首页的要求,定制化程度比较高。缺点是文档的中文支持不是很好。Docusaurus1虽然建了中文站,但是文档只翻译了一部分,没有全部翻译。Docusaurus2全是英文文档。但耐心阅读,应该很容易弄清楚该怎么做。建首页的过程就不废话了。先放上我用Docusaurus搭建后的首页最终效果和链接供大家观察:项目首页链接为:http://bryan31.gitee.io/tlog-...是不是坏的?像那样的东西?既然大家都点好了,欢迎在gitee&github上帮我star这个开源项目。接下来,我将描述构建主页的过程。Docusaurus需要预装node.js和yarn,要求node.js版本10.15.1及以上,yarn版本1.5及以上。可以通过脚手架创建一个初始项目站点:npx@docusaurus/init@nextinitmy-websiteclassic创建完成后,进入你的项目,运行yarnrunstart,在浏览器中输入127.0.0.1:3000,可以看到如下内容初始化站点:当然,我在脚手架创建的站点上并没有改,我是在官网的显示站点中选择一个站点,然后下载他们的源码,编译启动。然后根据它进行更改。总的来说,Docusaurus的配置还是比较简单的,首页的定制化程度也比较高。如果你精通react,就可以玩出很酷的花样。如果你对react不精通,也可以根据别人的源码进行修改,达到类似的效果。具体配置文档可以参考Docusaurus的中文站点:https://www.docusaurus.cn/这里的文档部分有中文翻译。剩下的工作就是编辑markdown。Docusaurus对markdown的特性做了很多扩展,这是我最喜欢的部分。使用这些扩展,您可以编辑漂亮的文档。我最喜欢的markdown扩展功能有:Tab:Docusaurus支持在文档中嵌入tab标签,具体作用:Highlightblock:Docusaurus扩展了markdown的语法,可以根据重要性在文档中显示不同颜色的Highlightblock,具体效果:代码高亮行:相信很多人都用过markdown中的代码块,很方便,还可以根据代码上色。但是如果你想高亮某几行代码,怎么办呢?markdown的默认语法是不可能的。Docusaurus扩展了这个特性,效果如下:如果有多行,也可以这样定义:{1,4-6,11},这样第1行,第4到6行,第11行就会都被突出显示。除了以上三个我比较喜欢的功能,Docusaurus还提供了非常详细的扩展,相信这些对你都有用。关于项目主页我的开源项目主页主要配色是黑金色,所以我对css的配色做了一些改动,尽量保持整体统一,包括icon颜色,logo颜色,图片文档中的配色方案,都是统一的。因此,建议在首页建设初期就选择配色。更多的颜色不一定看起来舒服。简单统一是更好的选择。有朋友问:你的Logo是哪里来的,是你自己设计的吗?我不做平面设计,这种工作应该由专业人士来完成。这个标志设计花费了数百。我觉得一个开源项目也应该传达自己的品牌信息。所以这是值得的。关于开源项目TLog是一个新的开源项目。目前是我开源项目中一个专注于维护和迭代的项目。它主要致力于在分布式环境中跟踪日志。它小巧易用,社区也很活跃。在过去一个月的开源中,我收到了很多人的反馈,并听取了这些反馈进行迭代和新特性的开发。TLog未来的蓝图是做日志领域集采集、跟踪、统计、分析、展示为一体的日志中间件。
