码迷,mamicode.com
首页 > 其他好文 > 详细

hexo及next主题修改

时间:2020-02-06 12:35:38      阅读:412      评论:0      收藏:0      [点我收藏+]

标签:nbsp   npm   extern   语言   XML   CRC16   django   保存   html   

通过npm uninstall <package>命令,你可以将node_modules目录下的某个依赖包移除:

1
npm uninstall 包名

要从package.json文件的依赖列表中移除,你需要使用--save标签:

1
npm uninstall 

注意:如果你是以开发依赖包(devDependency)的方式安装的(即安装时待--dave -dev标签),那用--save将无法从package.json中移除,你必须用--save -dev标签。

升级Next7.0.0

运行如下代码:

1
2
cd hexo/themes
git clone https://github.com/theme-next/hexo-theme-next themes/next7.0.0

这样做有个好处,在hexo/themes/下会生成新旧两个next主题文件夹,我们可以在新旧两个next主题间切换。

7.0.0主题的使用和优化

7.0.0主题的的使用

在站点根目录下打开_config.yml找到theme,把它改为theme: next7.0.0

技术图片

Next主题的设定

打开themes/next7.0.0下的_config.yml文件,在修改前最好将 _config.yml文件做个备份。找到Schemes修改为自己喜欢的主题样式。

技术图片

设置语言

打开站点根目录下的_config.yml文件,找到language,修改为language: zh-CN技术图片

设置菜单

打开themes/next7.0.0下的_config.yml文件,找到menu按照自己的需求修改技术图片

设置头像

把图片放入themes/next7.0.0/source/images下,文件名为avatar01.jgp,并在/themes/next7.0.0/_config.yml中找到avatar修改为:技术图片

侧边栏设置

打开/themes/next7.0.0下的_config.yml找到social并根据自己的需求修改就行

济览页面时显示进度

打开/themes/next7.0.0下的_config.yml找到scrollpercent把false修改为true

代码添加复制按钮并显示复制成功

打开/themes/next7.0.0下的_config.yml找到codeblock修改如下:技术图片

百度统计

登录百度统计打开管理页面下的代码获取,将hm.js?后的ID填入baidu_analytics

开启阅读人数和阅读总人数

打开/themes/next7.0.0下的_config.yml找到busuanzi修改如下:技术图片

设置文章的阅读时长和字数

先安装插件

1
npm install hexo-symbols-count-time --save

打开/themes/next7.0.0下的_config.yml找到symbols_count_time修改如下:技术图片

站点根目录下_config.yml添加以下内容

1
2
3
4
5
6
7
symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true

设置网站图标

找一张或者自己制作一张32*32 图片,并改各为favicon.ico放到/themes/next7.0.0/source/images里,修改/themes/next7.0.0/_config.yml里的favicon如下:技术图片

设置网站运行时间

打开hexothemesnextlayout_paritalsfooter.swig文件,在相应位置输入以下代码

1
本站已安全运行 9006 小时 0009

Tab tag样式

我们先来看一下效果

选项卡1

代码:

1
2
3
4
5
6
7
8
{% tabs tab %}

**选项卡1**


**选项卡2**

{% endtabs %}

然后修改主题配置文件hexo/themes/next7.0/_configl.yml

1
2
3
4
5
6
7
# Tabs tag
tabs:
enable: true
transition:
tabs: true
labels: true
border_radius: 0

更多详细设置请点击

大专栏  hexo及next主题修改tle="链接唯一化">链接唯一化

链接唯一化的好处在于不管你修改多少次文章链接也不会变,当文章标题使用中文时URL也不会出现中文,这样做有利于分享和SEO。

安装hexo-abbrlink插件

1
npm install hexo-abbrlink --save

打开站点根目下的_config.yml找到permalink做如下修改:

1
2
3
4
5
6
7
8
9
10
11
12

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://tophat.top
root: /
permalink: posts/:abbrlink.html # 默认项 :year/:month/:day/:title/
permalink_defaults:

# 链接持久化插件abbrlink,添加插件:npm install hexo-abbrlink --save
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

算法和进制的组合如下:

1
2
3
4
5
6
7
8
crc16 
https://post.zz173.com/posts/66c8.html
crc16 & dec
https://post.zz173.com/posts/65535.html
crc32
https://post.zz173.com/posts/8ddf18fb.html
crc32 & dec
https://post.zz173.com/posts/1690090958.html

使用crc16算法时文章数上限是65535

今天hexo g时发现页面变成了undefined.html,上网搜了一圈也没找到答案,正准备用其它插件代替时突然发现package.json里没有了abbrlink模块,于是重装模块并hexo cl && hexo g一切恢复正常。

为外部链接添加nofollow

139139未使用

安装nofollow插件

1
npm install hexo-nofollow --save

将以下代码加入到站点根目录下的_config.yml

1
2
3
4
5
6
7
# nofollow
nofollow:
enable: true
exclude:
- exclude1.com
- exclude2.com
external_link: true
  • enable:启用插件

  • exclude:排除主机名

  • external_link:添加target=”_blank”

    注意:external_link设置在默认的_config.yml中已经有了,只有在找不到的情况下再添加。

修改文章底部的那个带#号的标签

修改模板 /themes/next/layout/_macro/post.swig

搜索 rel=”tag”>#,将 # 换成 <i class="fa fa-tag"></i>

修改网站小图标

将图标放入 /themes/next/source/images

修改出题的配置文件

1
2
3
4
5
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg

设置站点首页不显示文章全文

打开 主题配置文件 _config.yml文件,注意不是站点配置文件,该文件在对应主题文件夹下。找到如下:

1
2
3
4
5
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true #默认为false
length: 150

把这里的 false 改为 true 就可以了在首页启动显示文章预览了,length 是显示预览的长度。

这里我们可以通过在文章使用标志来精确控制文章的摘要预览,比如这篇文章就是在这个段落的末尾添加了该标志,所以本文在首页的预览就会显示到这个段落为止。

强烈推荐使用该标志来控制文章的摘要预览,因为这种方式可以让摘要也按照 css 文件中的样式来渲染。如果使用了自动摘要的功能,你会发现文章摘要是一大团没有样式的文本,很是难看。

其他的文章配置(字数统计、阅读时长)

1
2
3
4
5
6
7
8
9
10
11
# ---------------------------------------------------------------
# Post Settings
# ---------------------------------------------------------------

# Automatically scroll page to section which is under <!-- more --> mark.
# 自动将页面滚动到<!-- more -->标记下的地方。
scroll_to_more: false

# Automatically saving scroll position on each post/page in cookies.
# 自动保存每篇文章或页面上一次滚动的地方。
save_scroll: false

hexo及next主题修改

标签:nbsp   npm   extern   语言   XML   CRC16   django   保存   html   

原文地址:https://www.cnblogs.com/lijianming180/p/12268015.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!