## 2023年4月17日-2023年4月23日

- April 17, 2023- April 23, 2023

<div class="article-ads"></div>



## 热点导读

### SpaceX星舰火箭首次试飞

中：SpaceX星舰火箭首次试飞升空，数分钟后爆炸。`海外看到的是未来无限的可能性，天朝看到的是爆炸。`

英：The SpaceX starship rocket took off for the first time and exploded a few minutes later. ` Overseas sees infinite possibilities for the future, while China sees explosions.`

### 从月球到火星探测的总体计划文档

中：美国国家航空航天局发布从月球到火星探测的总体计划文档

英：NASA releases master plan document for Moon-to-Mars exploration

### A股上热搜

中：4月21日，中国三大股指普跌近2%，冲上热搜。

英：On April 21, China's three major stock indexes generally fell by nearly 2%, rushing to the hot search.

### 北京长峰医院火灾

中：北京长峰医院发生严重火灾，29人遇难。

英：A serious fire broke out in Beijing Changfeng Hospital, killing 29 people.

### 农业综合行政执法队伍（农管局）

中：农管局早在2003年就已经成立，最近终于走进大众的视野，但好像不是因为什么好事。

英：The Agricultural Management Bureau was established as early as 2003. Recently, it has finally entered the public eyes, But it doesn't seem like it's because of something good.

### 车展宝马冰淇淋事件

中：车展上，宝马员工发放冰淇淋时，对中外参展人士区别对待，被热搜。

英：At the auto show, when BMW employees handed out ice cream, they treated Chinese and foreign exhibitors differently, and it was hotly searched.

### 五一调休引热议

中：即将到来的国内五一小长假，假期前后两周周末规定上班，该措施引起广泛讨论。

英：With the upcoming May Day holiday in China, workers are required to go to work on weekends for two weeks before and after the holiday. This measure has aroused widespread discussion.

## 须知

> 更新全看心情。内容欢迎补充。

<div class="article-ads"></div>

2023年4月第四周

## 简介

建站可能是因为热爱，但生活需要Money。

建站一个常见的搞钱方式就是接广告，Google的Adsense广告集成相对容易。本文就记录一下主要使用`VanBlog`原生的功能点集成GoogleAdsense广告。

**本文使用的VanBlog版本为`v0.52.0`。**

<div class="article-ads"></div>


## 注册开通GoogleAdsense

