一、链接持久化解决

什么都弄好了,然后去访问的时候发现我的所有的文章都指向一个链接/post/default,然后我立即想起来了上次我更改了postpermalink,现在看来应该是改错了,然后阅读source code寻找解决方案:


首先npm一下

npm install hexo-abbrlink --save

然后在站点配置文件里,加上这个:

permalink: post/:abbrlink.html

这样他就会给你的博客自动生成一串数字,然后你访问的时候就是这个地址。

二、gitalk评论问题


在这里点击初始化的时候没有任何反映,之前舒心一下就好了,现在直接跳转到首页,控制台报401错误???

解决方案:
点击这里进入到你的gitalk设置里面

因为我中途更换了域名,我买了个wsuo.top的域名,但是这里没更新所以报错。

改好了再重新打开就可以了。

三、主页分页问题

后来我的文章越来越多,主页放的有点多而且加载很慢,所以我想修改主页的文章数:

在站点配置文件里找到pre-page修改值为5或者你想一页显示的数目
然后就可以分页了

之后又有一个问题:上一页下一页显示错误。

解决办法:

\blog\themes\next\layout\_partials\pagination.swig

找到这个文件,修改为这个:

{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '上一页',
        next_text: '下一页',
        mid_size: 1
      })
    }}
  </nav>
{% endif %}

注意别忘了以UTF-8编码格式保存文件,然后再hexo g -d就可以看到修改成功了。

2020年2月8日10:40:12

四、文章图片问题

我发现文章中有图片的话显示不出来,链接的地址是错误的。而且就算显示出来了,加载速度也很慢。

解决方案:
使用图床:路过图床,图床的原理就是你吧图片上传到它的服务器上,他给你一个链接,这样你再打开文章的时候就会直接去它的网站上找,而不是去GitHub上找,这样访问速度就会很快了,因为GitHub的访问速度你也晓得。

但是有一个缺点就是如果这家网站倒闭了,你的图片就木得了,而且你要重新打开你所有的文章修改里面图片的地址,但是我愿意承受这样的风险,一方面是人家公司成立10多年了,不可能一下就倒闭,还有就是我在本地文章对应的文件里存了一份图片的备份,就算出了问题花点时间也是可以解决的。

你上传之后他会自动生成链接,很多个链接,然后你选择我们需要的Markdown格式的在编辑器里放上,就会自动显示图片了。

所以除了不安全,还是很方便的,我大概100张图片都在上面,目前没有问题,而且打开的速度挺快的,你们可以点击测试一下速度,我没有部署到自己的服务器,就是用的GitHub的服务器。 博客使用图床测试速度

五、菜单图标问题

这个问题困惑了我很长时间,我一直不知道是怎么回事,因为很多博客误导了我,他们的格式是这样子的:

menu:
  home: / || home
  archives: /archives || archive
  categories: /categories || th
  tags: /tags || tags
  about: /about || user
  
menu_icons:
  enable: true

||前面有一个空格,我也加上了,导致后来我的路径一直是error,也就是%20的路径错误,然后网页上显示的是这样:

都是问号,点一下就报错404

解决方案:

menu:
  home: /|| home # 首页
  about: /about/|| user # 关于
  tags: /tags/|| tags # 标签
  categories: /categories/|| th # 分类
  archives: /archives/|| archive # 归档
  #schedule: /schedule/ || calendar # 日程表
  #sitemap: /sitemap.xml || sitemap # 站点地图
  #commonweal: /404/ || heartbeat # 公益404

# Enable/Disable menu icons.
menu_icons:
  enable: true

把 || 前面的空格去掉路径就对了:

六、继上次gitalk评论报错以后

这次又报错了,但是我的域名没改啊?我也不想修复这个bug了,干脆之久换掉,因为他有一个缺点是不能匿名评论,要先登录GitHub账号,但是不是每一个人都有账号的。

所以我打算换掉。

