为网页添加SEO优化以及将butterfly的背景统一

添加Google | Bing | Baidu 收录

搜索引擎的收录并不是在完成站点的数据验证后就能立即看到结果。在验证完成后，搜索引擎会开始对你的网站进行数据抓取，抓取完成后再进行索引。这个过程需要时间，所以即使验证了网站，仍然需要等待一段时间才能在搜索引擎中看到你的网站。你可以在过几天后，通过在搜索引擎中输入 site:你的网站 来检查是否已经被收录。

永久化 URL 网址链接

为什么要永久化 URL 网址链接？

对于默认的 Hexo 博客，每篇文章的链接由 _config.yml 文件中的 permalink 参数决定。默认设置为 permalink: :year/:month/:day/:title/，这意味着文章的链接会按照年、月、日和标题生成，如：https://username.github.io/2025/01/01/文章标题/。
然而，这种链接结构存在一些问题：

1. 链接变动频繁 ：每次更新文章时，链接可能会发生变化，这不利于搜索引擎的收录和用户的访问。
2. 链接层级过深 ：对于网络爬虫来说，这种链接结构层级过深，不利于爬虫的抓取。

因此，永久化 URL 网址链接（即固定链接）是非常必要的。以下是永久化 URL 的好处：

1. 短小精悍，方便阅读 ：固定链接通常较短，便于用户记忆和分享。
2. 便于搜索引擎收录 ：固定链接不会频繁变动，有助于提高搜索引擎的收录效率和排名。
3. 便于文章迁移 ：固定链接使得文章在迁移或重新发布时，链接保持不变，避免出现死链或重复内容。

如何优化 URL 结构？

为了优化 URL 结构，可以考虑以下几种方式：

1. 使用文章标题作为链接：将 permalink 设置为 :title/，这样链接将直接基于文章标题生成，例如：https://username.github.io/文章标题/。
2. 使用唯一标识符：可以为每篇文章分配一个唯一的标识符（如文章 ID 或 slug），并将其作为链接的一部分，例如：https://username.github.io/post/:id/。
3. 自定义短链接：手动为每篇文章设置一个简短的、有意义的链接，例如：https://username.github.io/my-post/。

输入yarn add hexo-addrlink --save安装hexo-addrlink插件，然后在_config.yml文件中添加以下配置：

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://www.teslongxiao.cn/
permalink: posts/:abbrlink.html
#并在最底下加入
# abbrlink config
abbrlink:
  alg: crc32      # support crc16(default) and crc32
  rep: hex        # support dec(default) and hex

配置完成后，每篇文章的链接将变为 https://username.github.io/posts/abbrlink.html，其中 abbrlink 是文章的唯一标识符，比如https://www.teslongxiao.cn/posts/56011.html

加入站点地图

为什么要永久化站点地图？

站点地图（Site Map）是一种用于描述网站结构、内容和链接关系的文件。它可以帮助搜索引擎更好地理解网站的结构，提高网站的收录率和排名。加入站点地图的好处包括：

1. 提高搜索引擎的抓取效率：站点地图可以告诉搜索引擎网站的结构和内容，从而提高抓取效率。
2. 提高网站的收录率：站点地图可以帮助搜索引擎更好地理解网站的结构和内容，从而提高网站的收录率。
3. 提高网站的排名：站点地图可以帮助搜索引擎更好地理解网站的结构和内容，从而提高网站的排名。
4. 提高用户体验：站点地图可以帮助用户更好地了解网站的结构和内容，从而提高用户体验。

输入yarn add hexo-generator-sitemap hexo-generator-baidu-sitemap --save安装hexo-generator-sitemap和hexo-generator-baidu-sitemap插件，然后在_config.yml文件中添加以下配置：

# 站点地图
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

配置完成后，每次生成网站时，sitemap.xml 和 baidusitemap.xml 文件将会自动生成，其中 sitemap.xml 是通用的站点地图文件，baidusitemap.xml 是针对百度搜索引擎的站点地图文件。

检查生成站点地图

