Hexo问题解决——持续更新

2020-07-31 15:14:04 浏览数 (1)

一、链接持久化解决

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

首先npm一下

代码语言：javascript复制
npm install hexo-abbrlink --save

然后在站点配置文件里，加上这个：

代码语言：javascript复制
permalink: post/:abbrlink.html

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

二、gitalk评论问题

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

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

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

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

三、主页分页问题

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

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

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

解决办法：

代码语言：javascript复制
blogthemesnextlayout_partialspagination.swig

找到这个文件，修改为这个：

代码语言：javascript复制
{% 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的服务器。 博客使用图床测试速度

五、菜单图标问题

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

代码语言：javascript复制
menu:
  home: / || home
  archives: /archives || archive
  categories: /categories || th
  tags: /tags || tags
  about: /about || user
  
menu_icons:
  enable: true

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

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

解决方案：

代码语言：javascript复制
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。
代码语言：javascript复制
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 文件，添加如下代码：

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

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

代码语言：javascript复制
<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>

其中，备案信息开头的图片存放在 themesnextsourceimages 文件夹下。

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

代码语言：javascript复制
<!--版权等自定义↓-->

<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, 可设置风格和图标是否显示。

代码语言：javascript复制
# 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

写法：

代码语言：javascript复制
{% note default %}
#### default
是类型还有以下几种
{% endnote %}

九、设置头像为圆形

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

代码语言：javascript复制
.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%;
}

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

代码语言：javascript复制
.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);
}

十、设置背景图片

找到blogthemesnextsourcecss_customcustom.styl路径： 添加：

代码语言：javascript复制
//背景图
body { 
    background-image: url("http://wsuo-1301206371.picsh.myzijiebao.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;
    }
}

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

腾讯云开发者社区 github git 开源 ICP备案

0 人点赞