hexo及next主题修改

通过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

运行如下代码:

12
cd hexo/themesgit 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添加以下内容

1234567
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
本站已安全运行 90 天 06 小时 00 分 09 秒

Tab tag样式

我们先来看一下效果

选项卡1

代码:

12345678
{% tabs tab %}

**选项卡1**

**选项卡2**

{% endtabs %}

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

1234567
# Tabs tagtabs:  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做如下修改:

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

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

算法和进制的组合如下:

12345678
crc16 https://post.zz173.com/posts/66c8.htmlcrc16 & dechttps://post.zz173.com/posts/65535.htmlcrc32 https://post.zz173.com/posts/8ddf18fb.htmlcrc32 & dechttps://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

1234567
# nofollownofollow:  enable: true  exclude:    - exclude1.com    - exclude2.comexternal_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

修改出题的配置文件

12345
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文件,注意不是站点配置文件,该文件在对应主题文件夹下。找到如下:

12345
# 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 文件中的样式来渲染。如果使用了自动摘要的功能,你会发现文章摘要是一大团没有样式的文本,很是难看。

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

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

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

时间: 2024-11-06 09:37:50

hexo及next主题修改的相关文章

[hexo]如何更换主题、删除文章

如何修改主题 hexo有很多主题,每个人可以选择自己喜欢的主题来应用,也可以自己设计主题并且上传形成公共主题供大家下载. 如果是自己设计主题的话,会稍微麻烦一些,需要自己配置很多文件,并且编写css以及js代码等.关于如何编辑自己的主题并且发布到公共主题这方面的内容,可以参考hexo官方文档中themes部分的内容,其中publishing的内容就是如何发布自己主题的流程. 传递门:HEXO官网 Themes版块 自己制作主题并且发布供所有人共享的情况稍微复杂一些,这里不做详细说明,感兴趣的同学

kali高速更新源以及主题修改方法

文章不小心删了~这是我以前写的文章了了.实用性较强,所以现在补回来! 安装完kali之后,需要对软件进行一次整体更新:apt-get update & apt-get upgrade 但是,先别着急,默认kali安装完之后,里面的更新源很慢,是kali官网的更新源,我们从国内进行下载,肯定会很慢. 所以,我们要添加一些速度快的更新源,以方便我们进行更新: 首先,我们要打开sources.list文件,进行添加更新源:leafpad /etc/apt/sources.list然后选择添加以下较快的

github搭建个人博客 hexo框架 next主题

之前就想搭建自己的博客,现在终于得以实施. 参考了多篇博客,然后又在虚拟机了往往复复试了好多次, 现在基本搭建完毕. 我是基于hexo博客框架, next主题搭建的博客, 静态网页.   大体就是, 先在本地搭建好整个系统, 然后再提交到github. 因为此篇文章只是捡部分内容说,所以我先列出来我参考的博客,这里谢谢他们的无私分享了. hexo博客框架 + next主题 + 插件等整个流程请参考ezlippi的两篇博客:  https://www.ezlippi.com/blog/2015/0

修改VS 中的代码编辑颜色-Vs主题修改

有个性的开发人员总是喜欢使用属于的主题和配色方案,它们可以看出开发者的个性,更改它们可以缓解审美疲劳,总之选择一个适合自己的解决方案可能极大的增加自己的编码舒适度. 1. 配色方案的选择和使用 手动修改Visual Studio字体和颜色来现实属于自己的配色实在是太麻烦,我也不推荐大家使用 这样的方式,我给大家推荐几个常用的配色方案: https://studiostyl.es/ 上面总有一款适合自己的配色方案,需要下载的朋友可以到 StudioStyle  去下载自己喜欢的配色方案. 2. 选

博客园主题修改中用到的css属性

样式覆盖 id选择器大于class选择器. 对于原主题中想要覆盖的id选择器,使用!import覆盖. 对于原主题中想要取消的css属性,使用inherit. 浮动元素 将position设置为fixed, 为了让组件可以浮动在其他组件之上,设置z-index. fuck me on github element.style { top: 0; right: 0; border: 0; z-index: 100; position: fixed; } 透明的输入框 设置background为tr

记Bili2.0博客主题修改过程

博客主题BiliV2.0更改及优化 主题特色 响应式布局(自适应<360px.<767px的不同尺寸屏幕). 首页全屏背景logo,个性定制. 首页公告消息. 首页轮播,支持定义不同数量的banner. 页脚返回顶部按钮. 博客正文为Github风格Markdown. 博客底部支持博主微信二维码. 博客评论板块调整为发表评论在上,评论列表在下,且评论顺序为倒序,便于查看. 支持博客评论带头像. 博客正文导航目录. 支持切换夜间模式. 支持导航栏扩展. 支持设置博客Tab图标. 支持博客代码块复

怎么为WebStorm更换主题 修改字体样式

这篇文章主要用于帮助大家解决怎么为webstorm换theme. 首先,到选择一个自己喜欢的皮肤,Webstorm皮肤网址: http://phpstorm-themes.com/ 然后,选中你喜欢的皮肤,现在theme xml文件, 这里要鼠标右键另存为: 将此xml文件下载后,根据不同的操作系统,将其copy到不同的webstorm安装目录中. 1.apple系统 复制下载的xml theme文件,使用shift+command+g键进入: ~/Library/Preferences/Web

Eclipse 主题(修改背景色)

hexo的jacman主题设置语言为英文后偶尔出现中文

发现这个问题也好久了.问题的具体表现是在根目录下的_config.yml设置了语言为英文,但是每次发布后都会更换一次语言.今天看了文件结构,知道了,每换一次语言“英文.简体中文.繁体中文”,就是这三种切换.下面是我的_config.yml # Sitetitle: Road Wide's Blogsubtitle: Do what I want to do,Be what I want to be.description: Road Wide's Blogauthor: roadwidelang