Hexo Sakura主题的问题汇总

代码高亮

刚用的时候代码框十分诡异而且压根就没有高亮。找了几种方法并不可行，整理了一下几种可能错误的原因。
错误可能为
1.markdown(md)语法问题，将代码块改为如下格式：

```+语言名（比如java）
代码内容

2.与hexo自带的高亮冲突了，只要把站点配置文件中：
```TEXT
highlight:
  enable: true

true改为false就可以了。注意是站点配置文件而不是主题配置文件

搜索

搜索一直不能用的原因就是少了个插件。

git bash中执行：

npm install hexo-generator-json-content --save

文章内插入图片

在文章中写入:

![](/upload_image/1.jpg)

然后进入themes-主题名-source-upload_image目录下(自己创建)，将图片放到这个目录下，就可以了。

说明：当执行hexo g命令时，会自动把图片复制到 public文件的upload_image目录下。

赞赏页面的作者名称修改

赞赏页面的页脚作者永远是原作者的名称，可能是没有链接到变量的bug吧

修改方法为将”\blog\themes\Sakura\themes\Sakura\layout\donate.ejs”中的

<h3 itemprop="name">
<a href="<%- theme.url%>" itemprop="url" rel="author">houjun</a>
</h3>

“houjun”换为自己的名字就可以了

另外其他的相似问题比如友链页面的描述需要改动的话也是一样的方法

主题工具

在themes\sakura\layout\layout.ejs中：

  <div class="scrollbar" id="bar">
  </div>

前面添加：

 <%- partial('_partial/setdisplay') %> 
 <%- partial('_partial/set', null, {cache: !config.relative_link}) %>

原版是在<%- partial(‘_partial/mheader’, null, {cache: !config.relative_link}) %>前添加的，但要这样字体切换会出bug。

在\themes\sakura\layout_partial中新建set.ejs，内容：

<div class="changeSkin-gear no-select"> 
    <div class="keys" id="setbtn"> 
        <span id="open-skinMenu"> 
            SCHEME TOOL | 主题工具 &nbsp;
            <i class="iconfont icon-gear inline-block rotating">
            </i> 
        </span>
    </div> 
</div>

新建setdisplay.ejs，内容：

<div class="skin-menu no-select" id="mainskin" style="position: fixed"> 
    <div class="theme-controls row-container">
          <p style="text-align:center;font-family:'Monaco';font-weight:bold;color:#444"><i style="color:grey" class="fa fa-chevron-left"></i> background <i style="color:grey" class="fa fa-chevron-right"></i></p>
        <ul class="menu-list"> <li id="white-bg"> 
            <i class="fa fa-television" aria-hidden="true">
            </i>
            </li> 
            <li id="sakura-bg"> 
                <i class="iconfont icon-sakura">
                </i>
            </li>
            <li id="gribs-bg">
                <i class="fa fa-slack" aria-hidden="true">
                </i>
            </li>
            <li id="KAdots-bg">
                <i class="iconfont icon-dots">
                </i>
            </li>
            <li id="totem-bg">
                <i class="fa fa-optin-monster" aria-hidden="true">
                </i>
            </li>
            <li id="pixiv-bg">
                <i class="iconfont icon-pixiv">
                </i>
            </li>
            <li id="bing-bg">
                <i class="iconfont icon-bing">
                </i>
            </li>
            <li id="dark-bg">
                <i class="fa fa-moon-o" aria-hidden="true">
                </i>
            </li>
        </ul>
    </div>
    <canvas id="night-mode-cover">
    </canvas>
</div>

还要修点bug：

