特别有用的玩意儿,Learnku社区文档阅读优化

介绍


由于Dcat Admin和Learnku社区有合作,Dcat将文档迁移到了Learnku社区。

但Learnku社区的文档阅读体验并不太好,主要是习惯性的在文档右侧选择文档节点,但是在Learnku社区的文档节点,只能返回顶部进行选择。非常不方便。

也由于Dcat Admin和Learnku社区有合作,所以不方便把Dcat的文档拿下来再次发布。

所以就做了这个玩意,大家安装后,在Learnku社区观看文档的时候,节点会自动出现在右侧。并且会随着屏幕滚动。

安装


第一步

首先需要安装一个谷歌扩展。扩展地址:
chrome.google.com/webstore/detail/...
理论上目前任何浏览器都支持谷歌扩展。除了老版本的IE。以及火狐。

如果不能打开谷歌应用商店,那你先自己想办法安装一个扩展,叫做 IGG谷歌访问助手,自己去百度搜索。安装这个扩展后,就可以打开谷歌了。

然后点开上面的扩展链接。安装。

第二步

打开learnku.com/ 社区的任何页面。必须打开learnku社区才行。
然后点击浏览器上面的扩展图标,就是上面第一步安装的那玩意儿,点开,然后点最下方的

Find styles for different sites

因为国外网站比较慢,所以等等,等一会就能看到下面这个玩意儿。

果断点开。点安装,如下图

OK了。

然后返回learnku社区。看到顶部扩展图标的地方,有个数字提示,如果看到1,说明安装成功成功了。
如果没看到,就再耐心等等。

这时候,打开learnku社区的任何文档,就能看到下面这个效果了。

用dcat的文档举例。
列的显示和扩展《Dcat Admin 中文文档》

右侧会出现文档节点,并且如果文档节点过多,会出现滚动条方便下拉查看。

彩蛋


对于learnku社区的其他文档,有的是本身不支持节点的,安装这个扩展之后,节点也会出现,比如下面这个:

发行说明《Laravel 8 中文文档》

后续更新


就这么个玩意玩儿,它居然还支持更新。。。
也就是说,你以后可以随着我的更新而更新。更新办法是,点开顶部扩展图标,点管理样式

点检查样式更新,就可以更新了。

当然,你也可以在右侧点击修改。自己DIY样式。

最后


有什么对learnku社区优化的建议,都可以在下面提出来,在不伤害learnku商业利益的情况下,我都会满足你的需求。
点个赞吧。

1月22日更新说明:

去掉了右侧下拉滚动效果。改为固定高度。
右侧节点栏修改位置,改为紧挨中间内容区域。无间距。
中间内容区域调整,适应更小宽度的屏幕。

乌鸦嘴新手社区 wyz.xyz 为技术新手提供服务
本帖已被设为精华帖!
本帖由系统于 3年前 自动加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 15
自由与温暖是遥不可及的梦想

可以 非常棒

3年前 评论
ly560020

:+1:

3年前 评论
Summer

问题已记下

3年前 评论

1月22日更新说明:

去掉了右侧下拉滚动效果。改为固定高度。
右侧节点栏修改位置,改为紧挨中间内容区域。无间距。
中间内容区域调整,适应更小宽度的屏幕。

3年前 评论
no95827 3年前

不错,很多 API 文档都是像你改的这样,比如 https://docusaurus.io/,Material-UI,Bootstrap,Tailwind 等等。

其他的插件,我也装过一个快速跳到英文 Laravel 文档网站的。

3年前 评论

试了一下,感觉没啥用 :sweat_smile:

3年前 评论

有劳了,以前用过一个github readme的插件,功能类似只不过仅限于github

3年前 评论

安装个Smart Toc即可:chrome.google.com/webstore/detail/...

3年前 评论
magicMark 1年前
playmaker

试了一下 无效啊

file

2年前 评论

想知道这个learnku的文档功能是用什么做的

2年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!