冷文学习者 - cdn
type: channel
link: https://www.kevinlu98.cn/tag/cdn/
items: Freewind设置CDN
items: 利用jsdelivr创建免费的CDN

Freewind设置CDN
type: item
date: 2021-12-24T21:44:00+08:00
description: 前言这个功能是临时加的，因为周一起来jsDelivr挂了一次，所以就加上了该功能设置方法去传送门下载对应版本的cdn，从1.4版本开始freecdn的版本将与freewind的线上版本保持一致 考虑到Github大家访问起来比较慢，文未也有下载链接上传至自已的cdn或者干脆就放服务器上就可以啦最后大家在主题设置中找到开发者设置，就可以看到有cdn设置了 说句闲话其它大部分情况下大家是不用换的，jsDelivr大多数时候都很稳定，上次好像是ssl证书过期了，就碰到jsDelivr用不了的时候大家下载下来临时可以切下cdn地址

利用jsdelivr创建免费的CDN
type: item
date: 2021-11-21T00:49:00+08:00
description: jsDelivr首先对于cdn相信大家都不会陌生，国内外也有不少云服务提供付费的cdn服务，但对于我们这些开发者而言确实是有些不划算，所以今天就给大家介绍使用jsDelivr来构建我们的cdnjsDelivr是一个免费、开放原始码的公有 CDN 服务，托管了许多大大小小的 JavaScript、CSS 等 libraries，它将重心放在更快速的网路连线，利用 CDN 技术来确保每个地区的使用者都能获得最好的连线速度，依据 jsDelivr 的官网说明，它们也是首个「打通中国大陆与海外的免费 CDN 服务」，网页开发者无须担心GFW问题而影响连线使用jsDelivr提供npm，GitHub，WordPress等诸多开源镜像，我们就以我们最为熟悉的GitHub来说明如何构建我们的CDN首先我们需要在Github(传送门)申请账号，不过我相信大部分人都已有了Github账号，没有的直接去Github上申请一个即可在Github上创建一个公开的仓库按照提示将本地仓库与远程仓库关联，做这一步是为了方便我们直接使用git命令上传代码，不然得在Github点击上传然后手动选择文件我们在本地仓库创建css文件夹，在css夹下创建名为style.css的文件，内容如下(内容无任何意思，只为演示)：#setting-selector { padding: 10px; background-color: #fff; border-radius: 10px; text-align: center; } #setting-selector ul li a.current { font-weight: 900; color: #FE445C; } #setting-selector ul li a:hover { background-color: #F2F6FB; } #custom-fields .custom-item p { padding: 10px; background-color: #F5F5F5; color: #797979; font-size: 12px; width: 80%; border-radius: 5px; } #custom-fields .custom-item .custom-desc { margin-left: 100px; } 我们继续创建js文件夹，在js文件夹下创建名为script.js的文件，内容如下(内容无任何意思，只为演示)：$(function () { $(window).scroll(function () { //滚动高度 let scTop = $(window).scrollTop() //屏幕高度 let height = $(window).height() if (scTop >= height * 0.5) { //利用jquery动画组件显示 $("#top-btn").stop().animate({'opacity': '1'}, 500) } else { $("#top-btn").stop().animate({'opacity': '0'}, 500) } }) $("#top-btn").on('click', function () { $('body,html').stop().animate({ scrollTop: 0 }) }) let rightItem = $("#right-tool-bar .right-tool-item"); function hidenRight(animate) { for (let i = 0; i < rightItem.length; i++) { console.log(rightItem[i]) let item = $(rightItem[i]); if (animate) item.animate({marginLeft: 0}, 50) else item.css('margin-left', 0) } } $("#right-color .set-color-btn").on('click', function () { $.ajax({ url: "/?freeAction=color&colorName=" + $(this).data('color'), type: 'post', dataType: 'json', success: res => { if (res['success']) { layer.msg('更换配色成功', {icon: 1, time: 500}, function () { location.reload(); }) } } }) }) } ) 此时我们的目录结构…