背景音乐添加,SEO,评论

本文最后更新于 2024年10月21日 早上

背景音乐添加

这里参考作者的全局吸底Aplayer教程，为方便后续自己查阅，特摘抄出来。

首先安装hexo-tag-aplayer插件,官方github；

博客根目录安装：

1
npm install --save hexo-tag-aplayer

由于需要全局都插入aplayer和meting资源，为了防止插入重复的资源，需要把asset_inject设为false

在hexo的配置文件中

1
2
3
aplayer:
  meting: true
  asset_inject: false

在主题配置文件中，enable设为true和per_page设为true

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

然后把代码插入到页脚中

1
2
3
4
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>

运行Hexo就可以看到网页左下角出现了Aplayer

最后，如果你想切换页面时，音乐不会中断。把主题配置文件的pjax设为true即可。

参数解释：

选项默认值描述
data-id必须值歌曲 id / 播放列表 id / 相册 id / 搜索关键字
data-server必须值音乐平台: netease, tencent, kugou, xiami, baidu
data-type必须值song, playlist, album, search, artist
data-fixedfalse开启固定模式
data-minifalse开启迷你模式
data-loopall列表循环模式：all, one,none
data-orderlist列表播放模式： list, random
data-volume0.7播放器音量
data-lrctype0歌词格式类型
data-listfoldedfalse指定音乐播放列表是否折叠
data-storagenamemetingjsLocalStorage 中存储播放器设定的键名
data-autoplaytrue自动播放，移动端浏览器暂时不支持此功能
data-mutextrue该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
data-listmaxheight340px播放列表的最大长度
data-preloadauto音乐文件预载入模式，可选项： none, metadata, auto
data-theme#ad7a86播放器风格色彩设置

SEO优化

1 文章路径

做了一些文章路径的优化，Hexo默认永久链接是 :year/:month/:day/:title/的格式，这样不美观，也不利于SEO。

在站点配置文件中修改：

1
permalink: posts/:hash/	 # 我这里改成posts/:hash

这样文章的路径就没有讨厌的年月日格式了。

2 添加站点地图#

我这里使用的是hexo-generator-seo-friendly-sitemap，生成网站地图。

网站地图是什么？

网站地图实际上就像是一个站点的导航文件。网站地图的重要性：

  • 搜索引擎每天都是让爬虫在互联网爬行来抓取页面，站点地图的作用就是给爬虫爬行构造了一个方便快捷的通道，因为网站页面是一层一层的链接的，其中可能会存在死链接的情况，如果没有站点地图，爬虫爬行在某个页面就因死链接爬行不了，那么就不能收录那些断链接的页面。
  • 站点地图的存在不仅是满足搜索引擎爬虫的查看，更多是方便网站访客来浏览网站，特别是例如门户型网站由于信息量太多很多访客都是通过站点地图来寻找到自己需要的信息页面，这也能很好的提高用户体验度 。
  • 站点地图可以提高链接页面的权重，因为站点地图是指向其他页面的链接，此时站点地图就给页面增加了导入链接，大家知道导入链接的增加会影响到页面的权重，从而提高页面的权重，页面权重的提高同时会提高页面的收录率。

使用方法：

hexo根目录下安装：

1
npm install hexo-generator-seo-friendly-sitemap --save

在Hexo站点配置文件添加：

1
2
3
4
sitemap:
    path: sitemap.xml
    tag: false
    category: false
参数解释
path索引地图的路径，保持默认就好
tagfalse:标签页不添加到网站地图中（推荐）
categoryfalse:分类页不添加到网站地图中（推荐）

设置之后，网站地图就生成完毕了。

以我的站点为例，

网站地图索引：https://www.yyyzyyyz.cn/sitemap.xml

文章网站地图：https://www.yyyzyyyz.cn/post-sitemap.xml

页面网站地图：https://www.yyyzyyyz.cn/page-sitemap.xml

接下来，我们需要将生成的网站地图提交到谷歌、百度、必应等站点，注册账号，添加你的域名，然后复制刚才生成的网站地图上传。之后等待爬虫抓取就好了。下面是sitemap上传示例。

百度：

img

必应：

img

谷歌：

关于谷歌，有能力的同学可以尝试一下。

img

3 自动推送#

使用hexo-submit-urls-to-search-engine插件，每次hexo -d时，可自动推送Hexo博客新链接至谷歌、百度、必应搜索引擎站长平台以提升网站收录质量和速度。解放双手，一劳永逸。