检查是否生成成功，首先hexo d提交，过几分钟后，打开https://你的域名/sitemap.xml和https://你的域名/baidusitemap.xml，如果出现以下内容，则说明生成成功：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>你的网站地址</loc>
    <lastmod>2025-01-27T09:13:08.000Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>你所发布文章的地址</loc>
    <lastmod>2025-01-27T09:13:08.000Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

添加蜘蛛协议

蜘蛛协议robots.txt是给来访网站的服务器看的，告诉搜索引擎哪些页面可以抓取，哪些页面不可以抓取。

给你的hexo网站添加蜘蛛协议robots.txt，在/source/下创建一个名为 robots.txt 的文件，并添加以下内容：

User-agent: *
Allow: / 

Sitemap: https://你的域名/sitemap.xml
Sitemap: https://你的域名/baidusitemap.xml

其中的Allow: /这里允许所有搜索引擎爬取网站的所有内容，Sitemap:后面分别填写你的站点地图地址，这样搜索引擎就会爬取你的站点地图，从而收录你的网站。

添加Baidu收录

提交站点

首先，登录百度站长平台，在站点管理中添加你的网站，并验证网站所有权。验证方式有几种，比如文件验证、HTML标签验证、CNAME验证等，具体可以参考百度站长平台的文档。
这里我用HTML标签验证把content后面的值复制到theme/butterfly/_config.yml

site_verification:
  # - name: google-site-verification
  #   content: xxxxxx
  - name: baidu-site-verification
    content: 这里填你的content

提交部署后，过几分钟等待git提交完成，在百度站长平台，完成验证。

推送到百度

1. API自动提交
   然后输入yarn add hexo-baidu-url-submit --save安装hexo-baidu-url-submit插件，然后在_config.yml文件中添加以下配置：

   # 主动推送百度，被百度收录
   baidu_url_submit:
     count: 10 # 提交最新的10个链接
     host: # 百度站长平台中注册的域名
     token: # 秘钥，百度站长平台 > 普通收录 > 资源提交 > API提交 >接口调用地址中token字段
     path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里，不用改

   按照注释修改即可。
   最后在_config.yml的deploy中加入

   deploy:
     - type: git
       repo: https://github.com/你的用户名/你的用户名.github.io.git
       branch: main
   + - type: baidu_url_submit

   这样每次部署的时候，就会自动提交到百度。
2. 手动提交
   在百度站长平台，点击链接提交 > 自动提交 > 主动推送，将https://你的域名/baidusitemap.xml和https://你的域名/sitemap.xml填入，然后点击提交即可。

添加 Google 收录

1. 注册并验证网站所有权
   首先，访问 Google Search Console 注册你的站点，并验证网站所有权。Google 提供多种验证方式，如文件验证、HTML标签验证、CNAME验证等。详细内容请参考 Google Search Console的文档。

2. 提交域名

   • 在左侧选择“网域”验证，输入你的域名，然后点击验证。
   • 验证方式为通过 DNS 记录验证，此时会弹出窗口，提示你进行配置：
     
   • 以阿里云的域名管理为例：
     • 记录类型：选择 TXT。
     • 主机记录：填写 @（即主域名）。
     • 记录值：按提示要求填写。
   • 保存后，点击验证，稍等几分钟，验证成功后点击完成验证。

3. 添加站点地图
   在 Google Search Console 中，点击站点地图，将 https://你的域名/sitemap.xml 填入，并点击添加。请注意，Google 可能需要几小时至一天的时间来处理和显示站点地图。

4. 提交网站前缀
   选择右侧的“网站前缀”，输入你对应的网站信息，并选择 HTML标记：
   

   • 将 content 后面的值复制到你 Hexo 站点的 theme/butterfly/_config.yml 文件中。
   • 然后执行以下命令发布到 GitHub：hexo cl;hexo g;hexo d
   • 等待几分钟，Google Search Console 会自动检测到你的网站，并显示 已验证。

     这个等待时间比较长，我尝试十多分钟才显示已验证，中间还以为没上传到，重新上传一次又检查了/public/index.html的前面部分看看有没有生成<meta name="google-site-verification" content="你的content字符串"/>，所以耐心等待吧。