在\themes\sakura\source\js\sakura-app.js中，找到函数$(‘.skin-menu #dark-bg’).click(function ()，函数最底下添加：

setCookie('bgImgSetting','https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/starry_sky.png',30)

把所有形如：

$('.changeSkin-gear, .toc').css('background', 'none')
或
$('.changeSkin-gear, .toc').css('background', 'rgba(255,255,255,0.8)')

里的.changeSkin-gear,删掉。

这只是初始版，后面还有更高级的。

更换bing图片
bing主题是从bing随机图片api获取一张图片做背景，可以更换。

在\themes\sakura\source\js\sakura-app.js中，下面两句：

changeBGnoTrans('#bing-bg', 'https://api.shino.cc/bing/')

else if (bgurl == 'https://api.shino.cc/bing/')

其中的网址换成其他url。

位置和外观
在set.ejs里直接用css美化，可能还要修正setdisplay.ejs。

参考配置：

set.ejs：

<div class="changeSkin-gear no-select" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; visibility: visible; bottom: 0px;"> 
  <div class="keys" id="setbtn"> 
    <button id="open-skinMenu">
        <style>
        button#open-skinMenu{
            transition: all 0.2s linear 0s;
            outline:none;
            position:fixed;
            bottom:13px;
            left:15px;
            font-size:16px;
            background-color: rgba(255,255,255,.95);
            border-radius: 20px;
            box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.1);
        }
        button#open-skinMenu:hover{
            transition: all 0.2s linear 0s;
            background-color: rgb(255, 165, 0);
            color: rgba(255,255,255);
        }
        </style>
        <i class="iconfont icon-gear inline-block rotating">
      </i> 
        SCHEME TOOL | 主题工具 
    </button>
  </div> 
</div>

文章列表图片拉伸问题

浏览某个分类或标签下的文章下时，配图是被压缩成正方形的,导致原来的图片产生变形
解决办法为：
在\themes\sakura\source\css\style.css中，找到.feature img，内部添加：

 object-fit: cover;

对主题进行魔改

生成网页的代码都在\blog\themes\Sakura\themes\Sakura\layout文件夹中，通过名称可以找到整个网页的代码，对照生成的网页源码找到对应的额文件进行修改即可。不清楚相对路径是否形同，可以多多进行尝试

后续cdn的添加和修改

如果需要对cdn里的文件进行修改，例如删除和更名，改变文件结构等：

克隆Github仓库到本地

点击 Clone or download，一键复制仓库地址

在本地目录右键 Git Bash Here，执行以下命令：

git clone 一键复制的仓库地址

上传资源

复制需要上传的资源到本地git仓库（注：jsDelivr不支持加载超过20M的资源），在本地git仓库目录下右键 Git Bash Here，执行以下命令：

git status                    //查看状态
git add .                     //添加所有文件到暂存区
git commit -m '第一次提交'      //把文件提交到仓库
git push                      //推送至远程仓库

发布仓库

点击release发布

自定义发布版本号

通过jsDelivr引用资源

使用方法：https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径
或者：https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@master/文件路径,这样可以不用再github中release版本
例如：
https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@1.0/images/trhx.png
https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.0.1/css/style.css
https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.3//The%20Pet%20Girl%20of%20Sakurasou.mp4
注意：版本号不是必需的，是为了区分新旧资源，如果不使用版本号，将会直接引用最新资源，除此之外还可以使用某个范围内的版本，查看所有资源等，具体使用方法如下：

• // 加载任何Github发布、提交或分支

• https://cdn.jsdelivr.net/gh/user/repo@version/file

• // 加载 jQuery v3.2.1

• https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

• // 使用版本范围而不是特定版本

• https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js

• https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

• // 完全省略该版本以获取最新版本

• https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

• // 将“.min”添加到任何JS/CSS文件中以获取缩小版本，如果不存在，将为会自动生成

• https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

• // 在末尾添加 / 以获取资源目录列表

• https://cdn.jsdelivr.net/gh/jquery/jquery/

Rss页面修改

RSS配置后是404的页面，解决步骤如下：
安装插件

npm install hexo-generator-feed

主配置_config.yml文末添加

# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
 hexo-generator-feed
#Feed Atom
feed:
  type: atom #RSS的类型(atom/rss2)
  path: atom.xml #文件路径,默认是atom.xml/rss2.xml
  limit: 20 #展示文章的数量,使用0或则false代表展示全部
  hub:
  content: #在RSS文件中是否包含内容 ,有3个值 true/false默认不填为false
  content_limit: 140 #指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现
  content_limit_delim: ' ' #上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容,，防止从中间截断.
  order_by: -date
  icon: #icon.png

主题配置themes\sakura_config.yml文末添加(sakura主题中应该已有这一句，如果已有的话可以直接跳过)

# 简易信息聚合,站点共享
rss: /atom.xml

添加搜索引擎收录

查看网站是否被收录

首先我们可以输入 site:域名 来查看域名是否被搜索引擎收录，如果没有相关网页，表示没有收录

提交百度搜索

github是禁止百度爬虫的，所以如果你是和我一样在github中建立的静态网站，想要在百度中被搜到需要将博客双线部署到国内的代码托管平台。这里使用Coding。另外百度收录的所需的时间较长，大约半个月左右才会看到效果！

