公告
YLUI运行流程
运行流程最简模型
接收到web请求,引入yl.js主文件,建立基本架构
引入onLoad.js文件,注册onload事件响应函数
读取basic存档数据,并以此发起系统初始化
系统读取所需资源,完成初始化,渲染桌面
响应用户操作
高级应用最简模型往往不能满足我们的需求。定制化改动推荐实现于YL.onLoad函数(位于onLoad.js)。
例如,我们希望存档数据来源于网络,而不是固定值,则可以用以下代码实现
YL.onLoad(function () { var getDataFromServer=function(){ //由自己实现,从远程获取存档数据,如ajax、jsonp } var data=getDataFromServer(); YL.init(data); console.log('正在加载数据');}
在之后的文档中我们将学习存档数据的结构,它是整个框架的核心。
又或者我们希望用户在加载完桌面后,通过登录账号,自己选择存档数据,则需要相关API的配合。
YLUI高级特性
APP高级特性APP的表现形式不仅仅可以是一个个窗口,还可以为动态壁纸,小工具,后台服务等,取决于开发者的想象力。
下面我们将以几个特殊APP为例,探索如何利用APP的高级特性。
便签便签用于快速记录信息,设计为一个小窗口,自启动于屏幕右上角。
https://cdn.jsdelivr.net/gh/yuri2peter/ylui@master/documents/assets/4.png
便签作为小工具,需要低调。设置plugin:true,默认隐藏标题栏
每次启动自动出现在右上角,设置上对齐,右对齐,偏移4px
自启动级别设置为2
不需要用户改动url,设置地址栏默认隐藏addressBar: false
固定一个合适的尺寸宽度250px,高度320px
完整的便签APP数据
"plugin-note": { "addressBar": false, "autoRun": 2, "background": false, ...
YLUI全局API
全局APIYL.init(data)data object|null 待加载的数据
初始化 YLUI。如果data不存在,YLUI将尝试用空数据启动。
YL.import(data)data object 待加载的数据
重新加载 YLUI。
YL.export()return object
返回当前数据存档对象。
YL.lang(key)key string 语言字段
返回对应字段的语言数据。语言请参考文件langs/zh-cn.json。
YL.reset()将YLUI转变为空数据状态。
YL.msg(title,content)title string 标题
content string 正文
推送一个消息。
YL.open(appId,options)appId string|object 应用的id或应用数据
options object 覆盖应用数据的键值对
return string 窗口id
打开一个窗口。如果appId为object,表示appId为一个APP的json数据结构,可以临时打开一个窗口而不依赖已有的APP。
YL.aboutUs()打开关于窗口。
YL.u ...
LPL比赛数据可视化
今天转载一篇教程《LPL比赛数据可视化》,这位大神超级🐂🍺,点击此处前往
这个项目涉及:html+css+javascript+jQuery+python+requests+numpy+mysql+pymysql+json+ajax+flask+echarts
最后的成果就是这个网站:https://syjun.vip/webpages/LplDataShow/
关于WEBP图像
hello,大家好,今天我们来谈谈WEBP在平时我们常用的图像格式有jpg,jpeg,png,但是,这些格式碰到高清图片就会变得很大,在服务器上加载会拖慢网页速度,所以WEBP就出现了,他尽可能减少空间,目前大部分的网站都是使用WEBP的格式,接下来我介绍一个免费的转换器(在线)。
这里基本是免费的,非常好用━(`∀´)ノ亻!
网址https://convertio.co/zh/webp-converter/
免费在线抠图网站分享
无论工作或生活中难免会碰到抠图的事情,今天我就为大家总结了好用且免费的在线抠图网站来解放你的双手,网址文章中已贴出,如果今天的内容对你有帮助还请大家请我喝杯咖啡哈~~~。1.FocoClippinghttps://www.fococlipping.com
FocoClipping 去除背景后可以快速套用特定颜色背景、模板或自行上传背景图,也有提供裁切、翻转、加入阴影或是边框效果,支持高解析度画质(最大 3000×3000 像素)2.Erase.bghttps://www.erase.bg/en
Erase.bg 是新上线的图片去背服务,任何人都可以在几秒钟时间快速从任何图片去除背景,并且以原始分辨率下载,没有额外的设定选项,这些工作都能在浏览器完成。3.PhotoKithttps://photokit.com/editor/?lang=zh
PhotoKit是一个在线的图片编辑器,抠图只是它的一个功能,总之网站的功能很强大,可以自己体验一下,抠图效果不错,可以直接保存原图尺寸,无需付费4.PhotoRoomhttps://www.photoroom.com/background-rem ...
自定義側邊欄
適用於 >= 3.8.0
側邊欄現在支持自定義了,可以添加自己喜歡的 widget。
可添加自己的 widget,也可以對現有的 widget 進行排序(博客資料和 公告這兩個固定,其它的能排序)
widget 排序只需要配置 sort_order就行。(使用了 Flex 佈局的 order 屬性,具體可查看 mozilla 文檔。簡單來講,就是配置數字來實現排序,如果不配置,則默認為 0。數字越小,排序越靠前。
aside: ... card_recent_post: sort_order: # Don't modify the setting unless you know how it works card_categories: sort_order: # Don't modify the setting unless you know how it works card_tags: sort_order: # Don't modify the setting unless you know how it work ...
Butterfly添加全局吸底Aplayer教程
以下文章只是教程
如果部署之后,并没有出现 aplayer , 请确认是否跟足步骤操作或者更换音乐源,多试试。
如果遇到使用問題,请仔细查看插件文档,或者到插件那裏反饋。
前言如果你想使用 aplayer,很多人都會推薦安裝 hexo-tag-aplayer 這款插件。這款插件通過 Hexo 獨有的標籤外掛,我們可以很方便的寫入一些參數,插件就會幫我們生成對應的 html。如果你只是使用一些簡單的功能,其實無需使用到這個插件,只需以 html 格式書寫就行,不用插件去轉換。
例如:
如果使用插件,在 markdown 中要這樣寫
{% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %}
其會被插件渲染為
<div id="aplayer-uxAIfEUs" class="aplay ...
自定義代碼配色
在Butterfly-安裝文檔-三-主題配置中已經介紹瞭如何使用自定義代碼配色。
這篇文章是使用自定義代碼配色的實例教程。
Highlight以使用Kimbie dark主題配色為例子
配置hljs為true修改Hexo根目錄下的_config.yml
highlight: enable: true line_number: true auto_detect: false tab_replace: hljs: true
配置highlight_theme為false修改主題配置文件
highlight_theme: false
下載和修改CSS文件在Github上找到這個CSS
在Hexo的根目錄source文件夾下創立一個self文件夾,在self文件夾創建一個Kimbiedark.css文件
把Github上Kimbie dark的CSS代碼複製到Kimbiedark.css去。(你也可以直接從Github上下載這個CSS)
Kimbiedark.css代碼如下
/* Name: Kimbie (dark) Author: Jan T. Sott ...
Butterfly 安裝文檔(七) 更新日誌
📖 本教程更新於 2022 年 06 月 24 日,教程的內容針對最新穩定版而更新(如果你是舊版,教程會有些出入,請留意)
🦋 Butterfly 已經更新到 4.3.0
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 🛠 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程 - ✨ 更新日誌 - Post not found: Butterfly-打賞 %}
{% endnote %}
{% note orange fas fa-magic’
你可以通過右下角的 簡 按鈕切換為簡體顯示
4.3.0 (2022/06/24)4.3.0 (2022/06/24)Breaking Change
archives 隱藏aside 設置更改
aside:- archive: true+ display:+ archive: true
適配 disqusjs 3.0
Feature
子歸檔頁面顯示的文章數量不再顯示總文章數量,而是對應的子歸檔文章數量
為一些數據加載增加 loading 顯示
tag 和 category ...
Butterfly 安裝文檔(六) 進階教程
📖 本教程更新於 2022 年 06 月 24 日,教程的內容針對最新穩定版而更新(如果你是舊版,教程會有些出入,請留意)
🦋 Butterfly 已經更新到 4.3.0
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 🛠 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程 - ✨ 更新日誌 - Post not found: Butterfly-打賞 %}
{% endnote %}
{% note orange fas fa-magic’
你可以通過右下角的 簡 按鈕切換為簡體顯示
建議
不要把個人需要的文件/圖片放在主題source文件夾裏,因為在升級主題的過程中,可能會把文件覆蓋刪除了。在Hexo根目錄的source文件夾裏,創建一個文件夾來放置個人文件/圖片。引用文件直接為/文件夾名稱/文件名
音樂音樂界面使用了插件 hexo-tag-aplayer使用方法請參考插件文檔
音樂頁面只是普通的page頁,按普通頁面操作生成就行。
以下內容可供選擇配置
注意: 仍需要安裝插件hexo-tag-aplayer
插件會在 ...
Butterfly 安裝文檔(五) 主題問答
📖 本教程更新於 2022 年 06 月 24 日,教程的內容針對最新穩定版而更新(如果你是舊版,教程會有些出入,請留意)
🦋 Butterfly 已經更新到 4.3.0
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 🛠 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程 - ✨ 更新日誌 - Post not found: Butterfly-打賞 %}
{% endnote %}
{% note orange fas fa-magic’
你可以通過右下角的 簡 按鈕切換為簡體顯示
以下是一些網友在安裝的過程中出現的問題。在提問題之前,先看有沒有解決方法。
運行後網頁顯示代碼頁面只顯示 extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug #aside_content.aside_content include ...
Butterfly 安裝文檔(四) 主題配置-2
📖 本教程更新於 2022 年 06 月 24 日,教程的內容針對最新穩定版而更新(如果你是舊版,教程會有些出入,請留意)
🦋 Butterfly 已經更新到 4.3.0
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 🛠 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程 - ✨ 更新日誌 - Post not found: Butterfly-打賞 %}
{% endnote %}
{% note orange fas fa-magic’
你可以通過右下角的 簡 按鈕切換為簡體顯示
評論通用設置DisqusDisqusjslivere(來必力)GitalkValineWalineUtterancesFacebook CommentsTwikooGiscus從3.0.0開始,開啟評論需要在comments-use中填寫你需要的評論。
支持雙評論顯示,只需要配置兩個評論(第一個為默認顯示)
comments: # Up to two comments system, the first will be shown as def ...
Butterfly 安裝文檔(三) 主題配置-1
📖 本教程更新於 2022 年 06 月 24 日,教程的內容針對最新穩定版而更新(如果你是舊版,教程會有些出入,請留意)
🦋 Butterfly 已經更新到 4.3.0
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 🛠 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程 - ✨ 更新日誌 - Post not found: Butterfly-打賞 %}
{% endnote %}
{% note orange fas fa-magic’
你可以通過右下角的 簡 按鈕切換為簡體顯示
語言修改站點配置文件 _config.yml
默認語言是 en
主題支持三種語言
default(en)
zh-CN (簡體中文)
zh-TW (繁體中文)
網站資料修改網站各種資料,例如標題、副標題和郵箱等個人資料,請修改博客根目錄的_config.yml
導航菜單修改 主題配置文件
Home: / || fas fa-homeArchives: /archives/ || fas fa-archiveTags: /tags/ || fa ...
Butterfly 安裝文檔(二) 主題頁面
📖 本教程更新於 2022 年 06 月 24 日,教程的內容針對最新穩定版而更新(如果你是舊版,教程會有些出入,請留意)
🦋 Butterfly 已經更新到 4.3.0
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 🛠 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程 - ✨ 更新日誌 - Post not found: Butterfly-打賞 %}
{% endnote %}
{% note orange fas fa-magic’
你可以通過右下角的 簡 按鈕切換為簡體顯示
Front-matterFront-matter 是 markdown 文件最上方以 --- 分隔的區域,用於指定個別檔案的變數。
Page Front-matter 用於頁面配置
Post Front-matter 用於文章頁配置
如果標注可選的參數,可根據自己需要添加,不用全部都寫在markdown裏
Page Front-matter---title:date:updated:type:comments:description:ke ...
Butterfly 安裝文檔(一) 快速開始
📖 本教程更新於 2022 年 06 月 24 日,教程的內容針對最新穩定版而更新(如果你是舊版,教程會有些出入,請留意)
🦋 Butterfly 已經更新到 4.3.0
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 🛠 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程 - ✨ 更新日誌 - Post not found: Butterfly-打賞 %}
{% endnote %}
{% note orange fas fa-magic’
你可以通過右下角的 簡 按鈕切換為簡體顯示
hexo-theme-butterfly是基於 hexo-theme-melody 的基礎上進行開發的。
安裝Git安裝 (Github)Git安裝 (Gitee)npm安裝穩定版【建議】
在你的 Hexo 根目錄裏
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
測試版
測試版可能存在 bug,追求穩定的請安 ...
阿里云服务器部署Hexo博客
前言
相信大部分人使用Hexo搭建个人博客都会部署到一些免费的代码托管平台上,但这些免费的平台总是差强人意,比如国外的GitHub平台虽然完全免费,但在国内访问加载速度非常慢,又或者是国内的码云平台免费版有许多功能被阉割掉了,比如不能自定义域名,不能每次自动刷新提交的代码,需要到码云平台上手动刷新,如此一来非常繁琐。
为了有效解决上诉的一些问题,有条件的话,不妨在自己的云服务器上搭建Hexo博客。
效果演示
这是Hexo博客部署到GitHub上的网站测速效果
https://s1.ax1x.com/2020/03/12/8mhkv9.png )
这是Hexo博客部署到阿里云服务器后的网站测速效果
环境准备
本地环境:Windows 10
云服务器环境:阿里云ECS(CentOS7.x)
开始部署
本地环境搭建1.安装Git
到git官网上下载.exe文件,Download git,安装选项还是全部默认,最后一步添加路径时选择Use Git from the Windows Command Prompt。
Git下载地址
Git教 ...
標籤外掛(Tag Plugins)
Tabs出師表圖庫李白臣亮言:先帝創業未半而中道崩殂,今天下三分,益州疲弊,此誠危急存亡之秋也。然侍衞之臣不懈於內,忠志之士忘身於外者,蓋追先帝之殊遇,欲報之於陛下也。誠宜開張聖聽,以光先帝遺德,恢弘志士之氣,不宜妄自菲薄,引喻失義,以塞忠諫之路也。宮中府中,俱為一體;陟罰臧否,不宜異同:若有作奸犯科及為忠善者,宜付有司論其刑賞,以昭陛下平明之理;不宜偏私,使內外異法也。侍中、侍郎郭攸之、費禕、董允等,此皆良實,志慮忠純,是以先帝簡拔以遺陛下:愚以為宮中之事,事無大小,悉以諮之,然後施行,必能裨補闕漏,有所廣益。將軍向寵,性行淑均,曉暢軍事,試用於昔日,先帝稱之曰“能”,是以眾議舉寵為督:愚以為營中之事,悉以諮之,必能使行陣和睦,優劣得所。親賢臣,遠小人,此先漢所以興隆也;親小人,遠賢臣,此後漢所以傾頹也。先帝在時,每與臣論此事,未嘗不歎息痛恨於桓、靈也。侍中、尚書、長史、參軍,此悉貞良死節之臣,願陛下親之、信之,則漢室之隆,可計日而待也。臣本布衣,躬耕於南陽,苟全性命於亂世,不求聞達於諸侯。先帝不以臣卑鄙,猥自枉屈,三顧臣於草廬之中,諮臣以當世之事,由是感激,遂許先帝以驅馳。後值傾覆 ...
个人博客搭建
本文写的时间较早,请核查文章准确性!
0x001 效果演示

0x002 简单介绍
前前后后大概花了一周多的时间,目前个人博客已经完善的差不多了,现在写个文章做个阶段总结,后续如果有更新的地方,会及时补充。本博客基于Hexo框架,采用hexo-theme-matery主题,在这里非常感谢作者洪卫的hexo-blog-fly博客开源,极大简化了构建博客的工作量和复杂度。在此开源博客的基础上做了改进,修复了一些bug,顺利搭建完成了我的个人博客。大家对此主题有兴趣的可以下载源代码,搭建属于自己的个性化博客。
个人博客 演示:http://luckyzmj.cn
0x003 Hexo 初级搭建
1. 安装GitGit是目前世界上最先进的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。Git的作用是将本地的网页文件传到github上。
Git下载地址
Git教程
windows: 到git官网上下载.exe文件,Download ...