Crf's Blog
0%

发表于 更新于 分类于
本文字数： 430 阅读时长 ≈ 2 分钟

在Web开发中，图片懒加载可以延迟加载页面上的图片，以提高页面加载性能和用户体验。用户在页面加载时不立即加载所有图片，而是等到图片即将进入用户视野时再进行加载。通过延迟加载图片，可以减少初始加载的资源数量，提高页面的加载速度，特别适用于包含大量图片的网页。

定义滚动监听和加载函数：

思路：我们定义一个名为runLazyLoad的函数，它通过监听滚动事件实现了图片的懒加载功能。当页面滚动时，函数会计算滚动距离，并根据一定规则加载新的图片。

函数内部的loadLazyLoadedImages函数用于实际加载图片。它首先获取所有带有data-src属性的图片元素，然后逐个加载这些图片，直到达到指定的加载数量。从而达到懒加载效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let previousLoadCount = 0;

function runLazyLoad(origin) {
    loadLazyLoadedImages(origin, 0);
    window.addEventListener('scroll', function () {
        const scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        if (scrollDistance > 0) {
            const initialLoadCount = Math.floor(scrollDistance / 300) * 9 + 9;
            const newLoadCount = initialLoadCount - previousLoadCount;
            if (newLoadCount > 0) {
                loadLazyLoadedImages(newLoadCount);
                previousLoadCount = initialLoadCount;
            }
        }
    });
}

Math.floor(scrollDistance / 300) * 9 + 9;: 每滚动300的距离就加载9张图片进来。

阅读全文 »

发表于 更新于 分类于
本文字数： 677 阅读时长 ≈ 2 分钟

前提准备

框架地址: Midway-Vue3-SSR

基于 Midway、Vue 3 组装的 SSR 框架
简单、易学易用、方便扩展、集成Midway框架，您一直想要的Vue SSR 框架。

使用系统：Windows

安装:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 克隆项目
git clone https://github.com/lqsong/midway-vue3-ssr.git

# 进入项目目录
cd midway-vue3-ssr

# 复制文件
copy src/config/config.default.ts  src/config/config.local.ts # 启用或修改里面的参数
copy src/config/config.default.ts  src/config/config.prod.ts # 启用或修改里面的参数
copy web/.env.development  web/.env.development.local # 启用或修改里面的参数

# 全局安装pnpm：
npm install pnpm -g

# 安装环境依赖
pnpm i 

# 启动默认项目
pnpm dev
阅读全文 »

发表于 更新于 分类于
本文字数： 324 阅读时长 ≈ 1 分钟

Hexo

在添加openssh成功后,hexo d报错：

1
2
3
4
5
6
7
8
9
10
11
12
ssh: Could not resolve hostname github.com: \262\273\326\252\265\300\325\342\321\371\265\304\326\367\273\372\241\243
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Error: Spawn failed
    at ChildProcess.<anonymous> (D:\Hexo\CrfBlog\node_modules\hexo-util\lib\spawn.js:51:21)
    at ChildProcess.emit (node:events:513:28)
    at ChildProcess.cp.emit (D:\Hexo\CrfBlog\node_modules\cross-spawn\lib\enoent.js:34:29)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:293:12)

报错时间：2024.03.08

阅读全文 »

发表于 更新于 分类于
本文字数： 1.2k 阅读时长 ≈ 4 分钟

准备条件：

  • 私钥和公钥
  • openSSH 服务端和客户端安装

安装好openSSH后，在电脑开始搜索框输入关键词PowerShell,找到Windows PowerShell右键以管理身份运行

启用服务

1
net start sshd

添加防火墙开放22端口规则

1
New-NetFirewallRule -Name sshd -DisplayName 'OpenSSH Server (sshd)' -Enabled True -Direction Inbound -Protocol TCP -Action Allow -LocalPort 22
阅读全文 »

发表于 更新于 分类于
本文字数： 265 阅读时长 ≈ 1 分钟

在html使用阿里云添加WebTracking采集 reffer来访标头

HTTP GET请求