1. 创建项目：进入 Coding 官网，点击个人版登陆，没有账号就注册一个并登录，进入后有啥提示引导的话跳过，点击创建项目。项目名称建议和你的用户名一致，这样做的好处是：到时候可以直接通过user_name.coding.me访问你的博客，如果项目名与用户名不一致，则需要通过user_name.coding.me/project_name才能访问，项目描述可以随便写
2. 配置公钥。配置 SSH 公钥方法与 GitHub Pages 的方式差不多，点击你的头像，依次选择 个人设置-SSH公钥-新增公钥，前面部署到 GitHub Pages 的时候就已经有了一对公钥，我们直接将该公钥粘贴进去就行，公钥名称可以随便写，选中永久有效选项 PS：公钥储存位置一般在 C:\Users\用户名.ssh 目录下的 id_rsa.pub 文件里，用记事本打开复制其内容即可。另外由于coding的UI变化很快，所以有些按钮的位置和层级已经变化需要找一下，但是差的不多，实在不行的话就百度
3. 添加公钥后，我们可以右键Get Bash，输入以下命令来检查是否配置成功：

   ssh -T git@e.coding.net `
   

   若出现以下提示，则证明配置成功：

   coding 提示: Hello XXX, You've connected to Coding.net via SSH. This is a personal key.
   XXX，你好，你已经通过 SSH 协议认证 Coding.net 服务，这是一个个人公钥
   

4. 配置 _config.yml:进入你的项目，在右下角有选择连接方式，选择 SSH 方式（HTTPS 方式也可以，但是这种方式有时候可能连接不上，SSH 连接不容易出问题），一键复制，然后打开你本地博客根目录的 _config.yml 文件，找到 deploy 关键字，添加 coding 地址，也就是刚刚复制的 SSH 地址:

   deploy:
   type: git
   repository: 
    github: git@github.com:xxx/xxx.github.io.git
    coding: git@e.coding.net:xxx/xxx/xxx.git
   branch: master
   

   注意中间有空格。添加完成后先执行命令 hexo clean 清理一下缓存，然后执行命令 hexo g -d 将博客双线部署到 Coding Pages 和 GitHub Pages，可以查看一下代码仓库是否有代码上传，如果有即表示部署成功：
5. 开启 Coding Pages。打开 项目设置-项目与成员-功能开关，打开 持续集成 和 持续部署，然后在 持续部署 中可以看到静态网站。经过身份验证后即可开启
6. 绑定域名并开启 HPPTS：首先在你的域名 DNS 设置中添加一条 CNAME 记录指向 xxxx.coding.me，解析路线选择 默认，将 GitHub 的解析路线改为 境外，这样境外访问就会走 GitHub，境内就会走 Coding，也有人说阿里云是智能解析，自动分配路线，如果解析路线都是默认，境外访问同样会智能选择走 GitHub，境内走 Coding，我没有验证过，有兴趣的可以自己试试，我的解析如下图所示：
   然后点击静态 Pages 应用右上角的设置，进入设置页面，这里要注意，如果你之前已经部署到了 GitHub Pages 并开启了 HTTPS，那么直接在设置页面绑定你自己的域名，SSL/TLS 安全证书就会显示申请错误，当你访问你的网站时，浏览器就会提示不是安全连接。申请错误原因是：在验证域名所有权时会定位到 Github Pages 的主机上导致 SSL 证书申请失败
   正确的做法是：先去域名 DNS 把 GitHub 的解析暂停掉，然后再重新申请 SSL 证书，大约十秒左右就能申请成功，然后开启强制 HTTPS 访问
   这里也建议同时绑定有 www 前缀和没有 www 前缀的，如果要绑定没有 www 前缀的，首先要去域名 DNS 添加一个 A 记录，主机记录为 @，记录值为你博客 IP 地址，IP 地址可以在 cmd 命令行 ping 一下得到，然后在 Coding Pages 中设置其中一个为【首选】，另一个设置【跳转至首选】，这样不管用户是否输入 www 前缀都会跳到有 www 前缀的了
   至此，我们的 Hexo 博客就成功双线部署到 Coding Pages 和 GitHub Pages 了。
7. 访问百度搜索资源平台官网，注册或者登陆百度账号，依次选择 用户中心-站点管理 ，添加你的网站，在添加站点时会让你选择协议头（http 或者 https），之后会让你验证网站所有权，提供三种验证方式：

• 文件验证：下载给定的文件，将其放到本地主题目录 source 文件夹，然后部署上去完成验证
• HTML 标签验证：一般是给一个 meta 标签，放到首页 与 标签之间即可完成验证
• CNAME 验证：去域名 DNS 添加一个 CNAME 记录即可完成验证

1. 提交百度搜索:百度提供了自动提交和手动提交两种方式，其中自动提交又分为主动推送、自动推送和 sitemap 三种方式,推荐同时使用主动推送和 sitemap 方式
2. 主动推送可以在博客根目录安装插件 npm install hexo-baidu-url-submit —save，然后在根目录 _config.yml 文件里写入以下配置：

   baidu_url_submit:
   count: 1               # 提交最新的多少个链接
   host: www.itrhx.com    # 在百度站长平台中添加的域名
   token: your_token      # 秘钥
   path: baidu_urls.txt   # 文本文档的地址， 新链接会保存在此文本文档里
   

   其中的其中的 token 可以在【链接提交】-【自动提交】-【主动推送】下面看到，接口调用地址最后面 token=xxxxx 即为你的 token
   同样是在根目录的 _config.yml 文件，大约第 17 行处，url 要改为在百度站长平台添加的域名，也就是你网站的首页地址：

   # URL
   url: https://www.itrhx.com
   root: /
   permalink: :year/:month/:day/:title/
   

最后，加入新的 deployer：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
  repository:
    github: git@github.com:TRHX/TRHX.github.io.git  # 这是原来的 github 配置
    coding: git@git.dev.tencent.com:TRHX/TRHX.git   # 这是原来的 coding 配置
  branch: master
- type: baidu_url_submitter                         # 这是新加的主动推送

最后执行 hexo g -d 部署一遍即可实现主动推送，推送成功的标志是：在执行部署命令最后会显示类似如下代码：

{"remain":4999953,"success":47}
INFO  Deploy done: baidu_url_submitter

1. sitemap提交：首先我们要使用以下命令生成一个网站地图：

npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save

这里也注意一下，将根目录的 _config.yml 文件，大约第 17 行处，url 改为在百度站长平台添加的域名，也就是你网站的首页地址：

# URL
url: https://www.itrhx.com
root: /
permalink: :year/:month/:day/:title/

然后使用命令 hexo g -d 将网站部署上去，然后访问 你的首页/sitemap.xml 或者 你的首页/baidusitemap.xml 就可以看到网站地图了
比如我的是：https://www.itrhx.com/baidusitemap.xml 或者 https://www.itrhx.com/sitemap.xml
其中 sitemap.xml 文件是搜索引擎通用的 sitemap 文件，baidusitemap.xml 是百度专用的 sitemap 文件
然后来到百度站长平台的 sitemap 提交页面，将你的 sitemap 地址提交即可，如果成功的话状态会显示为正常，初次提交要等几分钟，sitemap.xml 相比 baidusitemap.xml 来说等待时间也会更长，如果以后你博客有新的文章或其他页面，可以点击手动更新文件，更新一下新的 sitemap

提交谷歌搜索

提交谷歌搜索引擎比较简单，在提交之前，我们依然可以使用site:域名查看网站是否被收录
接下来我们将网站提交谷歌搜索引擎搜索，进入谷歌站长平台，登录你的谷歌账号之后会让你验证网站所有权.所有操作需要科学上网
之后有两种验证方式，分别是网域和网址前缀，选择一个适合的就行。我用的是比较简单的网址前缀，根据谷歌给的提示做后续的操作就可以的。
谷歌收录基本上等几分钟就可以看到结果了，非常快,而且也不需要添加sitemap或者设置自动推送就可以直接抓取到内容了，非常方便

提交必应搜索

必应收录也是很简单，点击必应站长。先注册登录，必应收录有两种方式，一种使用刚刚谷歌导入过去，第二种是就是自己添加URL,跟着提示操作就行。不过必应也收录也比较慢，只比百度稍快一点

使用Latex

在博客中如果有书写数学公示的需求，那么一定会用到Latex.Sakura主题中已经内置有Latex语法，只要在主题文件夹中的_config.yml文件中将mathjax设置为1即可。

参考文章/网站：

ctz’s blog
yremp’s blog
https://blog.csdn.net/qq_36759224/article/details/100879609
https://www.itrhx.com/2019/09/17/A48-submit-search-engine-inclusion/