已更换为LeanCloud的Valine评论功能

Leancloud官网,点我注册

  • 注册完以后需要创建一个应用,名字可以随便起,然后 进入应用 -> 设置 -> 应用key,获取你的 appid 和 appkey。

  • 拿到你的 appid 和 appkey 之后,打开主题配置文件 _config.yml 搜索 valine,填入 appid 和 appkey。

valine:
 enable: true
 appid: 你的appid    
 appkey: 你的appkey 
 notify: false # mail notifier , https://github.com/xCss/Valine/wiki
 verify: false # Verification code
 placeholder: Just go go # comment box placeholder
 avatar: mm # gravatar style   
 guest_info: nick,mail,link # custom comment header
 pageSize: 10 # pagination size

七、添加备案信息

打开 /themes/next/layout/_layout.swig 文件,添加如下代码:

如上,左侧是之前的,右侧是添加的代码。

现把添加后的代码摘入如下,方面复制:

<div class="footer-inner">
    {% include '_partials/footer.swig' %}
    {% include '_third-party/analytics/analytics-with-widget.swig' %}
    <!--备案等自定义↓-->

    <div style="font-family:STLiti;display:inline-block;height:20px;line-height:20px;">
        <a target="_blank" href="" ><img src="/images/gov.png" style="float:left;"/>赣公网安备 xxxxxxxxxxxx号</a>
        <span class="post-meta-divider" style="color: #555;">|</span><span><a href="http://www.miitbeian.gov.cn" target="_blank">ICP备xxxxx号</a></sapn>
    </div> 

    {% block footer %}{% endblock %}
</div>

其中,备案信息开头的图片存放在 \themes\next\source\images\ 文件夹下。


如果没有备案,不想底部显示备案信息,可以考虑显示其他,比如相同位置添加如下代码:

<!--版权等自定义↓-->

<div style="font-family:Courier New;display:inline-block;height:20px;line-height:20px;">
    Powered by <a target="_blank" href="https://hexo.io/zh-cn/index.html">Hexo</a>,Theme by 
    <a target="_blank" href="https://theme-next.iissnan.com/">NexT</a>. 
    Hosted by <a target="_blank" href="https://pages.github.com/">GitHub Page</a>
</div>

八、note 便签

主题配置文件搜索 note, 可设置风格和图标是否显示。

# Note tag (bs-callout).
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  border_radius: 15
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

写法:

{% note default %}
#### default
是类型还有以下几种
{% endnote %}

九、设置头像为圆形

打开位于 themes/next/source/css/_common/components/sidebar/sidebar-author.syl 文件,修改如下:

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
 // 修改头像边框
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

如果你还想让鼠标放上去的时候旋转的话,就直接设置成这个:

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
 // 修改头像边框
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  // 设置旋转
  transition: 1.4s all;
}
// 可旋转的圆形头像,`hover`动作
.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

十、设置背景图片

找到blog\themes\next\source\css\_custom\custom.styl路径:
添加:

//背景图
body { 
    background-image: url("http://wsuo-1301206371.picsh.myqcloud.com/blue.jpg");
    background-attachment: fixed; // 不随屏幕滚动而滚动fixed,scroll,inherit
    background-repeat: no-repeat; // 如果背景图不够屏幕大小则重复铺,改为no-repeat则表示不重复铺
    background-size: cover; // contain等比例铺满屏幕 //cover拉伸铺满
    background-position: bottom;//x,y轴调整
    +mobile(){
      //background-position: 0% -20%;https://i.loli.net/2018/12/29/5c270a0523154.jpg
      //https://i.loli.net/2018/12/29/5c270fc2bfcad.png
      background-image: url(https://ziyuan.lruihao.cn/images/bg_cell.png);
      background-size: cover;
    }
}

其中那个链接是我添加到腾讯云的万象数据它生成的链接,你也可以去网上下载,或者使用本地的。使用相对路径就可以。