这个就不详细说明了，简要说一下步骤吧：
1. [注册Google帐号](https://accounts.google.com/signup/v2/webcreateaccount?biz=false&cc=SG&dsh=S1779411376%3A1682069492985185&flowEntry=SignUp&flowName=GlifWebSignIn&ifkv=AQMjQ7SKPzVDZeNBVKrk1Fmt2umoS9i6jUrPcaE5ew81jlgzkKylBKvdSD5oMbQlpJiaykbRFYQ1Tw)
2. [开通Google Adsense](https://adsense.google.com/start/)
3. 填写你的个人信息、收款信息等，收款信息较为重要，Google一般会根据你填写的地址邮递收益支票。
4. 在Google Adsense中绑定你的网站（域名）`（此步需要配置DNS验证）`

通过以上四步，完成网站认证后，算是完成了广告投放的前置工作。后面就需要实际操作将广告添加到网站中了。

## 添加广告到网站

Google提供的广告常用的有两种：自动广告、手动广告（自定义广告）。无论哪种广告添加到网站，简单来讲都可以为两步：
1. 生成广告脚本
2. 将广告脚本插入到网站页面

此处是一个手动插入的文章内广告：

<div class="article-ads"></div>

### 自动广告

#### 生成自动广告脚本

自动广告是Google提供的最简单的广告方式如果你已经完成了前置工作，在下图页面可以直接获取相关的自动广告脚本，其中广告细节设置包括：广告形式、广告位置、广告启停等。

![VanBlog集成/接入GoogleAdsense广告](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1682311447397.jpg)

点击上图【获取代码】后，可以弹出脚本信息及使用的相关说明，如下图：

![VanBlog集成/接入GoogleAdsense广告](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1682311763230.jpg)

#### 配置自动广告脚本

找到脚本后，将脚本复制，即可到自己的VanBlog后台进行配置，配置时使用的功能是：【站点管理】→【系统设置】→【客制化】。`PS：脚本不要直接使用本文中的哦！那是我的广告脚本。。。`

现在【客制化】中有：自定义CSS、自定义Script、自定义Html（Body）、自定义Html（Head）。在老版本的VanBlog中只有自定义CSS和自定义Script，所以需要将脚本在自定义Script进行配置，而且配置内容需要稍微处理一下，新版本直接在自定义Html（Head）中配置即可。

1. 自定义Html（Head）

在自定义Html（Head）中将谷歌提供的脚本直接粘贴到输入框中即可，如下图。

![VanBlog集成/接入GoogleAdsense广告](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1682312854136.jpg)

2. 自定义Script

**仅推荐没有`自定义Html（Head）`功能的VanBlog版本使用！**

在自定义Script中加入如下配置（注意改成你自己的广告脚本）

脚本前加个`</script>`，脚本后加个`<script>`

```html
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8842635629279684" crossorigin="anonymous"></script>
<script>
```

#### 拓展

无论你开不开启自动广告，都推荐在`自定义Html（Head）`中配置如下脚本，也就是[配置自动广告脚本](#配置自动广告脚本)中的`1.自定义Html（Head）`，至于原因，咱们下面再说。（**注意将脚本改为你自己的广告脚本**）

```html
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8842635629279684" crossorigin="anonymous"></script>
```

### 手动广告（自定义广告）

> 以下内容建立在VanBlog高版本（含有`自定义HTML（body）`功能的版本）下，以`自定义侧边栏广告`为例介绍配置过程。低版本应该也能够实现，但可能相对麻烦，所以如果你的版本较低，建议升级！

#### 获取手动广告脚本

手动广告需要先创建，再获取脚本，如下图进入【按广告单元】设置页面，选择展示广告、信息流广告等四种广告类型中的一种，进行广告创建。

其中本人常用的是【展示广告】、【文章内嵌广告】。

![VanBlog集成/接入GoogleAdsense广告](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1682314739161.jpg)

简单介绍一下展示广告和文章内嵌广告：
- 展示广告：可以自定义广告大小、长宽，如自定义侧边栏广告。
- 文章内广告：可以自适应文章内容长宽，看起来像是文章内的图片一样。

创建完广告后，点击获取代码即可进入脚本页面，如下图：

![VanBlog集成/接入GoogleAdsense广告](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1682314952278.jpg)

![VanBlog集成/接入GoogleAdsense广告](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1682315066323.jpg)

咱们使用HTML类型的代码即可。

#### 配置手动广告脚本

获取到脚本后，可以先观察一下脚本的内容，如下：

```html
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8842635629279684"
     crossorigin="anonymous"></script>

<ins class="adsbygoogle"
     style="display:inline-block;width:200px;height:500px"
     data-ad-client="ca-pub-8842635629279684"
     data-ad-slot="9778797459"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
```

经过测试，该脚本可以拆分成三部分，并且可以独立配置：
1. 谷歌广告单元脚本引入

```html
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8842635629279684"
     crossorigin="anonymous"></script>
```

该部分脚本细心地朋友可能会发现，与【自动广告】的脚本是一样的，所以才有了上面[拓展](#拓展)中的说明。

所以此部分参考[自动脚本的配置](#配置自动广告脚本)即可，不再详细说明。

2. 广告容器

```html

<ins class="adsbygoogle"
     style="display:inline-block;width:200px;height:500px"
     data-ad-client="ca-pub-8842635629279684"
     data-ad-slot="9778797459"></ins>
```

该部分脚本，简单理解就是一个html元素，用于存放Google广告图片的（`虽然广告一般不仅仅是简单的图片，但这么理解也没啥大问题`）。

所以该部分脚本放置在您想要插入广告的页面源码中即可。在VanBlog中推荐在自定义HTML（Body）中配置，如下图：

![VanBlog集成GoogleAdsense广告](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1682315673768.jpg)

**提示：图中通过一个侧边栏广告标签（自定义标签）插入了两个广告位，并且使用css的`position`调整了每个广告的位置。**

3. 广告刷新（显示）脚本

```html
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
```

**该部分脚本需要在以上两部分脚本配置完毕后，再使用，否则会报错。** 其作用可以理解为：获取谷歌广告内容，并在广告位中插入广告内容。

该部分脚本推荐在自定义Script中配置，如下图：

![VanBlog集成/接入GoogleAdsense广告](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1682315899506.jpg)

因为上面设置了两个广告容器，所以该部分脚本也要使用两遍，原因自己体会吧~~~

## 总结

经过以上介绍，你应该可以使用VanBlog系统自带的功能完成一些简单的谷歌广告接入。并且应该能了解到，自定义广告的脚本可分为三部分：1.谷歌广告引入，2.广告容器设置，3.广告刷新（显示）。

### 拓展：文章内嵌广告

谷歌的【文章内嵌广告】也较常用，但VanBlog文章前台页面是后端渲染的，出于安全性等方面的考虑，所以禁用了文章正文嵌入脚本的部分功能，导致直接在写文章时将广告嵌入文章正文一般是无法展示的。但由于VanBlog后台提供了丰富的客制化功能，也可以实现【文章内嵌广告】的接入。

此处就不详细介绍了，只提出简单的实现思路，具体实现欢迎大家讨论：
1. 在客制化中将广告位插入到正文中，如：`innerHTML`。
2. 页面加载时，获取页面的广告位数量，按照数量循环刷新，防止部分广告未渲染。

**PS：VanBlog作者真是太棒了，有问必答有求必应，妥妥的劳模，赞！**
 
## ads.txt 的坑

虽然使用VanBlog经过以上步骤，你可以简单快速完成谷歌广告的接入，但还是有一个坑是目前VanBlog无法独自完成的，那就是`ads.txt`文件的处理。

官方指南：[ads.txt指南](https://support.google.com/adsense/answer/7532444?hl&sjid=2395357316123191762-AP)

具体`ads.txt`的作用可以查阅指南，这里说一下直观的要求。

比如我的网站是`https://oldmoon.top`，那么Google AdSense建议通过`https://oldmoon.top/ads.txt`可以访问并显示他提供给你的内容（`在Google AdSense可以下载你的ads.txt文件`）。

我的做法是，关闭VanBlog自带的HTTPS解析功能，使用`Nginx Proxy Manager`自己代理`https://oldmoon.top`到VanBlog系统，并配置独立的拦截`/ads.txt`，将其请求转发到另一个`Nginx`，用于访问`ads.txt`文件。

当然如果你有更好的解决方案，欢迎在评论中讨论！

### 其他建议

1. 不要刷网站的广告访问量，小心被封号；
2. 不要发布歧视、煽动战争等等有害言论，小心被停止广告推送；
3. 其他请自行查阅谷歌广告规范~

## 赞助

如果你觉得本文对你有用，想要给作者一些赞助，可以动动小手点击下方广告给予支持，万分感谢~

您的每次点击都能给予作者更多分享的动力！**请无情点击吧：**


<div class="article-ads"></div>

网站接入GoogleAdsense广告（VanBlog版）

## 简介

对于使用Windows系统的程序员，偶尔会出现不知明原因，导致电脑端口占用，从而导致本地代码无法正常运行。

可以使用相关命令查询端口占用进程，进而关闭进程释放端口。



## 查询进程


netstat -ano|findstr "端口号"，示例：

```bash
netstat -ano|findstr "8080"
```

一般会输出如下信息：

```
  TCP    127.0.0.1:8080         0.0.0.0:0              LISTENING       6896
  TCP    127.0.0.1:8080         127.0.0.1:3716         ESTABLISHED     6896
```

最后一列 `6896` 便是进程号。

找到进程号之后，下一步便是结束进程释放端口。

## 结束进程

结束进程有两种方式：
1. 在任务管理器中找到相应进程，进程号就是`PID`，结束掉进程
2. 使用命令关闭进程。

### 任务管理器

以Windows10系统为例，打开任务管理器，选择详细信息列表，根据PID找到相应进程。下面是任务管理器截图：

![任务管理器](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1681898783806.jpg)

找到进程后，右键选择`结束任务`，或选中之后点击右下角`结束进程`均可。

### 命令关闭

`taskkill /f /t /im 进程号`，示例：

```bash
taskkill /f /t /im 6896
```

成功停止后会输出如下信息：

```
成功: 已终止 PID 6896 (属于 PID 4624 子进程)的进程。
```

## 总结

手动释放Windows端口的步骤分为两步：
1. 根据端口号找到进程号（PID）
2. 根据PID停止进程

Windows查看端口占用并关闭

## 简介

常见的SQL语句优化记录。




## Not in

- MySQL

模拟需求：查询没有班级的学生（可能在数据量）

一般语句：
```sql
select id from user_table where not in (select user_id from class_table);
```

优化语句

```sql
select a.id from user_table a left join class_table b on a.id - b.user_id where b.user_id is not null;
```

## 须知：本文不定期更新

<div class="article-ads"></div>

常见SQL优化

## 简介

现在有很多流行的Markdown编辑器，但有时需要的不是一个庞大的编辑器，而是一个可以将Markdown文本格式化为Html代码的工具，所以找到了：**Markedjs**

- Github地址：https://github.com/markedjs/marked
- 官网：https://marked.js.org/




## 官方使用示例

### Installation（安装）

**CLI:** 

```bash
npm install -g marked
```

**In-browser:** 

```bash
npm install marked
npm install @types/marked # For TypeScript projects
```

### Usage（使用）

** Warning: 🚨 Marked does not [sanitize](https://marked.js.org/#/USING_ADVANCED.md#options) the output HTML. Please use a sanitize library, like [DOMPurify](https://github.com/cure53/DOMPurify) (recommended), [sanitize-html](https://github.com/apostrophecms/sanitize-html) or [insane](https://github.com/bevacqua/insane) on the *output* HTML! 🚨 **

```
DOMPurify.sanitize(marked.parse(`<img src="x" onerror="alert('not happening')">`));
```

#### CLI

```bash
# Example with stdin input
$ marked -o hello.html
hello world
^D
$ cat hello.html
<p>hello world</p>
```

```bash
# Print all options
$ marked --help
```

#### Browser

> 通过`marked.parse()`方法格式化Markdown文本。

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked.parse('# Marked in the browser\n\nRendered by **marked**.');
  </script>
</body>
</html>
```

将Markdown文本转为Html代码

twitter:card

twitter:creator

twitter:site