博客踩坑记录

发表于 更新于 分类于 ， ， Waline： 阅读次数：

主要来介绍介绍这两天搭建博客当中遇到的一些坑

正文

语言问题

让我想想我踩了几个坑了。在语言上，新版本明明是zh-CN，结果显示出来的确实阿拉伯语。这说明配置的语言文件不能识别，就默认换成排在第一位的阿拉伯语。而旧版的网站上提示用zh-Hans，综合一下，估计需要把next下language中的zh-CN重命名为zh-Hans，再把主题和hexo下的config文件的语言全部更换为zh-Hans即可。

透明度问题、圆角问题、搜索栏被遮掩问题。

圆角也给我搞懵了。看起来似乎是直接全局透明会导致出现阴影，而单独透明不会有这个问题。而菜单栏的透明度是不能用opacity的，否则会出现被其他图层覆盖而不能搜索。

1
2
3
4
//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

综合来讲，style.styl文件内容如下：

（旧方法，不明确）

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


//背景图片设置
body {
    background-image: url(https://s2.loli.net/2023/01/18/67JcoV9ZM1WGxiK.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    //文章内容的透明度设置
.content-wrap {
  opacity: 0.88;
}
​
//侧边框的透明度设置
.sidebar {
  background-color: transparent;
  opacity: 0.9;
}
​
//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

.main-inner { 
   // margin-top: 60px;
   // padding: 60px 60px 60px 60px;

}


.sidebar-inner {
  opacity: 0.9;
}

}

（新方法，明确）

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
61
style.stl文件如下（要能用需要在config文件里   启用style文件）
//背景图片设置
body {
    background-image: url(https://s2.loli.net/2023/01/18/67JcoV9ZM1WGxiK.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    //文章内容的透明度设置
.content-wrap {
  opacity: 0.88;
}

//侧边框的透明度设置
.sidebar {
  background-color: transparent;
  opacity: 0.96;
}

//菜单栏的透明度设置
.header {
  opacity: 0.96;
}

//内部的透明度设置（如果不设置，启用localsearch时会出现重叠和遮盖问题）
.header-inner {
  background: rgba(255,255,255,0.9);
}

.main-inner { 
   // margin-top: 60px;
   // padding: 60px 60px 60px 60px;

}


.sidebar-inner {
  opacity: 0.9;
}

································

**而正文的透明度要去**
blog\themes\hexo-theme-next\source\css_common\components\post\index.styl
//修改变量为如下
.use-motion {
  if (hexo-config('motion.transition.post_block')) {
    .post-block {
      visibility: hidden;
      margin-top: 60px;   //文章头部到网站顶部距离
      margin-bottom: 60px;
      margin-left: 2px;
      padding-top: 45px;
      // border-radius: 20px 20px 20px 20px;
      -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
      -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
      opacity: 0.95; // 添加透明度
    }
    .pagination, .comments {
      visibility: hidden;
    }
  }

头像问题

老版本不能使用圆形头像，必须要新版本。老版本在18年左右就停更了

cannot get问题

如果是connot get 什么什么%20，则需要把next中配置文件进行修改，举例如下(以tags标签报错为例)：

1
2
3
4
5
6
menu:
  tags: / || fa fa-home
  改为

  menu:
  tags: /|| fa fa-home

修改完之后不再提示20%，但是依旧报错。这时候需要进入gitbash输入

1
hexo new page "tags"

在hexo目录下source文件夹中生成tags页面。修改其中tags.md内容为：

1
2
3
4
5
---
title: "tags"
type: tags
layout: "tags"
---

时区问题

就填Aisa/Shanghai，不要乱换。换成Beijing会报错的，不清楚为什么。

标题问题

拿井号设置标题级别的时候空一个再跟文字

图片问题

插入图片

1
<img src="https://cdnjson.com/images/2023/01/19/SHINKU_e19b.jpg" width="70%" />

方法二（不能修改大小，适合本地图片）

1
![真红](https://cdnjson.com/images/2023/01/19/SHINKU_e19b.jpg)

图片圆角

站内图片圆角
请在站点根目录进入source、_data文件夹，如果没有variables.styl文件请手动创建，创建完毕后在其中添加

1
2
3
img {
    border-radius: 3%;
}

或

1
2
3
4
5
6
img {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

第一个表示图片的四个角都是一样的弧度
第二个可以自己手动设定每一个角的弧度
不过要注意，这样设置完后所有文章的图片都会加上圆角

lazyload与pjax冲突

目前使用的均为图床图片，采用外链，故本地上传的他图片问题还没有去解决。
关于外链，出现bug：

首先，我使用的lazyload安装是

1
npm install hexo-lazyload-image --save

由于lazyload和pjax之间错综复杂的关系，直接说我也不清楚
按照有位博主的博客来说，这两个插件可能会有冲突，导致第一次图片无法显示，刷新一次才能显示。因此需要把站点配置文件中关于lazyload 的配置加上isSPA: false才可以。
实践发现，确实lazyload和pjax之间有直接联系，设置欠缺会导致冲突。
具体讲，当我开了lazyload和pjax，isSPA: false时，正常进入主页，图片无法加载。只有重复刷新浏览器（手动使用浏览器自带刷新按钮或重输网址）才能恢复

而当我设置isSPA: true时，正常进入网页后主页图片可能正常也可能不正常，如果主页图片正常，当重复刷新浏览器后图片消失，但只要通过左侧菜单栏点击图标重新返回界面，图片就能正常显示。
或者说，只要开了它的true，那不管你图片能不能加载出来，只要用左边的菜单栏操作（比如主页、分类等等，只要不用浏览器自带的刷新按钮或者手动输入网址），图片都可以重新正常加载。

所以，综合前面的经验来看，这个bug基本可以表述如下：
由于同时使用lazyload以及pjax，加上配置少了一项导致发生冲突，图片无法正常显示。需要在lazyload配置中添加isSPA: true才能正常显示（这东西是和enable: true同级的）
但是不管怎么样，一旦手动重新刷新浏览器就会导致图片失效。
如果配置了isSPA: true后只需要点击左侧菜单栏操作就可以恢复，而false或者没有这一条会导致只有通过不断刷新浏览器才有可能恢复正常

手机端暂时没有发现这个bug

另外，由于本地至github的图片加载太慢，所以目前普遍在用图床。要记住如果之后有一些必须要有图片的博客，尽量在本地备份一份图片，防止图床失效导致信息丢失

文章插入网易云音乐

直接把网易云给的那一串什么iframe标签和src那些全给粘过来放到md正文就行了

置顶问题

2023使用Next 8.X版本记录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
3.置顶
在post.njk的
            {{- next_url(post.path, post.title or __('post.untitled'), {class: 'post-title-link', itemprop: 'url'}) }}
          {%- else %}
            {{- post.title }}
            {{- post_edit(post.source) }}
          {%- endif %}
        </{% if is_index %}h2{% else %}h1{% endif %}>

        后加入
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=#00CED1>置顶</font>
    <span class="post-meta-divider"></span>
{% endif %}
        <div class="post-meta-container">
          {{ partial('_partials/post/post-meta.njk') }}

原本在post.swig里是

1
2
<div class="post-meta">
{%- set date_diff = date(post.date) != date(post.updated) %}

改为

1
2
3
4
5
6
7
8
9
<div class="post-meta">

  {% if post.top %}
   <i class="fa fa-thumbtack" style="color: #191970"></i>
    <font color=#00CED1>置顶</font>
    <span class="post-meta-divider">|</span>
  {% endif %}

  {%- set date_diff = date(post.date) != date(post.updated) %}

亲测网上说的图标设置为fa fa-thumb-tack无效，需要设置成fa fa-thumbtack

Markdown插入代码展示却被执行

比如上面一条的代码，光写内容会显示出来置顶二字和一个图钉。为了要求我们展示的代码不被执行，可以采用```后面紧跟随便一串字符，表示以下代码表示什么语言的代码。你整了个根本没有的计算机语言，自然就不会被执行了。

主题安装

注意解压出来的文件夹要求点开后就得是配置文件所在的目录，你不能在next目录下再套一个只有next文件夹的目录。换句话说，不要套娃

##加注释
使用

1
<!-- xxxxxxxxxxx -->

##开头的“—”
在三道杠下空一行再插入内容，不论是图片还是什么，否则换行会失效

Local Search的CDN加速

免费CDN：jsDelivr+Github 使用方法

1
2
3
4
5
//需要用到的更新指令（教程中也有的）
git status                    //查看状态
git add .                     //添加所有文件到暂存区
git commit -m '第一次提交'      //把文件提交到仓库
git push                      //推送至远程仓库

自定义字体问题

到站点source目录”_data”中variables.style中添加以下内容注册字体

1
2
3
4
@font-face{
    font-family: ZCOOL KuaiLe;
    src: url('//cdn.jsdelivr.net/gh/hnsszk/hnsszk.github.io/fonts/ZCOOL KuaiLe.ttf');
}

或

1
2
3
4
@font-face{
    font-family: *; //名称自拟，写什么都可以，只要后面文章指定这里自定义的名称，以及字体文件也叫这个名字，就能显示字体，
    src: url('/fonts/*.ttf'); //这个表示本地字体文件，请在站点source目录下新建名为fonts的文件夹，即引用此文件夹内容
}

注意字体名称用中文会报错

先到这里吧

零散：搭建本博客用到的一些插件/教程

1.pjax用于网易云音乐，表示局部刷新。当正常情况播放网易云音乐时，如果点进其他标签页，会导致播放暂停，因为播放器也被刷新了。

2.插入网易云音乐

【Hexo】Next主题添加全局播放翻页不间断的网易云音乐

3.pjax和lazyload冲突导致图片不能加载

终于解决了hexo开启懒加载后图片无法立即显示的问题

4.圆角、透明：

nexT主题更改背景图片和边框圆角

5.更换背景（实际上这一篇给了非常多的内容，比如live2d，动画评论等等）

Hexo-Next主题搭建个人博客最新配置教程！

6.搭建基础流程

利用Github DIY自己的个人博客
但是，其中有需要改进的地方（跟着他做可能会失败的地方）
①安装nodejs和git不要下载压缩包，就下载一键安装的。自己配置环境变量可能受限于系统的差异导致报错
②安装hexo，要安装npm install -g hexo-cli ，因为按他那样安装的hexo是相对高阶一点的操作，可能会导致和现有的教程冲突

7.文章置顶 https://www.jianshu.com/p/a9922c3ebb61/ 标题：Hexo nexT主题之文章置顶

next8版本请参照正文中置顶的说明

8.删除由hexo&next强力驱动：同5

1
2
//事实上可以直接修改主题配置文件
  powered: false

9.博客字数统计、浏览人次等

Hexo+NexT博客个性化

10.文章底部标签从井号变成tag图标：

基于Hexo+Next的主题优化总结&踩过的坑

Next8.16更新

1
2
主题配置下打开
tag_icon: true
1
2
3
4
5
6
7
//旧版本：
  将    
              <a href="{{ url_for(tag.path) }}" rel="tag"><{{ tag_indicate }} {{ tag.name }}</a>

修改为

              <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>

11.设置网站图标、字体、更改菜单栏点开后英文的方案等

「教程篇」Hexo+ NexT 博客美化配置教程｜第七篇

12.插入图片，更改大小（md，html，插件法）

hexo插入图片及控制大小

  需注意，作者在html部分第三段代码（省略一个量的那个）与实际不符，可能是版本原因，应该只留下width变量

1
<img src="https://cdnjson.com/images/2023/01/19/SHINKU_e19b.jpg" width="70%" />

方法二（不能修改大小，适合本地图片）

1
![真红](https://cdnjson.com/images/2023/01/19/SHINKU_e19b.jpg)

14.换电脑/操作系统后源文件夹发布出现owner报错

即所有者的不一致导致的报错
fatal: detected dubious ownership in repository(已解决)