前言本站从2021年1月14日开始建设,到现在(截止本文发布)也是有1360天了。从最开始的什么都不懂,使用简单小白化自动化动态网站生成工具Zblog、Wordpress这种稍微知名免费的开源项目搭建的一个资源分享站点。到后来慢慢的也作为个人学习生活中的一个笔记博客。
现在本站采用的是Hexo这个静态渲染器配合安知鱼主题作为本站的原始底层,然后在此基础上按照个人喜好修改了部分,比如右键菜单,友情链接的一些多余部分。主题也是经历的多次变更最终稳定到了现在。
本文呢也会分享一下我目前的博客图床方案以及搭建本站遇到的相关问题。
1.我的图床方案作为记录性博客,肯定避免不了图片或者视频的记录使用,本站的图片存储选择使用的是cloudflare r2存储桶+2022年以前的GitHub仓库存储法然后改为私有加速,接下来我将详细讲讲详细的内容。
首先建议大家使用webp格式的图片,将相关图片保存后手动压缩转格式存储,这样的话可以有效减少图片存储和优化加速访问。比如目前我的部分图片压缩存储后的占用如下:
1.1使用Github仓库+Vercel搭建通过此方案是完全免费的,但是Github仓库搭建的 ...
新建一个项目文件夹今天这个项目与之前那个项目可以分开,给这个项目新建一个文件夹在本文件夹内打开终端
编辑文件首先在这个项目根目录下创建webpack.config.js文件
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', // 入口文件 output: { filename: 'bundle.js', // 输出文件名 path: path.resolve(__dirname, 'dist') // 输出路径 }, plugins: [ new HtmlWebpackPlugin({ title: 'Hello World', // 生成的HTML文件的标题 filename ...
小插曲镜像配置如果你的npm拉取软件包缓慢,请配置以下镜像:
npm config set registry https://registry.npmmirror.comnpm config get registry
配置好后终端应该会返回https://registry.npmmirror.com。
即代表你成功配置npm镜像,因为我们配置了npm淘宝的国内镜像,就不需要使用cnpm了。按照下方教程继续跟进即可。
开始由于我们课程使用的环境原因,开始之前,请卸载我们前面安装的新版Vue CLI(也称为vue-cli或@vue/cli),不然创建的项目可能导致与我们课程不同步。
打开命令提示符(CMD):
按下Win + R,输入cmd,然后按下Enter。
在命令行中输入以下命令并执行:
npm uninstall -g @vue/cli
执行这些命令后,Vue CLI 将从你的全局npm包中卸载。如果你想要清理npm缓存(可选),可以运行以下命令:
npm cache clean --force
请注意,卸载全局包可能会影响其他项目,如果其他项目依赖于该全局安装的V ...
基础概念什么是Vue?概念定义:
渐进式JavaScript框架。
web前端框架。
特点:
简单易学,性能优秀。
提升开发体验。
适用场景广泛。
为什么使用Vue?Vue.js 是一款构建用户界面的渐进式框架,它的设计目的是简化 web 开发。Vue.js 使用简洁的、声明式的代码来描述用户界面和交互。Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定到底层的 Vue 实例的数据上。
使用 Vue.js 的好处如下:
简洁:Vue.js 简洁的代码和易用的语法使得学习、理解和维护都更加容易。
声明式:Vue.js 使用基于 HTML 的模板语法,开发者只需要关心界面应该是什么样的,不需要关心实现细节。
组件化:Vue.js 将应用程序分为组件,使得代码更加模块化,易于维护和扩展。
响应式:Vue.js 使用响应式设计,当数据发生变化时,视图会自动更新,开发者不需要手动更新 DOM。
性能优化:Vue.js 使用虚拟 DOM,在实际 DOM 更新之前,先在内存中模拟一次 DOM 更新,这样可以减少不必要的 DOM 操作,提高性能。 ...
仅备份个人平时使用的一些接口,平时做网站之类的可以直接调用QQ的头像直链直接使用其作为用户头像。
腾讯QQ获取QQ用户普通头像http://q1.qlogo.cn/g?b=qq&nk=QQ号码&s=100http://q2.qlogo.cn/headimg_dl?dst_uin=QQ号码&spec=100
获取QQ用户高清头像http://q.qlogo.cn/headimg_dl?dst_uin=QQ号码&spec=640&img_type=jpg
获取QQ用户昵称http://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=QQ号码
网易云音乐获取网易云音乐免费音乐的直链(付费歌曲不支持):https://music.163.com/song/media/outer/url?id=替换为音乐ID.mp3
获取网易云音乐的歌曲歌词:https://music.163.com/api/song/media?id=歌词id
CloudFlare-R2Cloudflare 是全球优质的云服务商,许多人都知道它提供免费的CDN服务,还可以一定程度抵御网络攻击,但是国内的站套上后可能会出现降速的情况,所以使用情况有一定局限性。
CloudFlare R2是我们的赛博大善人CloudFlare简称CF提供的一种基于S3的存储桶服务。CloudFlare R2 是该公司提供的对象储存业务。使用这个服务作为图床是我目前选择的新方案,免费额度高,即使超出费用也不高。
具体的定价可以查看官网链接:Pricing · Cloudflare R2 docs — 定价 ·Cloudflare R2 文档
免费额度
超出收费
储存
10 GB /月
A类操作
1百万次请求/月
$4.50 /一百万次请求
B类操作
1千万次请求/月
$0.36 /一百万次请求
以上表格根据本文发布时为例,实际情况请以官方情况为准!
PicList官网:https://piclist.cn/
PicList是一款高效的云存储和图床平台管理工具,在PicGo项目的基础上经过 ...
按钮悬停效果预览
代码基于掘金社区原:https://code.juejin.cn/pen/7381078480013754406 改善,增加了自适应与中文字符优化。原效果可以点击掘金链接,进入在线编辑查看。
这是我修改后的代码,上方那个预览的效果就是本代码的结果预览:
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>按钮悬停效果</title><style> /* 设置页面的基本样式 */ body { height: 100vh; /* 视口高度 */ width: 100vw; /* 视口宽度 */ display: flex; /* 使用flex ...
前言广大的Hexo用户:你是否面对每天重复且繁杂的hexo new、hexo new page、hexo g、hexo cl等等这些命令感到厌烦?
重复的命令动作天天敲,而且有时候容易搞错混淆,我们是否可以通过脚本的方式实现它自动化?比如只需要写一个Windows的bat脚本,我们可以轻松实现只需要输入相应选项,即可自动进行这些命令操作。
功能介绍以及演示
创建新文章:提示用户输入文章名称,然后使用Hexo创建一篇新文章。
创建新页面:提示用户输入页面名称,然后使用Hexo创建一个新页面。
生成静态文件:使用Hexo g生成静态文件。
创建文章并自动打开Typora编辑器:提示用户输入文章名称,然后使用Hexo new 创建一篇新文章,并自动打开Typora编辑器以便用户编辑(请确定Typora在系统的环境变量里面,不然无效,可以自己根据实际需求更改代码替换编辑器)。
本地运行网站并自动打开浏览器:启动Hexo本地服务器,并在本地服务器启动后5s(这里等待5s是为了避免本地服务器未完全启动导致打开404,可根据实际情况对代码调整)自动打开浏览器访问本地Hexo页面(默认localhos ...
前言scrcpy是一款开源免费的程序,依附于adb调试桥,免费无广告可以轻松将安卓的屏幕投影到电脑,但是因为很多人不会使用,我写了几个一键脚本,可以直接执行使用。
包含有线和无线,只需要将手机通过数据线连接到电脑,开发者选项打开,选择启动你需要使用的脚本即可直接快捷投屏。
几个脚本的介绍有线下配置无线调试:
用途:这个脚本用于在已经通过USB连接的安卓设备上配置无线调试功能。
使用方法:用户需要使用USB数据线将设备连接到电脑,然后运行此脚本。脚本将执行必要的adb命令以启用设备的无线调试功能。
启动adb无线连接并投屏:
用途:这个脚本用于通过无线网络连接到安卓设备,并进行屏幕投射。
使用方法:用户需要输入安卓设备的无线调试IP和端口。脚本将尝试使用adb连接到设备,并在连接成功后启动scrcpy投屏功能。如果未建立连接,会提示检查设备设置。
无线直接投屏:
用途:这个脚本用于在已经与电脑配对的安卓设备上进行无线屏幕投射。
使用方法:用户需要确保设备已通过无线调试与电脑配对。脚本将直接启动scrcpy投屏功能,无需再次进行连接。
启动adb有线连接并投屏:
用途:这个脚 ...
flix:轻松实现局域网内跨设备共享简介flix是一款专为局域网环境设计的跨设备文件和文本共享软件,支持多种操作系统。无论你使用Windows、macOS、Linux还是移动设备,flix都能让你轻松实现设备间的高效传输和共享。
主要功能
跨平台支持:兼容Windows、macOS、Linux和主流移动操作系统,轻松连接不同设备。
文件共享:支持大文件和多文件批量传输,无需担心文件大小和数量的限制。
文本共享:方便快捷地共享文本内容,快速传达信息。
局域网传输:在局域网环境下运行,无需互联网连接,保障数据私密性和安全性。
用户友好的界面:简洁直观的操作界面,无需复杂设置即可上手使用。
使用场景
办公室:团队协作中快速共享文件和资料,提升工作效率。
家庭:家庭成员之间分享照片、视频和文档,方便共同使用。
学校:师生之间传递作业、课件和学习资料,促进教学互动。
立即体验访问 flix官网 了解更多信息,下载并体验这款高效便捷的跨设备共享软件。无论工作、学习还是生活,flix都将简化你的设备连接。
flix——连接设备,简化生活。让文件传输像聊天一样简单!体验截图文本或者文件发送时,PC ...