1
curl --request GET 'http://${project}.${host}/logstores/${logstore}/track?APIVersion=0.6.0&key1=val1&key2=val2'
参数 是否必填 说明
${project} 是 Project名称。
${host} 是 日志服务所在地域的Endpoint。更多信息，请参见服务入口。
${logstore} 是 Logstore名称。
APIVersion=0.6.0 是 保留字段。
topic=yourtopic 否 指定日志主题。
key1=val1&key2=val2 是 您要上传到日志服务的键值对（Key-Value），支持设置多个键值对。

通过上述方式获取日志库请求链接 如 

1
http://${project}.${host}/logstores/${logstore}/track?APIVersion=0.6.0&key1=val1&key2=val2
阅读全文 »

发表于 更新于 分类于
本文字数： 783 阅读时长 ≈ 3 分钟

简单的网址部署方式

选择服务器

这里我用的是阿里云的轻量服务器，打开阿里云–>搜索轻量服务器–>选择配置(镜像选择宝塔面板)，其他的根据自己需求来，购买成功后打开轻量服务器后台选择就会看到购买的实例，在里面可以登录宝塔面板。

解析

阿里云申请域名，选择域名解析–>添加记录–>设置主机名(域名备案是必要的，否则会影响网址的正常访问，搜索阿里云搜索ICP备案，有时间都可以提前备好)

1
2
3
4
5
6
7
8
主机记录就是域名前缀，常用主机记录及含义如下:
www 表示域名 www.rfcode.top
@ 表示主域名 rfcode.topa
* 泛解析，表示满足格式*rfcodetop 的所有域名(记录类型为“显性URL“时，不允许设置泛解析)
mail 表示域名mail.rfcode.top，常用于邮箱业务的解析设置
m 表示域名 mrfcode.top，常用于手机网站m
二级域名如 abc.rfcode.top ，则填写 abc
多级域名如 ab.cd.ef.rfcode.top ，则填写 ab.cd.ef

—>记录值选择你购买的服务器地址, 确定

部署证书

登录宝塔面板–>选择左侧栏网站选项–>添加站点–>写上解释时完整的域名(例如：abc.rfcodetop)，点击对应域名的SSL证书下的未部署或是选择–>设置–>SSL证书，然后选择Let’s Encrypt,点击申请证书，等待申请成功保存就可以了(Let’s Encrypt默认续签且免费)

解析域名后，如我的：blog.rfcode.top，然后在宝塔后台创建站点，或者服务器后台添加站点，找到站点根目录root/blog.rfcode.top/上传资源内容。

阅读全文 »

发表于 更新于 分类于
本文字数： 1.1k 阅读时长 ≈ 4 分钟

常见广告类型

ads.txt

将ads.txt放在发布站点的根目录下，申请广告。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
成功申请，获取可以放置的广告代码如下：

Here below the TAGs (/head)

<link rel="dns-prefetch" href="//exmarketplace.com">
<link rel="preconnect" href="//cdn.exmarketplace.com">
<link rel="preconnect" href="//securepubads.g.doubleclick.net">
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script async src="https://cdn.exmarketplace.com/bidder/augovercast/augovercast.dfp.min.js"></script>


Here below the DIV (body):
<!--Masterhead-->
<div class="gptslot" data-adunitid="0"></div>

<!--Incontent_1-->
<div class="gptslot" data-adunitid="1"></div>

<!--Incontent_2-->
<div class="gptslot" data-adunitid="2"></div>

<!--Incontent_3-->
<div class="gptslot" data-adunitid="3"></div>

<!--Incontent_4-->
<div class="gptslot" data-adunitid="4"></div>
阅读全文 »

发表于 更新于 分类于
本文字数： 302 阅读时长 ≈ 1 分钟

安装方法

选择官方给的【安装ossutil】方法，对应自己的电脑配置选择Windows环境下版本，下载后进行根据提示分别设置Endpoint、AccessKey ID、AccessKey Secret和STSToken参数。这里主要对报错解决方案进行一个记录，因为自己在网上一直没有找到解决办法。

错误解决方案

报错1

ossutil:command not found

阅读全文 »