首先在本地hexo根目录下安装：

1
npm install --save hexo-submit-urls-to-search-engine

获取站长平台API token，关于这部分内容，官方文档有详细介绍，点击查看

假设你已经阅读了官方文档，并且获得了token。获取token之后，Hexo站点配置文件添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
hexo_submit_urls_to_search_engine:
  submit_condition: count #链接被提交的条件，可选值：count | period 现仅支持count
  count: 10 # 提交最新的10个链接
  period: 900 # 提交修改时间在 900 秒内的链接
  google: 0 # 是否向Google提交，可选值：1 | 0（0：否；1：是）
  bing: 1 # 是否向bing提交，可选值：1 | 0（0：否；1：是）
  baidu: 1 # 是否向baidu提交，可选值：1 | 0（0：否；1：是）
  txt_path: submit_urls.txt ## 文本文档名， 需要推送的链接会保存在此文本文档里
  baidu_host: https://cjh0613.github.io ## 在百度站长平台中注册的域名
  baidu_token: 请按照文档说明获取 ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  bing_host: https://cjh0613.github.io ## 在bing站长平台中注册的域名
  bing_token: 请按照文档说明获取 ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  google_host: https://cjh0613.github.io ## 在google站长平台中注册的域名
  google_key_file: Project.json #存放google key的json文件，放于网站根目录（与hexo _config.yml文件位置相同），请不要把json文件内容直接发布在公众仓库里!
  google_proxy: http://127.0.0.1:8080 # 向谷歌提交网址所使用的系统 http 代理，填 0 不使用
  replace: 0  # 是否替换链接中的部分字符串，可选值：1 | 0（0：否；1：是）
  find_what: 
  replace_with:

关于谷歌，如果不想提交到谷歌，设置google和google_proxy为0。

配置完成。

接下来只需要hexo clean && hexo generate && hexo deploy即可。

如果推送成功，你会看到如下消息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Bing response:  { d: null }
Bing response:  { d: null }
Bing response:  { d: null }
Bing response:  { d: null }
Bing response:  { d: null }
Bing response:  { d: null }
Bing response:  { d: null }
Bing response:  { d: null }
Baidu response:  {"remain":2992,"success":8}
Google response:  {
  urlNotificationMetadata: {
    url: 'https://www.yyyzyyyz.cn/posts/25075e302733/',
    latestUpdate: {
      url: 'https://www.yyyzyyyz.cn/posts/25075e302733/',
      type: 'URL_UPDATED',
      notifyTime: '2021-11-18T11:16:27.108920085Z'
    }
  }
}

4 添加robots.txt#

关于robots协议，可以查看我的这篇博客，简单来说就是可以指定搜索引擎爬虫可以抓取什么内容、不可以抓取什么内容。

这些网站可以在线生成robots.txt任选一个即可：tool在线生成，ChinaZ在线生成，dqdv在线生成，w3cschool在线生成

复制生成的内容，新建一个robots.txt将内容粘贴进去，然后将它上传至网站根目录下。

可以在这里验证你的文件是否生效：验证robots

5 添加rel#

为网站使用到的所有外链添加rel="noopener external nofollow noreferrer", 可以有效地加强网站SEO和防止权重流失。github

hexo博客根目录安装：

1
npm i hexo-filter-nofollow --save

然后在配置文件添加：

1
2
3
nofollow:
  enable: true
  field: site

添加评论

最开始使用的是utterances，现在改为Twikoo

具体配置参见：Twikoo

我使用的是Vercel部署，主要是因为免费。作者为我们提供了视频的部署教程，点击查看

我为了偷懒，Vercel使用github登录， MongoDB使用google帐号登录。

补充说明#

这里补充几点：

mongodb+srv://7dragonpig:qi6272727@7dragonpig.peah4wi.mongodb.net/?retryWrites=true&w=majority&appName=7dragonpig

envId: https://twikoo-api-smoky-phi.vercel.app

  • 配置文件的修改在MONGODB控制台中，点击Browse Collections

image

  • 关于代码高亮，需要在配置中配置HIGHLIGHT:true

    语法：

    1
    <pre><code class="language-css">p { color: red }</code></pre>

    其中class="language-css"换成需要的语言。

    另外twikoo支持md语法，所以直接使用md语法添加代码块同样可行。

利用企业微信实现twikoo新消息提醒：

文章参考：

