使用Vue编写的Deepin在线桌面

更新时间:2021-08-26 13:20:45

今天在逛GitHub时发现了一个使用vue编写的deepin在线桌面,忍不住打开看了看效果,简直太美妙了。

演示地址: Deepin (goodmanwen.github.io)

figure.png


这是一个web驱动的仿写Deepin桌面UI的博客工具,设计上完全依托于Github Pages开源部署,
你可以用来提供一个你的个人博客或者用来当做个人简历。

这个项目产生于偶然,恰好由于近期需要整理一个博客做项目展示。作者在论坛看到Ubuntu的
同类版本,但由于该作品是由react编写,我不熟悉react,所以想要迁移一个vue的同类版本,
所以有了本项目。

打算要做一个项目的话,首先面临的是要实现哪个系统的问题。由于大家最喜欢的Ubuntu已经
有人完成,重新实现轮子没有什么意义,另外作者本人以前也曾见过MacOS的类似版本,而
Windows由于多年耕耘,模仿其动画细节的成本似乎过大。Linux发行版虽然丰富,但摆在我们
面前的选择似乎并不多,日常使用的红帽系发行版似乎并不专注于桌面体验,实现意义并不大。
剩下的广泛被接受的发行版似乎还剩Manjaro, Fedora, 以及一些所谓的Gaming ready distro。
最后我还是选择了Deepin,虽然没有用过,但也算是久闻大名,项目放在Github上供全世界的
vue开发者参考,也算是为国产做宣传了吧。

快速开始

git clone https://github.com/GoodManWEN/GoodManWEN.github.io.git
cd GoodManWEN.github.io.git
npm install
npm run serve


如果你的npm和vue-cli版本合适的话,这样应该足够令程序跑起来,项目使用的版本你可以在下文和package.json中找到参考。

如果你希望修改博客内容,那么你应该直接修改/blog目录中的内容,该目录中所有.md内容都会被直接映射到网站中。

修改后执行以下命令生成静态文件。

python3 generate.py
npm run build

由于修改了vue-cli的默认设置,静态文件生成在/docs目录中。

这个项目和同类桌面比有何不同之处?

主要集中在本项目实现了更完善的窗口系统,你可以像正常操作系统一样随意创建多个窗口、移动、缩放他们的大小,以及自如管理他们的显式排序关系。实现了一个简易的递归目录系统所以你可以用来将整个文件夹映射出去作为你的博客。另外附赠一个玩具terminal。

我该如何更新我的博客?

如果你的博客是fork自本项目并且完全由Github Pages提供服务,那么您徐只要修改/blog目录的内容后提交commit即可,静态文件编译和分发将由Actions自动在后台完成。

如果你的博客直接fork自本项目,那么你需要检查你的Actions是否全部正确执行。据我所知在fork项目时某些actions会默认关闭自动执行,直到再次手动开启。

我该如何修改音乐播放器?

这个项目实现了一个简易的音乐播放器,基于vue-aplayer,如果你需要修改歌单,请修改public目录下的musics.json文件,参照指定格式配置即可。由于版权政策,在默认版本里我没有提供音乐的来源地址,你可以自定配置分发策略并在指定位置粘贴音乐的访问链接即可。

按照默认设置,如果你的音乐的封面都来自于自身分发(非第三方分发),那么封面的存放目录是/public/musiccovers

博客功能的进一步说明

为了实现基础的博客功能,一个典型需求是您希望将文章链接发布在第三方平台,使用户可以通过链接直接定位到您的文章。为了实现该效果,请遵循以下路由规则构建链接

   https://{{域名}}/#/desktop/post/{{文件名}}.md

   如:
   https://GoodManWEN.github.io/#/desktop/post/README.md

具体逻辑层面,程序将递归搜索并返回第一个文件树中文件名与需求值匹配的项。这意味着如果您有多个文件名相同,但分置于不同目录的文件,程序只能返回其中的一个而忽略其他。您无需在意文件名中的空格问题,他们将被自动转义。

如果没有匹配到结果,将显示一篇404文章。

有关文章识别规则,识别逻辑为,程序将文章的# 开头行识别为标题,而其后的非标点符号开头的第一行将被识别为摘要。


该项目作者本人与Deepin官方没有任何关系,纯粹由于兴趣爱好和宣传国产系统的目的编写,不以项目的任何形式盈利为目的。 如果您对Deepin感兴趣,请访问官方网站。


deepin