添加 Bing 收录

完成了Google的收录，Bing的收录就很简单了，直接在Bing站长平台用Google Search Console的验证方式验证即可。

参考链接： https://qmike.top/posts/2a1b5a62

将butterfly的背景统一

使背景图片与首页index图片一致，使文章top_img放到文章的顶部（post_content上面），效果如下（gif经过压缩凑合看看）：

修改主题的配置文件_config.yml的Image Settings部分，在对应的位置修改成以下内容：

disable_top_img: false
default_top_img: transparent  
index_img: transparent 
archive_img: 
tag_img:
tag_per_img:
category_img:
category_per_img:
footer_img: false #这里应该填transparent，但我已在themes\butterfly\source\css\_layout\footer.styl中设置毛玻璃效果，所以填false
background:  #这里填你的背景图片地址

然后在主题的配置文件_config.yml的[inject.head]或者自定义css中引入以下css：

/* 顶部图 */
/*将文章的top_img放到正文前*/
#page-header, #page-header:before {
  background-color: transparent !important;
  background-image: unset !important;
}

.top-img {
  height: 12.5rem;
  display: block;
  margin: -50px -40px 50px -40px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.3s;

  .read-mode {
    display: none;
  }

  @media screen and (max-width: 768px) {
    margin: -1.8rem -0.7rem 1.8rem -0.7rem;
  }

  [data-theme='dark'] & {
    filter: brightness(0.8);
  }
}

最后在themes/butterfly/layout/includes/post.pug为post.pug大概在第九行添加以下内容：

block content
  #post
    if top_img === false
      include includes/header/post-info.pug
      
+   .top-img.gist(style=`background-image: url(${url_for(top_img)})`)
    article#article-container.container.post-content
      if theme.noticeOutdate.enable && page.noticeOutdate !== false
        include includes/post/outdate-notice.pug

最后hexo cl;hexo g;hexo s查看效果。

参考链接： https://www.imcharon.com/60/

修改网站文章、侧边等卡片的背景

作者通过浏览器的检查工具，找到了文章卡片、侧边栏等卡片的css的id，然后修改了对应的css，使背景具有毛玻璃特效，效果如下：

1. dark mode:
   
2. light mode:
   

找到需要修改的元素所对应的id或class

首先按F12打开控制台，然后点击Elements，找到需要修改的元素，右键点击Copy，然后选择Copy Selector，如下图所示：

创建css文件

1. 创建themes/butterfly/source/css/_custom/layout/index.css并在其中添加以下内容：

   #recent-posts .recent-post-item
   ,#aside-content .card-widget
   ,#post
   ,#page
   ,#archive{
     background: rgba(255, 255, 255, .8); /* 设置背景颜色 */
     box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6); /* 设置阴影效果 */
     backdrop-filter: blur(7px); /* 添加毛玻璃特效 */
   }
   
   /*dark mode*/
   [data-theme="dark"] #recent-posts .recent-post-item
   ,[data-theme="dark"] #post
   ,[data-theme="dark"] #aside-content .card-widget
   ,[data-theme="dark"] #page
   ,[data-theme="dark"] #archive{
     background: rgba(24, 24, 30, .5); 
     backdrop-filter: blur(10px) brightness(1.2); 
     box-shadow: none; /* 移除阴影效果 */
   }

2. 在主题的配置文件_config.yml中的inject:加入：

     head:
       # - <link rel="stylesheet" href="/xxx.css">
       - <link rel="stylesheet" href="/css/_custom/footer/footer.css">
       - <link rel="stylesheet" href="css/_custom/post/modify.css">
   +   - <link rel="stylesheet" href="css/_custom/layout/index.css">

最后hexo cl;hexo g;hexo s查看效果。

该修改思路还可以运用在其他页面。
但值得注意的是，由于每次git pull更新主题都会把style等文件覆盖掉，所以需要把修改的文件放到source/css/_custom中，这样每次git pull更新主题时，修改的文件不会被覆盖掉。