本文共 38694 字,大约阅读时间需要 128 分钟。
title: hexo博客搭建使用教程(进阶版)
description: hexo博客搭建使用教程(进阶版) tags:如果下面的教程有错误之处,请在评论区留言,收到后,我会尽快修改,谢谢支持!**
本文系统环境信息:Win10 专业版,64 位
Node.js:v10.23.0 Git:2.21.0
修改配置文件要用到的软件(可选):
- (适合有开发基础的程序员,非常好用)
首先去 下载 node.js 的安装程序,根据你电脑系统的配置信息,下载对应的安装程序,然后开始进行下面的步骤。
Node.js 下载以及版本的选择
下载好与电脑系统对应的安装程序后,开始安装流程:
img
img
img
img
img
img
img
img
如果执行 node -v
报错的话,那么手动将 Node.js 的安装路径添加到环境变量中,右击点击我的电脑 -> 属性 -> 高级系统设置 -> 环境变量,在系统变量下找到名为 path 的变量名,如下图:
img
选中 path,或者双击,然后将你 node.js 的安装路径放在 path 变量值的最后面,如果添加之前 path 值最后有 英文的分号,则直接将路径添加进去即可,如果没有,先添加分号,然后点击保存,回到桌面,打开 cmd(Win+R),执行 node -v
,看是否成功。
Code# 查看npm的配置npm config list# 默认源npm config set registry https://registry.npmjs.org# 临时改变镜像源npm --registry=https://registry.npm.taobao.org# 永久设置为淘宝镜像源npm config set registry https://registry.npm.taobao.org# 另一种方式,编辑 ~/.npmrc 加入下面内容registry = https://registry.npm.taobao.org
如果不改变内置路径也可,除非你的 C 盘空间足够 bigger,这一步可以略过,不改变的话,它的路径在:
此处参考:
CodeC:/Users/[username]/AppData/Roaming/npm/node_modules
CodeC:/Users/[username]/AppData/Roaming/npm
C:/Users/[username]/.npmrc
文件内容的 prefix
值C:/Users/[username]/.npmrc
文件内容的 cache
值首先在你 Node.js 的安装位置,新建两个文件夹,node_global
和 node_cache
,我的路径是:
CodeC:\Program Files\nodejs\node_globalC:\Program Files\nodejs\node_cache
然后分别执行的命令就是:
Codenpm config set prefix "C:\Program Files\nodejs\node_global"npm config set cache "C:\Program Files\nodejs\node_cache"
然后在配置环境变量,右击我的电脑 -> 属性 -> 高级系统设置 -> 环境变量同样的位置,在用户变量的地方,找到 path 变量进行修改,修改值如下图:
img
img
然后就大功告成了,Node.js 就安装完毕了,下面开始 Git 安装。👇👇👇
首先就是去 下载 Git,根据你电脑系统的配置信息,下载对应的安装程序,然后开始进行下面的步骤。
img
img
img
img
img
img
img
img
img
img
img
img
Git GUI Here
和 Git Bash Here
,在打开 Cmd (Win+R),分别输入 git
和 git --version
,如果出现如下图的情况,即安装成功!img
img
img
img
验证完成后,点击 Next:Select a plan,会出现如上图的验证界面,同理,只需要将其中的动物调整为正向显示即可。接着会出现下图的界面,选择 Free,下方的两个选项可选可不选,点击 Continue 继续:
img
这时 Github 会给你发一封邮件,验证一下即可,验证过后才可以创建库。
img
验证完成后,开始创建库,如下图所示,仓库名创建格式必须为:<用户名>.github.io
,Description
为描述仓库,自定义写,填写必要的描述,也可不填。勾选 Initialize this repository with a README
点击 Creat repository
进行创建。
img
然后就会出现如图所示的界面,即仓库创建成功!
img
我们来测试一下,点击 Create new file
,出现如下界面,然后命名文件名为 index.html
,在填写如图的内容,再点击 Commit new file
,即创建成功,然后打开一个新的网页,输入网址 https://<你的用户名>.github.io
,即可以看见一个新的网页,其中的内容就是你写的内容。
img
img
img
至此,Github 的注册以及 Github Pages 已经创建完成了。
在桌面点击鼠标右键,点击 Git Bash Here
,会出现一个界面如下图所示:
img
然后分别输入下面的两个命令,并回车:
Codegit config --global user.name "此处填写你注册时的用户名"git config --global user.email "此处填写你注册时的邮箱"# 一般只要不报错,可以跳过下面寻找.gitconfig文件
然后找到.gitconfig
文件,文件存放位置在 C:/Users/[username]/.gitconfig
(未找到的话,请开启显示隐藏文件的功能),用编辑器打开,看到如下图所示的内容,即配置成功!
img
Git Bash Here
,然后依次输入如下命令,:Code# hexo框架的安装npm install -g hexo-cli# 等上一个命令完成后,在输入下面的命令hexo init <新建文件夹的名称> #初始化文件夹cd <新建文件夹的名称> npm install # 安装博客所需要的依赖文件 新建文件夹的名称> 新建文件夹的名称>
img
img
等待运行完成,此时文件夹中多了许多文件。 注意:后续的命令均需要在站点目录下(即文件夹内)使用 Git Bash 运行。 此时 Hexo 框架的本地搭建已经完成了。我们来运行一下看看,命令行依次输入以下命令 :
Codehexo ghexo s
img
浏览器中打开
img
之前的步骤中,我们已经完成了对 Github 账户的注册以及 Github Pages 的创建,接下来是将本地博客发布至 Github Pages。
Codenpm install hexo-deployer-git --save
Codessh-keygen -t rsa -C "你的邮箱地址"
输入后一直回车,然后在 C:/Users/[username]
目录下找到名为.ssh
的文件夹, 文件夹内会有两个文件,一个 id_rsa.pub
一个 id_rsa
,用文本编辑器打开 id_rsa.pub
,复制里面的的内容。 然后打开 Github,点击右上角的头像 Settings 选择 SSH and GPG keys
img
点击 New SSH key 将之前复制的内容粘帖到 Key 的框中。 上面的 Title 可以随意,点击 Add SSH key 完成添加。
img
然后回到 Git 的命令行界面,测试一下是否与 GitHub 连接成功。输入下面的命令行:
Codessh -T git@github.com
点击回车,然后会出现一个询问内容,输入 yes
,回车,会出现一段内容,Hi ! You've successfully authenticated, but GitHub doesnot provide shell access.
。 说明连接成功。此处这个 `` 应该是你 Github 的用户名。
_config.yml
,这个_config.yml
是博客的配置文件,在以后的博客修改,如个性化修改,博客 SEO 优化等都会使用到,修改如下图的几个地方:Codetitle: 你的博客名subtitle: 博客的副标题,有些主题支持description: 博客描述keywords: 博客关键词author: 作者,在文章中显示language: 博客语言语种 timezone: 时区
img
滑到文件最底部,有一个 deploy,在 deploy 下面添加一个 repo 项 ,一个 branch 项。填入如下代码,并如下图所示:
Codetype: gitrepo: git@github.com:Github用户名/github用户名.github.io.git //也可使用https地址,如:https://github.com/Github用户名/Github用户名.github.io.git branch: master
img
Code# Hexo会根据配置文件渲染出一套静态页面hexo g# 将上一步渲染出的一系列文件上传至至Github Pageshexo d# 也可以直接输入此命令,直接完成渲染和上传hexo g -d
上传完成后,在浏览器中打开 https://<用户名>.github.io,查看上传的网页。如果页面变成了之前本地调试时的样子,说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息,没有的话清除一下浏览器缓存试试。
转自: | | QQ 交流群 1(已满): | QQ 交流群 2(推荐):
这是一个采用
Material Design
和响应式设计的 Hexo 博客主题。
Banner
图片24
张漂亮的图片代替)MathJax
TOC
目录Gitalk
)Google Analytics
)和文章字数统计等功能emoji
表情,用 markdown emoji
语法书写直接生成对应的能跳跃的表情。点击 下载 master
分支的最新稳定版的代码,解压缩后,将 hexo-theme-matery
的文件夹复制到你 Hexo 的 themes
文件夹中即可。
当然你也可以在你的站点目录文件夹下使用 git clone
命令来下载:直接在站点根目录下执行下面的命令,即可进行主题的下载,主题有两个版本,稳定版本和最新版本 (不定期更新优化),自主选择版本。
Codegit clone https://github.com/blinkfox/hexo-theme-matery themes/matery # 稳定版git clone -b develop https://github.com/blinkfox/hexo-theme-matery themes/matery #最新版(不定期进行优化更新)
如果主题下载速度比较慢的话,可以从我的码云仓库进行下载,我的码云仓库地址:
注意:在下载主题仓库之前,请先比对仓库更新时间是否与原作者仓库时间一致,如果一致,请执行下面的命令,如果不一致,请联系我进行仓库更新,当然你也可以自己进行相关的更新操作,自主选择!
Codegit clone https://gitee.com/yafine66/hexo-theme-matery themes/matery # 稳定版git clone -b develop https://gitee.com/yafine66/hexo-theme-matery themes/matery #最新版(不定期进行优化更新)
**注意:**首先需要明白什么是站点配置文件,什么是主题配置文件,站点配置文件就是根目录下的配置文件,比如我的博客文件在
F:\blog
下,那么站点配置文件就是F:\blog\_config.yml
,主题配置文件就是F:\blog\themes\matery\_config.yml
。另外注意,配置文件中的标点符号不要出现中文格式的标点符号,不然运行会出错。
主题下载完成后,将站点配置文件中的 theme
值修改为你下载主题的文件名,此处为 matery
,那么值就修改为 theme: matery
。
一些站点配置文件的其他地方的修改:
language:
后添加值 zh-CN
,如果不修改,默认为英语;url:
的值为你的网址名,如 http://xxxx.github.io
,如果有域名,则修改为你的域名即可,至于有关域名的修改解析,后面我会说到,这里先不说了。per_page属性
,建议修改为 6 的倍数,这样网站在适应设备时,有较好的显示效果。tags
页是用来展示所有标签的页面,如果在你的博客 source
目录下还没有 tags/index.md
文件,那么你就需要新建一个,命令如下:
Codehexo new page "tags"
编辑你刚刚新建的页面文件 /source/tags/index.md
,至少需要以下内容:
Code---title: tagsdate: 2018-09-30 18:23:38type: "tags"layout: "tags"---
categories
页是用来展示所有分类的页面,如果在你的博客 source
目录下还没有 categories/index.md
文件,那么你就需要新建一个,命令如下:
Codehexo new page "categories"
编辑你刚刚新建的页面文件 /source/categories/index.md
,至少需要以下内容:
Code---title: categoriesdate: 2018-09-30 17:25:30type: "categories"layout: "categories"---
about
页是用来展示关于我和我的博客信息的页面,如果在你的博客 source
目录下还没有 about/index.md
文件,那么你就需要新建一个,命令如下:
Codehexo new page "about"
编辑你刚刚新建的页面文件 /source/about/index.md
,至少需要以下内容:
Code---title: aboutdate: 2018-09-30 17:25:30type: "about"layout: "about"---
contact
页是用来展示留言板信息的页面,如果在你的博客 source
目录下还没有 contact/index.md
文件,那么你就需要新建一个,命令如下:
Codehexo new page "contact"
编辑你刚刚新建的页面文件 /source/contact/index.md
,至少需要以下内容:
Code---title: contactdate: 2018-09-30 17:25:30type: "contact"layout: "contact"---
注:本留言板功能依赖于第三方评论系统,请激活你的评论系统才有效果。并且在主题的
_config.yml
文件中,第19
至21
行的 “菜单” 配置,取消关于留言板的注释即可。
friends
页是用来展示友情链接信息的页面,如果在你的博客 source
目录下还没有 friends/index.md
文件,那么你就需要新建一个,命令如下:
Codehexo new page "friends"
编辑你刚刚新建的页面文件 /source/friends/index.md
,至少需要以下内容:
Code---title: friendsdate: 2018-12-12 21:25:30type: "friends"layout: "friends"---
同时,在你的博客 source
目录下新建 _data
目录,在 _data
目录中新建 friends.json
文件,文件内容如下所示:
Code[ { "name": "loole博客", "avatar": "http://happyzm.gitee.io/medias/avatar.jpg", "url": "http://happyzm.gitee.io", "introduction": "且视他人之疑目如盏盏鬼火,大胆地去走你的夜路", "title": "前去学习" }, { "avatar": "http://image.luokangyuan.com/4027734.jpeg", "name": "闪烁之狐", "introduction": "编程界大佬,技术牛,人还特别好,不懂的都可以请教大佬", "url": "https://blinkfox.github.io/", "title": "前去学习" }, { "name": "Tonyの博客", "avatar": "http://www.tonycode.top/medias/avatar.jpg", "url": "http://www.tonycode.top", "introduction": "我挥舞着键盘 要把这世界写个明白", "title": "前去学习" }, { "name": "果果小师弟", "avatar": "https:www.liuyao-blog.cn/medias/avatar.jpg", "url": "https://www.liuyao-blog.cn", "introduction": "一个喜欢嵌入式的小码农", "title": "前去学习" }]
Index
或主页
)Codemenu: Index: url: / icon: fas fa-home Tags: url: /tags icon: fas fa-tags Categories: url: /categories icon: fas fa-bookmark Archives: url: /archives icon: fas fa-archive About: url: /about icon: fas fa-user-circle Friends: url: /friends icon: fas fa-address-book
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
children
关键字 (如:About
菜单下添加 children
)children
下创建二级菜单的 名称 name, 路径 url 和图标 icon.-
.Codemenu: Index: url: / icon: fas fa-home Tags: url: /tags icon: fas fa-tags Categories: url: /categories icon: fas fa-bookmark Archives: url: /archives icon: fas fa-archive About: url: /about icon: fas fa-user-circle-o Friends: url: /friends icon: fas fa-address-book Medias: icon: fas fa-list children: - name: Musics url: /musics icon: fas fa-music - name: Movies url: /movies icon: fas fa-film - name: Books url: /books icon: fas fa-book - name: Galleries url: /galleries icon: fas fa-image
本主题新增了对 emoji
表情的支持,使用到了 的 Hexo 插件来支持 emoji
表情的生成,把对应的 markdown emoji
语法(::
, 例如::smile:
)转变成会跳跃的 emoji
表情,安装命令如下:
Codenpm install hexo-filter-github-emojis --save
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
CodegithubEmojis: enable: true className: github-emoji inject: true styles: customEmojis:
执行 hexo clean && hexo g
重新生成博客文件,然后就可以在文章中对应位置看到你用 emoji
语法写的表情了。
由于 Hexo 自带的代码高亮主题显示不好看,所以主题中使用到了 的 Hexo 插件来做代码高亮,安装命令如下:
Codenpm i -S hexo-prism-plugin
然后,修改 Hexo 根目录下 _config.yml
文件中 highlight.enable
的值为 false
,并新增 prism
插件相关的配置,主要配置如下:
Codeprism_plugin: mode: 'preprocess' # realtime/preprocess theme: 'tomorrow' line_number: false # default false custom_css:
本主题中还使用到了 的 Hexo 插件来做内容搜索,安装命令如下:
Codenpm install hexo-generator-search --save
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
Codesearch: path: search.xml field: post
如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO
,且 gitment
评论对中文链接也不支持。我们可以用 Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下:
Codenpm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
Codepermalink_pinyin: enable: true separator: '-' # default: '-'
注:除了此插件外, 插件也可以生成非中文的链接。
如果你想要在文章中显示文章字数、阅读时长信息,可以安装 插件。
安装命令如下:
Codenpm i --save hexo-wordcount
然后只需在本主题下的 _config.yml
文件中,激活以下配置项即可:
CodewordCount: enable: false # 将这个值设置为 true 即可. postWordCount: true min2read: true totalCount: true
本主题中还使用到了 的 Hexo 插件来做 RSS
,安装命令如下:
Codenpm install hexo-generator-feed --save
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
Codefeed: type: atom path: atom.xml limit: 20 hub: content: content_limit: 140 content_limit_delim: ' ' order_by: -date
执行 hexo clean && hexo g
重新生成博客文件,然后在 public
文件夹中即可看到 atom.xml
文件,说明你已经安装成功了。
前往 官网注册并且获取 app_id
,并将 app_id
填入主题的 _config.yml
文件中
前往 官网注册并且获取 Public Key
,并将 Public Key
填入主题的 _config.yml
文件中。
页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs
文件中,包括站点、使用的主题、访问量等。
在主题的 _config.yml
文件中,默认支持 QQ
、GitHub
和邮箱等的配置,你可以在主题文件的 /layout/_partial/social-link.ejs
文件中,新增、修改你需要的社交链接地址,增加链接可参考如下代码:
Code<% if (theme.socialLink.github) { %> <% } %>
其中,社交图标(如:fa-github
)你可以在 中搜索找到。以下是常用社交图标的标识,供你参考:
fab fa-facebook
fab fa-twitter
fab fa-google-plus
fab fa-linkedin
fab fa-tumblr
fab fa-medium
fab fa-slack
fab fa-weibo
fab fa-weixin
fab fa-qq
fab fa-zhihu
注意: 本主题中使用的
Font Awesome
版本为5.11.0
。
在主题文件的 source/medias/reward
文件中,你可以替换成你的的微信和支付宝的打赏二维码图片。
新版主题支持接入第三方音乐,如 QQ 音乐,网易云音乐,酷狗音乐等等
要支持音乐播放,在主题的 _config.yml
配置文件中激活 music 配置即可:
Code# 是否在首页显示音乐music: enable: true title: #非吸底模式有效 enable: true show: 听听音乐 server: netease #require music platform: netease, tencent, kugou, xiami, baidu type: playlist #require song, playlist, album, search, artist id: 503838841 #require song id / playlist id / album id / search keyword fixed: false # 开启吸底模式 autoplay: false # 是否自动播放 theme: '#42b983' loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none' order: 'random' # 音频循环顺序, 可选值: 'list', 'random' preload: 'auto' # 预加载,可选值: 'none', 'metadata', 'auto' volume: 0.7 # 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效 listFolded: true # 列表默认折叠
server
可选netease
(网易云音乐),tencent
(QQ 音乐),kugou
(酷狗音乐),xiami
(虾米音乐),
baidu
(百度音乐)。
type
可选song
(歌曲),playlist
(歌单),album
(专辑),search
(搜索关键字),artist
(歌手)
id
获取示例:浏览器打开网易云音乐,点击我喜欢的音乐歌单,地址栏有一串数字,playlist
的id
即为这串数字。
Front-matter
选项中的所有内容均为非必填的。但我仍然建议至少填写 title
和 date
的值。
配置选项 | 默认值 | 描述 |
---|---|---|
title | Markdown 的文件标题 | 文章标题,强烈建议填写此选项 |
date | 文件创建时的日期时间 | 发布时间,强烈建议填写此选项,且最好保证全局唯一 |
author | 根 _config.yml 中的 author | 文章作者 |
img | featureImages 中的某个值 | 文章特征图,推荐使用图床 (腾讯云、七牛云、又拍云等) 来做图片的路径。如: http://xxx.com/xxx.jpg |
top | true | 推荐文章(文章是否置顶),如果 top 值为 true ,则会作为首页推荐文章 |
cover | false | v1.0.2 版本新增,表示该文章是否需要加入到首页轮播封面中 |
coverImg | 无 | v1.0.2 版本新增,表示该文章在首页轮播封面需要显示的图片路径,如果没有,则默认使用文章的特色图片 |
password | 无 | 文章阅读密码,如果要对文章设置阅读验证密码的话,就可以设置 password 的值,该值必须是用 SHA256 加密后的密码,防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项 |
toc | true | 是否开启 TOC,可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项 |
mathjax | false | 是否开启数学公式支持 ,本文章是否开启 mathjax ,且需要在主题的 _config.yml 文件中也需要开启才行 |
summary | 无 | 文章摘要,自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要 |
categories | 无 | 文章分类,本主题的分类表示宏观上大的分类,只建议一篇文章一个分类 |
tags | 无 | 文章标签,一篇文章可以多个标签 |
reprintPolicy | cc_by | 文章转载规则, 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个 |
注意:
- 如果
img
属性不填写的话,文章特色图会根据文章标题的hashcode
的值取余,然后选取主题中对应的特色图片,从而达到让所有文章都的特色图各有特色。date
的值尽量保证每篇文章是唯一的,因为本主题中Gitalk
和Gitment
识别id
是通过date
的值来作为唯一标识的。- 如果要对文章设置阅读验证密码的功能,不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值,还需要在主题的
_config.yml
中激活了配置。有些在线的 SHA256 加密的地址,可供你使用:、、。- 您可以在文章 md 文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则
以下为文章的 Front-matter
示例。
Code---title: typora-vue-theme主题介绍date: 2018-09-07 09:25:00---
Code---title: typora-vue-theme主题介绍date: 2018-09-07 09:25:00author: 赵奇img: /source/images/xxx.jpgtop: truecover: truecoverImg: /images/1.jpgpassword: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92toc: falsemathjax: falsesummary: 这是你自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要categories: Markdowntags: - Typora - Markdown---
最新版本进行了优化更新,效果图与最初的效果图有差别,下面的图不是最新版本的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RjwAHMff-1609722423682)(https://gitee.com/happyzm/images/raw/master/image-20201205130810930.png)]
首页
首页推荐文章
![首页文章列表https://gitee.com/happyzm/images/raw/master/image-20201205130932460.png)
首页文章列表
关于我页面
文章详细页面
在本主题的 _config.yml
中可以修改部分自定义信息,有以下几个部分:
favicon
和 Logo
Gitalk
、Gitment
、Valine
和 disqus
评论配置Google Analytics
)hashcode
值取余,来选择展示对应的特色图我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意,可以在主题中自定义修改,很多更自由的功能和细节点的修改难以在主题的 _config.yml
中完成,需要修改源代码才来完成。以下列出了可能对你有用的地方:
在主题文件的 /source/css/matery.css
文件中,搜索 .bg-color
来修改背景颜色:
Code/* 整体背景颜色,包括导航、移动端的导航、页尾、标签页等的背景颜色. */.bg-color { background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);}/*如果想去掉banner图的颜色渐变效果,请将以下的css属性注释掉或者删除掉即可*/@-webkit-keyframes rainbow { /* 动态切换背景颜色. */}@keyframes rainbow { /* 动态切换背景颜色. */}
你可以直接在 /source/medias/banner
文件夹中更换你喜欢的 banner
图片,主题代码中是每天动态切换一张,只需 7
张即可。如果你会 JavaScript
代码,可以修改成你自己喜欢切换逻辑,如:随机切换等,banner
切换的代码位置在 /layout/_partial/bg-cover-content.ejs
文件的 `` 代码中:
Code$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
在 /source/medias/featureimages
文件夹中默认有 24 张特色图片,你可以再增加或者减少,并需要在 _config.yml
做同步修改。
如果想改为每小时或者每分钟切换 banner 图的话,需要将 getDay()
改为 getHours()
或者 getMinutes()
即可。
# Sitetitle: Loolessubtitle: 臾昳description: 且视他人之疑目如盏盏鬼火,大胆地去走你的keywords: 臾昳, Looleauthor: Loolelanguage: zh-CN# timezone: ''# URL## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'url: http://looles.github.ioroot: /permalink: posts/:abbrlink.html # 此处可以自己设置,也可以直接使用 /:abbrlink posts也可改也可以去掉abbrlink: alg: crc32 #算法: crc16(default) and crc32 rep: hex #进制: dec(default) and hexpermalink_defaults:pretty_urls: trailing_index: true # Set to false to remove trailing 'index.html' from permalinks trailing_html: true # Set to false to remove trailing '.html' from permalinks# Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render:
本人的配置信息为:
Code# 首页 banner 中的第二行个人信息配置,留空即不启用socialLink: github: https://github.com/blinkfox email: 1181062873@qq.com facebook: # https://www.facebook.com/xxx twitter: # https://twitter.com/xxx qq: 1181062873 weibo: # https://weibosocialLink: github: https://github.com/looles email: 2865134664@qq.com facebook: # https://www.facebook.com/xxx twitter: # https://twitter.com/xxx qq: 2865134664 weibo: # https://weibo.com/xxx zhihu: # https://www.zhihu.com/xxx rss: true # true、false.com/xxx zhihu: # https://www.zhihu.com/xxx rss: true # true、false
kbd
样式;miniValine
中的一些配置;Gitee
);MiniValine
评论系统;jsdelivr
的支持;keywords
的功能;false
;description
的 meta 属性优先读取文章的 summary
属性;div
改成了 h1
标题;setTimeout
代码;emoji
的支持;Twitter
、Facebook
、知乎的社交链接;Valine
的版本为最新版;summary
不显示的问题;TOC
展开、收缩的按钮和相关配置,默认显示此按钮;1.0.0
,重构和修改了升级过程中的部分文件或问题;css
、js
的文件请求路径在主题的_config.yml
中配置,便于你更快捷的配置自己的 CDN;TOC
功能,并新增为某篇文章关闭 TOC
的 Front-matter
配置选项;IOS
下移除搜索框自动获得焦点属性,防止自动获得焦点后导致视图上移;主题 DIY 会涉及到 js 文件和 css 文件等的修改,个人建议新增的 js 文件放在
themes/matery/layout/layout.ejs
这个文件下,这样会稍微加快博客访问的速度。不想花钱最好的方式是使用 cdn.jsdeliver。以后会说到。
先放上效果图再说:
离开当前页面时
返回当前页面时
实现方法,引入 js 文件,在主题文件下的 /source/js/
下新建 FunnyTitle.js
,然后在添加到 themes/matery/layout/layout.ejs
或者添加到 themes/matery/layout/_partial/head.ejs
,其代码如下:
Code< !--浏览器搞笑标题--> var OriginTitle = document.title;var titleTime;document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/favicon.png"); document.title = ' Don't go!'; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/favicon.png"); document.title = ' Welcome to loole's blog' + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); }});
或者直接在 themes/matery/layout/layout.ejs
文件中添加如下代码:
Code
打开 themes/matery/source/css/matery.css
文件,大约在 250 行,有一个.bg-color
属性,修改其属性值即可,代码如下:
Code.bg-color { background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值 opacity: 0.8; //透明效果 值范围 0~1,看情况自己修改}
实现方法,引入 js 文件,在主题文件下的 /source/js/
下新建 click_show_text.js
,其代码如下:
Codevar a_idx = 0;jQuery(document).ready(function ($) { $("body").click(function (e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"); var $i = $("").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 5, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#FF0000" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 3000, function () { $i.remove(); }); }); setTimeout('delay()', 2000);});function delay() { $(".buryit").removeAttr("onclick");}
或者使用我的 cdn 链接,理论上一直有效 https://cdn.jsdelivr.net/gh/Yafine/cdn@3.3.4/source/js/click_show_text.js,然后在添加到 themes/matery/layout/layout.ejs
。
打开 theme/matery/layout/about.ejs
文件,大约在 13 行。有一个 `` 标签,找出其对应结尾的标签,大约在 61 行左右,然后在新增如下代码:
Code<%- __('个人简历') %><%- page.content %>
注意粘贴的位置和空格要正确,这里的位置随你自己设置,你也可以把简历作为第一个 card,然后 /source/about/index.md
下面写上你的简历了(就像写博客一样)。
---title: aboutdate: 2020-11-21 12:36:18type: "about"layout: "about"description:---## 个人信息![Loole](https://img-blog.csdnimg.cn/20201121170559699.jpg#pic_center)## 基本信息 - 昵称:Loole - 所在地:中国-江苏 - 南京 - 学历: 本科大三在校生 - 学习方向:算法 / java / 网络 / Web - 目标:全栈开发工程师 / 算法工程师 / 菜鸡 - 爱好:篮球 / 编程 / 游戏 ## 联系我 - qq: 2865134664 - email: 2865134664@qq.com - github: looles.github.io - gitee: https://gitee.com/happyzm/happyzm - blog: loole.fun## 暂未更新
注意:首先需要检查你的 hexo 版本是多少,在你的博客目录下执行命令 hexo -v 即可,这个豆瓣插件需要的版本需要 < 4.2.0,否则会出现 bug,比如点击书单的在读,想读或者已读会出现一个新的弹出页面,解决办法就是降低 hexo 的版本,先卸载目前的 hexo 版本,再安装 4.0.0 版本的 hexo 即可,我的版本为 4.0.0。
Codenpm uninstall hexonpm install hexo@4.0.0 -g
Codenpm install hexo-douban --save
_config.yml
下,添加如下配置:Codedouban: user: 252345665 #这个需要修改为你个人的id builtin: false #如果想生成豆瓣页面,这个需要设置为true book: title: 'This is my book title' quote: 'This is my book quote' movie: title: 'This is my movie title' quote: 'This is my movie quote' game: title: 'This is my game title' quote: 'This is my game quote' timeout: 10000
hexo s
和 hexo g
中,默认是 false
,另一可选项为 true
。如果只想显示某一个页面 (比如 movie),那就把其他的配置项注释掉即可。
_config.yml
中添加关于此页面的菜单:(下面是我的配置)Codemenu: 媒体: url: / icon: fas fa-list children: - name: 电影 url: /movies icon: fas fa-film - name: 书单 url: /books icon: fas fa-book - name: 游戏 url: /games icon: fas fa-gamepad
/themes/hexo-theme-matery/layout
文件夹下面创建一个名为 douban.ejs
的文件,并将下面的内容复制进去:Code<%- partial('_partial/post-cover') %><%= page.title %>
<%- page.content %>如果你有好的内容推荐,欢迎在下面留言!
<% if (theme.gitalk && theme.gitalk.enable) { %> <%- partial('_partial/gitalk') %> <% } %> <% if (theme.gitment.enable) { %> <%- partial('_partial/gitment') %> <% } %> <% if (theme.disqus.enable) { %> <%- partial('_partial/disqus') %> <% } %> <% if (theme.livere && theme.livere.enable) { %> <%- partial('_partial/livere') %> <% } %> <% if (theme.valine && theme.valine.enable) { %> <%- partial('_partial/valine') %> <% } %>
node_modules
文件夹下找到 hexo-douban/lib
,文件夹下有三个 js 文件,分别为:books-generator.js
、games-generator.js
、movies-generator.js
,用文本编辑器打开这三个文件,并将其文件内容末尾的代码修改为一下内容:Code/* 原文件内容为 layout: [`page`, `post`] ,将其修改为下面的内容*/layout: [`page`, `douban`]
Codehexo douban
需要注意的是,通常大家都喜欢用 hexo d
来作为 hexo deploy
命令的简化,但是当安装了 hexo douban
之后,就不能用 hexo d
了,因为 hexo douban
跟 hexo deploy
的前缀都是 hexo d
,你以后执行的 hexo d
将不再是 Hexo 页面的生成,而是豆瓣页面的生成。
以下是可选的命令参数:
Code-h, --help # 帮助页面-b, --books # 只生成书单页面-g, --games # 只生成游戏页面-m, --movies # 只生成电影页面
当站点配置文件的 builtin 的值为 true 时,生成页面的功能会嵌入到 hexo g
和 hexo s
中,在进行部署生成操作,会自动生成相应的页面。
是一个跳转外链相关插件。自动为所有 html 文件中外链的 a 标签生成对应的属性。 比如 设置
target=’_blank’, rel=’external nofollow noopener noreferrer’
告诉搜索引擎这是外部链接,不要将该链接计入权重。 同时自动生成外链跳转页面,默认在根目录下 go.html;
使用 npm 或者 yarn 安装
Code## npm 安装npm install hexo-external-link --save## yarn 安装yarn add hexo-external-link
之后再 hexo 博客站点根目录下添加如下配置:
Codehexo_external_link: enable: true enable_base64_encode: true url_param_name: 'u' html_file_name: 'go.html' target_blank: true link_rel: 'external nofollow noopener noreferrer' domain: 'your_domain' # 如果开启了防盗链,填写你的域名 safety_chain: true
hexo_external_link
插件 - 默认 falseurl
使用 base64编码
- 默认 faslehtml_file_name
的参数名 - 默认 ‘u’a
标签添加 target='_blank'
- 默认 truea
标签的 rel 属性 - 默认 ‘external nofollow noopener noreferrer’img
在 themes/matery/layout/layout.ejs
文件中添加如下代码:
Code
其中:
先看效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HJv0GdnE-1609722423687)(C:\Users\HAPPY\AppData\Roaming\Typora\typora-user-images\image-20201205133939145.png)]
img
在 themes/matery/source/js
目录下新建 sakura.js
文件,打开这个网址,将内容复制粘贴到 sakura.js 即可。
然后再 themes/matery/layout/layout.ejs
文件内添加下面的内容:
Code
先看看效果,再决定要不要用。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hQo6fqpW-1609722423688)(C:\Users\HAPPY\AppData\Roaming\Typora\typora-user-images\image-20201205133834463.png)]
img
在 themes/matery/source/js
目录下新建 cursor.js
文件,打开这个网址,将内容复制粘贴到 cursor.js 即可。
然后再 themes/matery/layout/layout.ejs
文件内添加下面的内容:
Code
我的 404 页面是这样的:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2WBndhTN-1609722423689)(C:\Users\HAPPY\AppData\Roaming\Typora\typora-user-images\image-20201205134348582.png)]
img
开始说一下配置步骤,首先再站点根目录下的 source 文件夹下新建 404.md
文件,里面内容如下:
Code---title: 404date: 2020-09-30 17:25:30type: "404"layout: "404"description: "Oops~,我崩溃了!找不到你想要的页面 :("---
紧接着再新建主题文件夹的 layout 目录下新建 404.ejs
文件,添加内容如下:
Code404<%= page.description %>
然后部署,再看看效果即可。
主题默认的文章链接配置是
Codepermalink: :year/:month/:day/:title
这种生成的链接地址很长,文章版权的链接地址会出现一大串字符编码,一点也不好看。因此需要修改文章生成链接的格式。
首先再根目录下执行下面的命令:
Codenpm install hexo-abbrlink --save
然后再站点配置文件下添加如下配置:
Codeabbrlink: alg: crc16 #算法: crc16(default) and crc32 rep: hex #进制: dec(default) and hex: dec #输出进制:十进制和十六进制,默认为10进制。丨dec为十进制,hex为十六进制
再将站点配置文件的 permalink
的值修改为:
Codepermalink: posts/:abbrlink.html # 此处可以自己设置,也可以直接使用 :/abbrlink
生成文章的链接格式就会是如下样例(官方样例):
Codecrc16 & hexhttps://post.zz173.com/posts/66c8.htmlcrc16 & dechttps://post.zz173.com/posts/65535.htmlcrc32 & hexhttps://post.zz173.com/posts/8ddf18fb.htmlcrc32 & dechttps://post.zz173.com/posts/1690090958.html
生成完后,原 md 文件的 Front-matter 内会增加 abbrlink
字段,值为生成的 ID 。这个字段确保了在我们修改了 Front-matter
内的博客标题 title 或创建日期 date 字段之后而不会改变链接地址。
我只说几个常用的评论系统的配置方法,其他的就不说了。
首先去,点击导航栏上的安装,会出现如下图的页面:
img
注册完之后,会提示你填写网站的相关信息,如网站链接,网站名称等等,填写完毕之后,会给你一段代码,如下图所示:
img
Code# Livere comment configuration, the default is not activated# Livere 来必力评论模块的配置,默认为不激活livere: enable: true # true即为开启评论系统 uid: #这里填写你的uid
然后在执行相关的部署命令,然后查看效果即可。
如果注册过 LeanCloud,请点击此处进行,未注册的请点击
经过登录或者注册之后再登录,就会进入如下的页面:
img
创建应用完成后,会出现如下页面,然后点击设置
img
会出现下面的页面,将其中 APPID 和 APPKey 复制,添加到配置文件中。
img
Code# The configuration of the Valine comment module is not activated by default.# To use it, activate the configuration item and set appId and appKey.# Valine 评论模块的配置,默认为不激活,如要使用,就请激活该配置项,并设置 appId 和 appKey.valine: enable: false # true即为开启评论系统 appId: #此处填写你的appid appKey: #此处填写你的appkey notify: false verify: false visitor: true avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide pageSize: 10 placeholder: 'just go go' # Comment Box placeholder background: https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.1/social/comment_bg.png
然后执行相关部署命令,查看效果即可。
还在完善,这个貌似得通过特殊途径才能注册。有时间再写吧。
你也可以参考这位作者的文档,作者自己搭建的代理:https://disqusjs.skk.moe/
**知识小课堂:**图片加载方式有两种,一个是预加载,另一个就是懒加载,那你了解什么是预加载和懒加载吗?下面来学习一下。
参考:
预加载与懒加载的区别之处:
两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预载则会增加服务器前端压力。
使用图片懒加载需要安装插件:
在站点根目录执行下面的命令:
Bashnpm install hexo-lazyload-image --save
之后在站点配置文件下添加下面的代码:
Ymllazyload: enable: true # 是否开启图片懒加载 onlypost: false # 是否只对文章的图片做懒加载 loadingImg: # eg ./images/loading.gif
最后执行 hexo clean && hexo g && hexo s
就可以看到效果了。
注意,以下几个小问题针对 matery 主题而言,其他主题是否会出现以下情况目前我也不清楚,如果出现,你在尝试下以下解决方法。(暴力解决法,而不是直接修改懒加载插件😂😂😂)
修改主题文件下的 matery.js,在 108 行左右添加以下代码:
Javascript$(document).find('img[data-original]').each(function(){ $(this).parent().attr("href", $(this).attr("data-original"));});
修改主题的 header.ejs 文件,原代码为:
Javascript
修改为:
Javascript
经过以上操作就已经很完美了,以下内容可做可不做
其实第一次加载后本地都是有缓存的,如果每次都把 loading 显示出来就不那么好看
所以我们需要对插件进行魔改,让图片稍微提前加载,避开加载动画
打开 Hexo根目录
>node_modules
> hexo-lazyload-image
> lib
> simple-lazyload.js
文件
第 9 行修改为:
Javascript&& rect.top <= (window.innerHeight +240 || document.documentElement.clientHeight +240)
作用:提前 240 个像素加载图片;当然这个值也可以根据自己情况修改
参考:https://blog.sky03.cn/posts/42790.html#toc-heading-5
因为 hexo 生成的 html、css、js 等都有很多的空格或者换行,而空格和换行也是占用字节的,所以需要将空格换行去掉也就是我要进行的 “压缩”。
有人说空格换行能占多少字节?确实占不了多少,但是一个人访问是这么多字节,那么一百人,一万人呢?加起来这量就不少了吧,这都是流量啊!这也是很多 css/js 文件的后缀为*.min.js 或*.min.css 的原因。虽然我们可能没那么多访问量,但是能减小一点资源文件的大小也是对访问速度有那么一点提升的。
我们采用 gulp 代码压缩方式。
使用方法:
Code# 全局安装gulp模块npm install gulp -g# 安装各种小功能模块 执行这步的时候,可能会提示权限的问题,最好以管理员模式执行npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save# 额外的功能模块npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save
gulpfile.js
,并复制以下内容到文件中,有中文注释,可以根据自己需求修改。(注意:文件名不能错,一定为 gulpfile.js
,否则会出错!)Codevar gulp = require("gulp");var debug = require("gulp-debug");var cleancss = require("gulp-clean-css"); //css压缩组件var uglify = require("gulp-uglify"); //js压缩组件var htmlmin = require("gulp-htmlmin"); //html压缩组件var htmlclean = require("gulp-htmlclean"); //html清理组件var imagemin = require("gulp-imagemin"); //图片压缩组件var changed = require("gulp-changed"); //文件更改校验组件var gulpif = require("gulp-if"); //任务 帮助调用组件var plumber = require("gulp-plumber"); //容错组件(发生错误不跳出任务,并报出错误内容)var isScriptAll = true; //是否处理所有文件,(true|处理所有文件)(false|只处理有更改的文件)var isDebug = true; //是否调试显示 编译通过的文件var gulpBabel = require("gulp-babel");var es2015Preset = require("babel-preset-es2015");var del = require("del");var Hexo = require("hexo");var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象// 清除public文件夹gulp.task("clean", function () { return del(["public/**/*"]);});// 下面几个跟hexo有关的操作,主要通过hexo.call()去执行,注意return// 创建静态页面 (等同 hexo generate)gulp.task("generate", function () { return hexo.init().then(function () { return hexo .call("generate", { watch: false }) .then(function () { return hexo.exit(); }) .catch(function (err) { return hexo.exit(err); }); });});// 启动Hexo服务器gulp.task("server", function () { return hexo .init() .then(function () { return hexo.call("server", {}); }) .catch(function (err) { console.log(err); });});// 部署到服务器gulp.task("deploy", function () { return hexo.init().then(function () { return hexo .call("deploy", { watch: false }) .then(function () { return hexo.exit(); }) .catch(function (err) { return hexo.exit(err); }); });});// 压缩public目录下的js文件gulp.task("compressJs", function () { return gulp .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js .pipe(gulpif(!isScriptAll, changed("./public"))) .pipe(gulpif(isDebug, debug({ title: "Compress JS:" }))) .pipe(plumber()) .pipe( gulpBabel({ presets: [es2015Preset] // es5检查机制 }) ) .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩 .pipe(gulp.dest("./public")); //输出到目标目录});// 压缩public目录下的css文件gulp.task("compressCss", function () { var option = { rebase: false, //advanced: true, //类型:Boolean 默认:true [是否开启高级优化(合并选择器等)] compatibility: "ie7" //保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式] //keepBreaks: true, //类型:Boolean 默认:false [是否保留换行] //keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀 }; return gulp .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css .pipe(gulpif(!isScriptAll, changed("./public"))) .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" }))) .pipe(plumber()) .pipe(cleancss(option)) .pipe(gulp.dest("./public"));});// 压缩public目录下的html文件gulp.task("compressHtml", function () { var cleanOptions = { protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理 unprotect: /
gulp
或者 gulp default
,这个命令相当于 hexo cl&&hexo g
并且再把代码和图片压缩。gulp build
,这个命令与第 1 种相比是:在最后又加了个 hexo d
,等于说生成、压缩文件后又帮你自动部署了。值得注意的是:这个加入了图片压缩,如果不想用图片压缩可以把第 154 行的
"compressImage",
和第 165 行的,"compressImage"
去掉即可
可能以上方法比较复杂,来介绍个简单的, 插件也是用来压缩代码的,底层也是通过 gulp 来实现的。
但是这个插件是有 Bug 的:
在博客站点根目录执行安装代码:
Codenpm install hexo-neat --save
紧接着在站点根目录下的配置文件添加如下代码:
Codeneat_enable: trueneat_html: enable: true exclude:neat_css: enable: true exclude: - '*.min.css'neat_js: enable: true mangle: true output: compress: exclude: - '*.min.js'
然后直接 hexo cl&&hexo g
就可以了,会自动压缩文件 。
补充:为了解决以上 Bug,对于 matery 主题(其他主题自行解决)需要将以上默认配置修改为:
Code#hexo-neat 优化提速插件(去掉HTML、css、js的blank字符)neat_enable: trueneat_html: enable: true exclude: - '**/*.md'neat_css: enable: true exclude: - '**/*.min.css'neat_js: enable: true mangle: true output: compress: exclude: - '**/*.min.js' - '**/**/instantpage.js' - '**/matery.js'
写新文章时,需要控制台执行 hexo new "文章名字"
,这样就会在_posts
下生成一篇新文章,但需要手动打开,挺麻烦,只需要在站点根目录下新建 scripts
目录,然后在新建 auto_open.js
,在文件填入一下内容:
Codevar spawn = require('child_process').exec;// Hexo 2.x 用户复制这段//hexo.on('new', function(path){ //spawn('start "markdown编辑器绝对路径.exe" ' + path);//});// Hexo 3 用户复制这段hexo.on('new', function(data){ spawn('start "D:\Program Files\Typora\Typora.exe" ' + data.path);});
其中 "D:\Program Files\Typorae\Typora.exe"
是我本地编辑器的路径,只需要改为你本地编辑器的路径即可,然后在执行 hexo cl && hexo g -d
,部署到 GitHub 即可,以后在发布文章就会自动打开编辑器。
感觉对你有帮助的话,请star,fork一下哦。
文章参考来源