操作步骤如下：

1 注册企业微信#

进入企业微信创建一个企业。每个普通用户都可以创建企业，不需要很麻烦，但是需要填写一些基本信息。

2 企业微信创建应用#

在 “企业微信 —— 应用管理” 底部的 “自建” 应用处，新建一个 “应用”。
image

创建完成后，记录下应用页面的AgentId和Secret。查看Secret需要安装一个企业微信，查看完可以卸载。

在 “企业微信 —— 我的企业” 底部，记录下 企业 ID。

3 部署 API 云函数#

我之前使用vercel部署过twikoo，因此不需要再创建新的云函数。如果你不是使用vercel，参考这里

找到你的twikoo github仓库，clone到本地，进入api/，执行以下命令：

1
2
pip install pipenv
pipenv install requests

然后在该目录创建一个python.py文件，内容如下：

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
from http.server import BaseHTTPRequestHandler
import json
import requests
from urllib.parse import parse_qs

class handler(BaseHTTPRequestHandler):
    

    def do_GET(self):
        def getTocken(id, secert, msg, agentId):
            url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=" + \
                id + "&corpsecret=" + secert

            r = requests.get(url)
            tocken_json = json.loads(r.text)
            # print(tocken_json['access_token'])
            sendText(tocken=tocken_json['access_token'], agentId=agentId, msg=msg)

        def sendText(tocken, agentId, msg):
            sendUrl = "https://qyapi.weixin.qq.com/cgi-bin/message/send?access_token=" + tocken
            # print(sendUrl)
            data = json.dumps({
                "safe": 0,
                "touser": "@all",
                "msgtype": "text",
                "agentid": agentId,
                "text": {
                    "content": str(msg)
                }
            })
            requests.post(sendUrl, data)
            
        try:
            params = parse_qs(self.path[12:])
            apiid = params['id'][0]
            apisecert = params['secert'][0]
            apiagentId = params['agentId'][0]
            apimsg = params['msg'][0]
        except:
            apimsg = self.path
        else:
            #try:
            # 执行主程序
            getTocken(id=apiid, secert=apisecert,
                        msg=apimsg, agentId=apiagentId)
            #except:
            #    status = 1
            #    apimsg = '主程序运行时出现错误，请检查参数是否填写正确。详情可以参阅：https://blog.zhheo.com/p/1e9f35bc.html'
            #else:
            #    status = 0
        # print(event)
        # print("Received event: " + json.dumps(event, indent = 2))
        # print("Received context: " + str(context))
        # print("Hello world")

        self.send_response(200)
        self.send_header('Content-type', 'text/plain')
        self.end_headers()
        self.wfile.write(apimsg)
        return

注意文件名命名必须是python.py 否则你可能需要更改获取query parameters部分的代码。

将改动push到远程仓库，等待一会，vercel会自动部署。当Vercel完成部署后，可以使用下面这样的方式，拼接一个 URL，浏览器访问，看看手机微信能不能接收到消息。

API参数：

参数类型必选描述示例
idstrtrue企业微信公司idww42a2d7**********
secertstrtrue企业微信应用的应用secertxD_*****_6hVymgTBZuTaZviu9i3P4Xd6**********
agentIdinttrue企业微信应用的应用agentId1000003
msgstrtrue需要发送的内容helloworld

完整的url如下所示：

1
https://<vercel_app_address>/api/python?id=<企业id>&secert=<secret>&agentId=<agentId>&msg=测试一下吧

将上述url的内容替换成你的信息。其中，vercel_app_address可以在vercel应用界面查看，如下图：
image

测试一下你的访问路径是否有效，如果能收到消息就说明成功。

4 在twikoo中配置#

在twikoo后台管理WECOM_API_URL中添加你拼接的url即可。

注意msg后面不要有参数：

1
https://<vercel_app_address>/api/python?id=<企业id>&secert=<secret>&agentId=<agentId>&msg=

image

5 在微信中接收企业微信消息#

在“企业微信——我的企业——微信插件”页面配置，点击这里查看。

使用微信扫码，关注你的企业微信，并且在设置中打开允许成员在微信插件中接收和回复聊天消息选项。

image

大功告成！现在，使用一个非博主的邮箱，去评论一条试试吧。

blog优化
#Hexo
背景音乐添加,SEO,评论
https://bing.7dragonpig.cn/posts/ab48daca/
作者
七龙猪
发布于
2024年4月29日
许可协议