Crf's Blog
0%

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

构建JSON序列化后符号变化的方案

问题描述

在进行JSON序列化时，有时候会出现符号变化的问题，例如双引号或单引号被转义或丢失的情况。情况是这样的，我在作配置生成器过程中用到了默认配置, 属性用做内容填充对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 默认配置
const configsData = {
  "1_minigame": {
    host: `www.a0.com`,
    data: { name: `A0`, logo: `${templateName}/a0` },
    html: {
      htmlTest:``,
      hd_index:``,
      hd_details:``,
      hd_category:``,
      hd_play:``,
      ad0_0:``,
      ad0_1:``,
      ad0_2:``,
      ad0_3:``,
      ad0_4:``,
      ad1_0:``,
      ad1_1:``,
      ad1_2:``,
    }
  }
};

期间我创建了原配置对象的深层副本，输出内容后，反引号变成了双引号，

1
2
const templateConfig = JSON.parse(JSON.stringify(configsData[templateName]));
console.log(templateConfig)

于是在做填充内容时，双引号里面的内容要是包含双引号或单引号，放到编译器编译器就会报错。

阅读全文 »

发表于 更新于 分类于
本文字数： 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>
阅读全文 »