早知 121私人导航升级新版本, 第一次使用原生dialog标签。

news2024/11/25 10:26:21

早知121项目介绍说明

早知121 - 一个快速创建私人导航网站。
用途：

创建个人的工作导航，收集常用网址，可贡献给同事。
创建个人垂直领域导航

优点：
- 不需懂技术，不用维护服务器，维护私人导航收藏站。

网站体验地址：

https://www.zz121.com

2024年 6 月新版本使用技术说明

自动爬取收藏 url的 LOGO，title, keywords, description 补充数据
使用html 原生 dialog 标签
引入 sweetalert2
ajax代替不友好的 refresh location
新增 url 批量收藏

爬取url logo 说明

友好的展示出url 应该包含内容如下：

LOGO 或者 icon
title 是 SEO 字段
keywords 是 SEO 字段
description 是 SEO 字段
url

LOGO 直观形象快速识别网站
title 定位品牌、公司、形象
keywords 和 description 定位网站是做什么的，有什么用。
url 识别访问地址。不少网站隐藏不显示此字段。
在这里插入图片描述
早知121为使用方便，会主动帮用户抓取目标url包含的 icon, title, keywords, description 补充搜藏记录，
抓取失败的网站，需要用户编辑填充数据。

原生dialog标签

原生 dialog弹出窗使用很好友，自已写入任意 html 代码弹窗。

<dialog id="moveDialog">
    <form method="dialog" style="margin: 10px;">
        <div>
            <label>
                移动-选择分组<br/>
                <select name="class_id" id="class_id" style="margin: 10px;">
                    <option value="0">请选择分组</option>
                    {{range .ClassApiSrv.OptionsByUId .UserId}}
                    <option value="{{.Id}}"> {{.Title}}</option>
                    {{end}}
                </select>
            </label>
        </div>
        <div style="display: flex; flex-direction: row-reverse;">
            <button onclick="moveSave()" class="btn btn-info">确定</button> &nbsp;
            <button class="btn btn-gray" >取消</button>
        </div>

    </form>
</dialog>

const favDialog = document.getElementById("moveDialog");
favDialog.showModal()

原生dialog element有 show 和 showModal两个方法
show 贴紧元素，如 tips
showModal 是modal 窗口

本地改版后，编辑收藏的 url, 移动分组也变的更简单友好了。
在这里插入图片描述