NexT的一些小修小改

发表于 更新于 分类于

添加博客置顶

安装插件

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

添加置顶开关

找到 /blog/source/scaffolds/post.md 添加

1
2
3
4
5
6
7
---
title: {{ title }}
date: {{ date }}
tags:
categories:
top: false
---

然后每次新建博客 hexo new"postname" 会显示页面

1
2
3
4
5
6
7
---
title: 
top: false
date: 
tags:
categories:
---

top: false 改成 true 就开启了文章置顶

设置置顶标志

打开 /themes/next/layout/_macro 目录下的post.swig文件，定位到 <div class="post-meta"> 标签下，插入如下代码：

1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=green>置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

就能在博客页头看到“置顶”标记了。

修改链接的默认格式

Hexo的永久链接的默认格式是 :year/:month/:day/:title/ 比如访问站点下某一篇文章时，其路径是 2018/04/12/xxxx/ 如果我们的文章标题是中文的，那么该路径就会出现中文字符。在路径中出现了中文字符很容易引发各种问题。

安装插件

在站点根目录执行命令：

$ npm install hexo-abbrlink --save

修改站点配置文件

打开根目录下的 _config.yml 文件，修改如下配置：

1
2
3
4
5
6
# permalink: :year/:month/:day/:title/
# permalink_defaults:
permalink: posts/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

这里将页面都添加了 .html 的后缀，用来伪装成静态页面(虽说Hexo的页面本身就是静态页面)，这样可以直接从路径就知道这是个静态页面，方便seo。

接下来重新部署，可以看到文章路径变成了 /posts/xxxxx.html 就算我们将文字标题命名为中文也没问题了。

移动端页面调整

手机端网页左右留白太多，影响阅读体验，特别是看代码特费劲。

打开路径 /themes/source/css/_schemes/pisces/_layout.styl文件，把下面padding: 20px改小就好了，建议5或者0.

1
2
3
4
+tablet-mobile() {
  border-radius: initial;
  padding: 20px;
  width: 100%;

修改阅读截断

在阅读一篇文章的时候，点开“阅读全文”的时候会截一段，这个感觉很突兀，俺很不喜欢。于是就改成点击阅读全文不截断。

打开文件 /themes/layout/_macro/post.swig找到post-button字头把里面的#more删除即可，如下：

1
2
3
<div class="post-button">
  <a class="btn" href="{{ url_for(post.path) }}{%- if theme.scroll_to_more %}#more{%- endif %}" rel="contents">`
    {{ __('post.read_more') }} &raquo;

修改菜单栏字体

菜单栏字体太小，只有13px影响观感。

打开文件/themes/source/css/_common/outline/header/menu.styl,找到font-size字头把smaller修改为small或者medium.

small=14px medium=16px

修改Pisces主题文章分割线长度

更改主题路径下 /source/css/_common/components/post/post-eof.styl 中，把8%改大就可以了。

1
2
3
4
5
6
.post-eof {
  background: $grey-light;
  height: 1px;
  margin: $post-eof-margin-top auto $post-eof-margin-bottom;
  text-align: center;
  width: 8%;

修改版权信息

打开文件/themes/layout/_partials/post/post-copyright.swig，修改下面的字段，分别是作者，本文链接，版权声明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>{{ __('post.copyright.author') + __('symbol.colon') }} </strong>{#
  #}{{ post.author or author }}{#
#}</li>  //作者信息
  <li class="post-copyright-link">
    <strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
    {%- set postURL = post.url or post.permalink %}
    {{ next_url(postURL, postURL, {title: post.title}) }}
  </li>  //本文链接
  <li class="post-copyright-license">
    <strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>{#
  #}{{ __('post.copyright.license_content', next_url(ccURL, ccIcon + ccText)) }}{#
#}</li>  //版权声明
</ul>
</div>

修改行内代码色块和字体颜色

找到/next/source/css/_variables/base.styl文件，找到Code & Code Blocks字段

1
2
$code-background                = $gainsboro; #code-background是指色块颜色
$code-foreground                = #fc6423;    #code-foreground是指字体颜色

选择合适的色号，可参考下面网址：https://www.color-hex.com/

添加分享

安装share插件

$ npm install --save theme-next/hexo-next-share#last-release

添加Need More Share

以下添加在themes/_config.yml里即可:

Need More Share

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
needmoreshare:
  enable: true
  cdn:
    js: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.js
    css: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.css
  postbottom:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

– END –

相关文章