## 简介

建站可能是因为热爱，但生活需要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代码

## 声明

**本文仅代表个人思想，如有不认同之处或其他意见建议，欢迎讨论。**

## 思考

大家好，我是老狗(`dingdangdog`)，这是我第一次自己动手写此类文章，这个分类就简单叫`老狗随想`吧，也没别的意思，希望大家不要多想，尤其是致敬`编程随想`什么的，根本没有，我不配！

首先我认为：人的一生充满无数不确定性，人类社会是由每一个人组成的，那么人类社会的不确定性更是无穷无尽。因为有这些不确定性的存在，所以当预料之外的事情发生时，人就会做出日常计划之外的行动，在工作中，这一般意味着加班。

由此可见，如果你有工作，就几乎无法逃避加班情况的出现。

既然如此，人们 **为什么讨厌加班呢？尤其是当代年轻人！**



## 简答

针对这个问题，我认为主要有以下几种原因导致现在的人讨厌加班：

1. 加班没有相应补偿；
2. 无效加班；
3. 替他人加班。

加班已经是现在社会舆论的一个热门话题，尤其是在新一届农民工行业(`程序员`)中，并且加班情况已经成为程序员跳槽的一个重要问题点。

我认为，如果一个程序员因为加班情况离职，往往不仅是因为以上的一个原因，至少是两个原因。在当今社会，懂得都懂，有句话叫：`你不干有的是人干`，这句话听起来刺耳，但现实就是这么残酷。

好了，废话不多说，下边就来详细讨论一下这三个原因。

## 加班没有相应补偿

加班没有补偿这个最简单，就是没有加班费嘛。

在我大中华，没有加班费的公司可以说是十有八九，那有加班费的公司肯定是凤毛麟角了，都是抢破头皮的往里挤，剩下没挤进去的大多数，那肯定是没有加班费了。

没有加班费其实又分为很多种情况：1、**有调休**；2、**有加班餐**；3、**啥都莫得**。

### 有调休

因为有加班费的公司屈指可数，所以加班有调休的公司也称得上是好公司了，所以这类公司一般也都不缺人，在这种公司工作，偶尔有点私事，也可以使用加班时长来调休，这样工作和生活也能相对协调一些，所以大多数人也可以接受。

注意：有些公司只是名义上有调休，但没有相应的明文制度或流程，这类公司要小心，可能只是名义上有，实际情况错综复杂，当遇到这类公司，情况恶劣时直接归到 **啥都莫得** 这类。

### 有加班餐

除了`有加班费`和`有调休`这类顶级和次顶级公司，还有一类普通公司，加班没有加班费和调休，但有相应的加班餐制度，比如晚上加班到几点之后，员工可以提出加班申请，每月发工资时结算加班情况，一并发放相应的餐补费用；或加班订餐可以报销等。这可能是某个老板出于人道主义的考虑，所以发明了温饱制度，让员工加班的时候不要饿肚子。这确实是一项伟大的发明，无论什么社会，总有人还在为吃喝犯愁。**谁说饱暖思淫欲？吃饱了才有力气干活！**

注意：与`有调休`的注意相同，小心只是名义上有的公司。

### 啥都莫得

相比于以上公司，这类 `啥都莫得` 的公司，肯定是最差的了，先不谈符不符合劳动法（`先抛开事实不谈`），这类公司加班情况若不严重，那倒是还可以接受，毕竟不加班的公司大概不存在；但如果加班情况较为严重，`啥都莫得` 可能就会成为离职的一大原因。


## 无效加班

**无效加班** 的情况比 **加班没有相应补偿** 要复杂一些，因为 加班没有相应补偿 的情况往往有直观感受，无效加班 就相对抽象一些，一般有以下几类 **无效加班** 情况：

1. 因为一些不必要的（奇怪的）需求、设计，导致工作量增加，从而导致加班。这类加班往往会在事后得到纠正，使得加班的工作成果被否定，从而造成无效加班。
2. "有备无患" 的加班。这类加班一般出现在机构中，当某某领导下来视察工作，往往会导致被视察单位的紧急加班，美其名曰“有备无患”，实际上就是**面子工程**，领导视察结束之后，加班的工作立马无效化。（**皇帝出巡不外如是**）
3. 固定加班。有些公司声称“企业文化”，要求员工每周固定加班，如：1、3、5八点；周6固定加班等等，就算没有工作也要求员工到岗。这类公司我只能给予一个评价：脑瘫。

无效加班是员工讨厌加班的一个重要原因，除了`固定加班`这类，其他类加班之所以称之为“无效加班”，是因为员工加班的工作并没有取得什么成果，往深了讲，这是关乎 **成就感** 的事情，当你的工作成果得到别人的认可，这会给予你一种成就感，让你感到加班是值得的，甚至“面子工程”都能给予你一定的成就感，这也是有些人热衷于“面子工程”的原因（`但愿你没有想法`）。

举个简单的例子：作为程序员，当你参研发的一个软件，甚至一个功能，有用户在使用时，这就是你工作的成果，这就是对你工作的一种认可，这就能给予你 **成就感** 。

## 替他人加班

**替他人加班** 这一点最复杂，因为是人就会犯错，犯错的原因也是千奇百怪，而且能否接受“替他人加班”也取决于你的个性和思想，所以什么情况的“替他人加班”你能够接受，什么情况你不能接受，这需要你自己去思考。

这里说明：**我认为无法接受的“替他人加班”的情况，就是因为他人原因出现“无效上班”或“无效加班”。**

### 一将无能，累死三军

**一将无能，累死三军** 这个词，在前些时日的“陈志龙”加班怒怼公司事件中出现，当时该事件引起了社会大众的强烈共鸣，热搜不断，虽然最后以“陈志龙”造谣结束，但引起的共鸣是真真实实存在的。

我认为“一将无能，累死三军”的含义是：由于一位领导的能力不足，导致员工莫名其妙的加班，并且情况十分严重，最后使得员工个人生活严重受到影响，甚至积劳成疾。当你有一位无能的领导时，大概率会出现 **无效上班**，当出现无效上班时，大概率又会导致加班，甚至连加班都是无效的，这是一系列因果关系的集合。

### 他人之错，我来买单

**他人知错，我来买单** 与 **一将无能，累死三军** 并无本质区别，只是犯错的一方从领导转移到了同事身上。

但是人总会犯错，你没办法避免这种情况的发生，所以这种情况又需要深入思考，什么样的“他人知错”是可以接受的呢？我认为当由于一个人知识的不足导致错误，并且这个人知错能改，这种情况是可以接受的。**但如果同事犯了非常低级错误，甚至公司有明文规定，或是已经犯过很多遍的错误，这种情况往往是无法接受的。** 因为这往往不是因为犯错人的能力不足，而是因为他的态度不端正、做事不用心。

当然，有时候确确实实是因为有些人的能力不足，但又我行我素（`简称：没点笔数`），这种情况(人)一旦出现，我的建议是：跑！能跑多远跑多远！

## 总结

以上就是我认为一些常见的，让人讨厌加班的原因。再次声明：**本文仅代表个人思想，如有不认同之处或其他意见建议，欢迎讨论。**

如果你认为有什么其他讨厌加班的原因，欢迎留言补充，如果合理，可以补充到正文。

- 彩蛋：昨日今日明日，有蛋糕吃就是生日。

![黑森林蛋糕](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1681659005145.jpg)

老狗随想：为什么讨厌加班？

twitter:card

twitter:title

https://images.oldmoon.top/images/dingdangdog/oldmoon.png

twitter:image

努力做一只帅气、有才、豁达的老狗！

twitter:description