专栏首页技术进阶之路Hexo问题解决——持续更新

Hexo问题解决——持续更新

一、链接持久化解决

什么都弄好了,然后去访问的时候发现我的所有的文章都指向一个链接/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;
    }
}

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 代理工厂的简单应用

    在 Service 中调用 Dao 层,必须要 new 一个 Dao 对象,在 Controller 中也是如此调用 Service 层。

    wsuo
  • 思科模拟器:路由器基本配置

    (1)熟悉路由各接口的外观、接口的功能、接口的表示方法; (2)掌握带外的管理方法:通过接口console配置; (3)掌握带内的管理方法:通过方式telnet...

    wsuo
  • 数据结构(二)

    栈是一种 后进先出(last in - first out, LIFO)的数据结构,栈内元素从顶端压入(push),从顶端弹出(pop)。一般我们用数组或者链表...

    wsuo
  • JavaScript 压缩图片

    小贝壳
  • 设计师必备!世界上最好看的 Logo,都在这里了

    Logo 的设计,对于企业十分重要,它不仅是企业的形象脸面,更承载了外界对企业的整体认知。

    知晓君
  • 【推荐收藏】倾心整理的Python量化资源大合集

    随着Python编程语言的流行和普及,越来越多人对如何应用Python做金融数据分析和量化交易充满兴趣。但是不少人对量化投资本身存在一定的误解或认识不清,有的人...

    量化小白
  • Android通过ExifInterface判断Camera图片方向的方法

    Android的Camera相关应用开发中,有一个必须搞清楚的知识点,就是Camera的预览方向和拍照方向

    砸漏
  • Fuchsia 的开发语言政策与解读

    我在之前发布过的 《Fuchsia 是什么?Fuchsia OS 的未来如何?》 中介绍过 Fuchsia 的大体情况,也收到了大家对于 Fuchsia OS ...

    恋猫
  • 视频解析中的基础常识(一)名词解释

    I帧是帧内压缩,因此自身是完整的可以直接解析出数据,因此I帧的单位时间数量和自身的数据量决定了视频数据解析出的画质。

    大话swift
  • 谷歌Fuchsia OS开始基于Intel笔记本的测试

    据Android Police报道,谷歌的全新操作系统Fuchsia正在Pixelbook平台上进行测试。测试的项目是打开开发者模式和实现USB启动。Pixel...

    Debian中国

扫码关注云+社区

领取腾讯云代金券