岁月博客

  • 首页
  • 跨境电商
  • 技术文档
  • 软路由虚拟化
  • 服务器技术
  • VPS
  • 羊毛
    • 羊毛
    • 自助薅京豆系统
岁月博客
致力于关注网络安全与黑客文化,专注网络技术的分享与交流。
  1. 首页
  2. 技术文档
  3. 正文

NexT的一些小修小改

2022年4月19日 293点热度 0人点赞 0条评论

添加博客置顶

安装插件

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

添加置顶开关

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

---
title: {{ title }}
date: {{ date }}
tags:
categories:
top: false
---

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

---
title: 
top: false
date: 
tags:
categories:
---

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

设置置顶标志

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

{% 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 文件,修改如下配置:

# 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.

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

修改阅读截断

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

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

<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%改大就可以了。

.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,修改下面的字段,分别是作者,本文链接,版权声明。

<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字段

$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

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 –

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请及时联系我们qq邮箱:1107996578@qq.com,一经查实,本站将立刻删除。

标签: 暂无
最后更新:2022年4月19日

岁月

以梦为马,随处可栖

点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

岁月

以梦为马,随处可栖

最新 热点 随机
最新 热点 随机
fiddler创建根证书不成功解决方案--岁月博客提供 Postern使用教程-岁月博客提供 Centos 7 彻底卸载清除 Docker 环境 启动docker容器报IPv4 forwarding is disabled. Networking will not work 国家代号与区号 青龙V2.10.13无法安装和删除依赖解决方法,npm err! enotempty: directory not empty, rename
dz论坛登录账户进入后台报500错误 服务器怎么安装server 2012(服务器系统安装教程) 用DameWare远程控制,向客户端安装时,提示“找不到网络路径”的解决办法 nohup后台运行js以及关闭后台运行的方法 白嫖电视点播VIP(电视免费看VIP视频攻略) nginx autoindex美化(Nginx上开启和美化Autoindex)
分类
  • VPS
  • 技术文档
  • 新闻
  • 服务器技术
  • 未分类
  • 羊毛
  • 跨境电商
  • 软路由虚拟化
最近评论
kkkki 发布于 7 个月前(07月05日) 100好像可以开韩国了把,我今天误打误撞开成功了
kiritoghy 发布于 8 个月前(05月26日) 想问一下如果azure for students开B1S+64G SSD就是免费的吗,不会扣100刀...
书签
  • 乐乐维修网
  • 花仙子

COPYRIGHT © 2022 岁月博客 ALL RIGHTS RESERVED.

豫ICP备2022005050号