网页设计个人导航页 第1篇
可能除了基本的bookmark外，你还想有：
在无意之中发现Dashy后，详细研究了一下它的文档，打造了如下的一个Dashboard，用于展示它的一些能力：
以上页面除了一些标准的链接外，还集成了uptime-kuma，从中获取一些状态探测的数据。集成了glances提供的数据，可实时看到机器的各种数据。集成了grafana的图表，方便利用现有的视图。另外，因Dashy支持多pages，这块也测试了一下，可以看到上图右上角有子页面。
如何做到这些，下文我将一一道来，有一些坑或小技巧，或许能帮你减少几小时折腾时间。
网页设计个人导航页 第2篇
官方的Widget中提到未来可能会有Prometheus相关Widgets，也可能会有API Response，可惜当前都没支持。
但正如前文所说，iframe已经提供了很多可能性了。
术业有专攻，如果你想找个Widget实现各种类型的探测，你仔细看后发现只有简单的一些http探测，想DNS，ping等都是比较困难的，但这事uptime-kuma就很擅长呀：） 见下图：
我个人用它监控几年了，感觉UI和功能都还不错。我们可以将它整合到你的Dashboard来，可以一目了然的看到关键信息。为此我们可以为dashy定制一个状态页面，隐藏掉一些标题或不必要的内容，让内嵌页面呈现比较干净。可以在定制页面时，在“自定义CSS”中设置如下：
具体要隐藏哪些组件，可以借助浏览器的开发者工具，查看到相关不想要的地方的css，将其display: none;即可。会看到类似这样比较干净的页面:
然后我们就可以尝试在dashy中通过iframe引用它了。
结果你发现还是不行，内嵌的页面中提示“连接拒绝”。查看这里可以看到：
By default, Uptime Kuma is not allowed in iframe if the domain name is not the same as the parent. It protects your Uptime Kuma to be a phishing website. If you don't need this protection, you can set it to true.
只要给你的uptime-kuma添加环境变量，类似如下：
这样即可正确的将uptime-kuma集成进去啦。
Dashy有不少widgets基于glances，glances是一个很棒的资源监控面版，它还有一个web UI。在Ubuntu中应该借助包管理器安装即可，如果你想监控你的群晖等类似系统，也可以借助容器来部署glances服务。可以参考这篇文章[9]：
然后你就可以使用这些组件：
作为一个非常通用的标准，整合grafana是一个很有用的场景。为了将grafana中的视图整合进来，我们要解决两个问题。一个是类似uptime-kuma一样的，默认都是不允许embed的，需要设置GF_SECURITY_ALLOW_EMBEDDING为true才可以。同时，一般情况下我们grafana会要求鉴权，我们要设置可匿名访问。这块修改的目标是里的一些设置。如果你和我一样是使用helm部署prometheus和grafana的话，以下是参考的几个配置：
网页设计个人导航页 第3篇
homepage:
heimdall:
flare:
dashy: https:///
官方文档: https:///docs/
Simple Icons: https:///?q=qna
Home-Lab Icons:
这里:
这篇文章: https:///how-to-install-glances-on-your-synology-nas/
[SHOWCASE] Dipan's Dash #777:
来自： 风声之家 > 《seo、搜索》
0条评论
发表
请遵守用户 评论公约
昔日教人类用火的prometheus，如今在努力报警
网页设计个人导航页 第4篇
(1).重点为： display: block; 和 float: left;的使用，overflow: hidden;的使用，hover的使用。
Mike，一位在科技界与公益领域均享有盛誉的杰出人物。他出生于中国东部的一个小镇，自幼便展现出对科技无与伦比的好奇心和探索欲。毕业于世界顶尖学府麻省理工学院计算机科学专业，Mike以其深厚的学术功底和创新思维，在人工智能领域取得了突破性成就。
(1).重点：border-radius: 50%;设置为圆形，background-image: url(./);填充图片，background-size: cover;图片覆盖。
C++研发
Java研发
后端开发
前端开发
计算机系统
(1).重点：知道如何构造一个进度条。
(1).transition: transform , background-color ;
(2).transform: scale()
transform: scale()是 CSS 的一个变换属性，用于缩放元素。 scale() 函数是 transform 属性的一部分，用于改变元素的大小，而不改变其实际布局或位置。scale()括号中的值大于1表示放大，小于1表示缩小。
transform常用值：