MyukiGCard是一款鏈接導航卡片,個人介紹卡片、網頁遮罩、或是作為網站的消息彈框等等,原生javript開發。簡單地支持語言設置、多種夜間模式、鏈接按鈕種類設置等等。
MyukiGCard
一個簡潔美觀的個人導航主頁、鏈接卡片
可以是一張名片,個人網址的導航主頁、介紹頁、或是作為網站的引導頁、消息彈框等等。
<link rel="stylesheet" href="./css/MyukiGCard.css"> <script src="./js/MyukiGCard.js"></script>
<script> //簡單用法 //window.MyNavCard = $MGC(); //高級用法 window.MyNavCard = $MGC({ icon: "https://stackblog.cf/img/avatar.jpg", /* icon: 可以是頭像、網站logo等 */ name: "Stack Dev", /* name: 可是是名字、網站名稱等 */ info: "歡迎使用MyukiGCard", /* info: 個性簽名、網站口號、信息等,為空或者不設置將不顯示 默認值: 空 */ z_index: 9999, /* 不用解釋,默認值為9999 */ blur: "#write", /* blur: 想要模糊化處理的頁面元素,取值可以是.className(類名)、#idName(id屬性值)、tagName(標簽名) */ lang: "en-US", /* lang: 語言設置,目前和關閉按鈕的文本有關 默認值: zh-CN 可選值: zh-CN,zh-TW,en-US 如果不提供或者提供的不在可選值內,將使用默認值或者使用html頁面的lang屬性 */ mini: true, /* mini: 迷你按鈕,用于重新打開MyukiGCard(在頁面底部中間位置) 默認值: true */ darkmode: 2, /* darkmode: 夜間模式 默認值: 1 可選值: 0、1、2、3 0: 禁用夜間模式 1: 跟隨系統(如果系統支持夜間模式) 2: 根據時間,下午6時~上午6時打開夜間模式 3: 常開夜間模式 */ maxWidth: "480px", /* maxWidth: MyukiGCard的最大寬度 默認值: 480px */ fontFamily: "", /* fontFamily: 字體,為空或不設置將使用默認字體 */ hitokoto: { "enable": true, /* enable: 是否啟用一言API 默認值: false */ "cats": ["d", "i", "k"], /* cats: 句子類型,詳見:https://developer.hitokoto.cn/sentence/#句子類型-參數 默認值: [] a: 動畫, b: 漫畫, c: 游戲, d: 文學, e: 原創, f: 網絡, g: 其他, h: 影視, i: 詩詞, j: 網易, k: 哲學, i: 抖機靈 */ "offline": "蘭博基尼和法拉利能一樣嗎?分手!", /* offline: 一言API請求錯誤時用于替換的離線語句 */ "color": "#70a1ff", /* color: 一言語句顏色 默認值: #70a1ff */ }, /* hitokoto: 一言API 注: 不兼容IE */ links: [{ "title": "My Blog", "url": "https://stackblog.cf/", "type": "primary", "target": "_blank" }, { "title": "My GitHub", "url": "https://github.com/Uyukisan", }, { "title": "MyukiGCard Usage", "url": "https://github.com/Uyukisan/MyukiGCard", }], /* 導航鏈接列表 title: 鏈接的標題 url: 鏈接地址 type: 鏈接按鈕的類型,包括: default | primary | secondary | success | danger | waring | info | light | dark | link 如果不提供type,默認為dafault target: 在何處打開鏈接,包括: _blank(新窗口)| _self(默認) | _parent(父框架) | _top(整個窗口) | framename(指定的框架) 如果不提供target,將使用默認 */ }); /* 方法:close() */ MyNavCard.close(); // 使用回調函數 MyNavCard.close(closeCallBack); function closeCallBack() { console.log("關閉回調函數..."); } /* 方法:open() */ MyNavCard.open(); // 使用回調函數 MyNavCard.open(openCallBack); function openCallBack() { console.log("打開回調函數..."); } </script>