Hexo折腾记
如果时间可以静止,我希望就停在此刻。
前言
博主之前也有折腾wordpress和jekyll可对于一个前端er来说,wordpress让人没法尽兴,因为不知道该如何添加自己的代码。而jekyll就太麻烦了每一次都需要重新提交,而且样式也不是很丰富,简直就和鸡肋一般。食之无味,弃之可惜。
之前有听说过Hexo这个博客框架,但一直没时间给自己搭一个,其实平时也有注意到很多大牛的博客是很绚丽的,却不知道那就是Hexo。说干就干,历时一整天,踩坑无数,终于变成了博主想要的样子。放个链接Damonare的个人博客如果你也想要一个和博主一样的博客,那就继续看下去吧。
- 博主系统Window7,搭建博客主题Yilia。下面记录博主搭建的整个过程。
git和github
Hexo
- 好的,现在你有了github和git了,也配置好了,那么就需要在github新建一个仓库了,
注意:这里的仓库名称要和你的username对应
- Node安装
Node可以去官网下载,或是在国内下载,由于众所周知的原因,这里放一个nodejs.cn的链接
Node内置npm包,我们之后就可以打开node命令行使用npm进行安装一些依赖,如果觉得太慢,可以使用淘宝镜像cnpm
- Hexo安装
好的,现在我们Node,git,github都弄好了,现在可以本地化一个hexo了,新建hexo文件夹,任意盘下都可以,然后命令行执行命令:
npm install hexo -g #-g表示全局安装, npm默认为当前项目安装
如果遇到错误:
{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
改用下面的命令安装:
npm install hexo --no-optional
好的,现在hexo也就绪了,hexo命令:
cd ~/git
hexo init hexo #执行init命令初始化到你指定的hexo目录
cd hexo
npm install #install before start blogging
hexo generate #自动根据当前目录下文件,生成静态网页
hexo server #运行本地服务
浏览器输入http://localhost:4000就可以看到效果。
浏览目录
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json
添加博文
hexo new "postName" #新建博文,其中postName是博文题目
如果不想博文在首页全部显示, 并能出现阅读全文按钮效果, 需要在你想在首页显示的部分下添加
<!--more-->
这点和wordpress是一样的
Hexo Yilia主题配置
cd ~/git/hexo
git clone git@github.com:litten/hexo-theme-yilia.git themes/yilia
在./_config.yml,修改主题为yilia
theme: yilia
Hexo 主题
查看本地效果
hexo g
hexo s
完整配置信息如下:
# Site #站点信息
title: blog Name #标题
subtitle: Subtitle #副标题
description: my blog desc #描述
author: me #作者
language: zh-CN #语言
timezone: Asia/Shanghai #时区
# URL
url: http://yoururl.com #用于绑定域名, 其他的不需要配置
root: /
#permalink: :year/:month/:day/:title/
permalink: posts/title.html
permalink_defaults:
# Directory #目录
source_dir: source #源文件
public_dir: public #生成的网页文件
tag_dir: tags #标签
archive_dir: archives #归档
category_dir: categories #分类
code_dir: downloads/code
i18n_dir: :lang #国际化
skip_render:
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认模板(post page photo draft)
titlecase: false #标题转换成大写
external_link: true #新标签页里打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #语法高亮
enable: true
line_number: true #显示行号
auto_detect: true
tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Date / Time format #日期时间格式
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination #分页
per_page: 10 #每页文章数, 设置成 0 禁用分页
pagination_dir: page
# Extensions #插件和主题
## 插件: http://hexo.io/plugins/
## 主题: http://hexo.io/themes/
theme: next
# Deployment #部署, 同时发布在 GitHub 和 GitCafe 上面
deploy:
- type: git
repo: git@gitcafe.com:username/username.git,gitcafe-pages
- type: git
repo: git@github.com:username/username.github.io.git,master
# Disqus #Disqus评论系统
disqus_shortname:
plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
其它设置,可参考:这篇博文
Hexo Yilia Bug修改
修改参考这里基本所有的问题都能在这里解决了,所以啊,一个项目的issue真的很具有参考价值,少走不少弯路,通过这里的代码博主添加了 Hexo文章统计 功能,没有动画,头像设置有null的问题以及点击小房子没反应的bug。
Hexo添加文章目录
我们首先要编辑文章显示页面的模板,也就是
themes/landscape/layout/_partial/article.ejs
文件。为了将目录生成在正文之前,我们首先在这个文件中找到
<%- post.content %>
并在这一行之前加入如下代码:
<!-- Table of Contents -->
<% if (!index && post.toc){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(post.content) %>
</div>
<% } %>
这段代码的含义清晰明了,if语句中有两个条件,!index是为了不在首页的文章摘要中生成目录,post.toc确保了只在显式地标记了toc: true的文章中生成目录。若这两个条件满足,则创建一个目录的div。
修改完这个文件之后,找一篇包含了多个子标题的文章,并在文章开头的front-matter中添加一句toc: true,在浏览器中访问这篇文章,应该可以看到文章的开头处已经有了带链接的目录。但是这样的目录实在太难看,我们还需要添加相应的CSS来将其指定为我们想要的样式。
要指定目录的样式,我们要修改的文件是
themes/landscape/source/css/_partial/article.styl
在文件的最后,添加如下代码:
/*toc*/
.toc-article
background #eee
border 1px solid #bbb
border-radius 10px
margin 1.5em 0 0.3em 1.5em
padding 1.2em 1em 0 1em
max-width 28%
.toc-title
font-size 120%
#toc
line-height 1em
font-size 0.9em
float right
.toc
padding 0
margin 1em
line-height 1.8em
li
list-style-type none
.toc-child
margin-left 1em
由于Hexo使用的是stylus预处理器,所以CSS代码要注意缩进,不然就报错了,这种目录要是不满意完全可以按照自己意愿写一个。
Hexo 多说评论框
链接:多说社会化评论框核心脚本embed.js本地化方法
链接:多说社会化评论框添加 站长回复 标记
链接: 多说回复后显示浏览器及操作系统信息(Useragent)
后记
有任何问题请在评论中回复,博主会在评论中解答。
Hexo折腾记的更多相关文章
- Hexo折腾记--小白修改新主题
UPDATE 2019.5.28 不好意思我又换了个新主题ARIA啦...这回没有个人定制了 前言 如果您曾经来过我的博客,就会发现我的个人博客(https://rye-catcher.github. ...
- 斐讯N1折腾记
斐讯N1折腾记:运行 Linux 及优化 2018-06-23 37条评论 4,445次阅读 11人点赞 最后更新时间:2019年03月10日 咳咳咳,上篇教程教大家给斐讯 N1 降级并且刷了 ...
- Atom编辑器折腾记
http://blog.csdn.net/bomess/article/category/3202419/2 Atom编辑器折腾记_(1)介绍下载安装 Atom编辑器折腾记_(2)基础了解使用 Ato ...
- BeagleBone折腾记(一):连接你的狗板
BeagleBone折腾记一连接你的狗板 准备 了解BeagleBone BeagleBone社区 所需软硬件 USB连接 TTL连接 结语 准备 了解BeagleBone BeagleBone可能一 ...
- Vue折腾记 - (3)写一个不大靠谱的typeahead组件
Vue折腾记 - (3)写一个不大靠谱的typeahead组件 2017年07月20日 15:17:05 阅读数:691 前言 typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的ty ...
- Anaconda折腾记(1)
Anaconda折腾记 谨此记录小白的我在Anaconda里面的摸爬滚打 更换更新源 可以不使用命令,直接进入C盘,进入user文件夹,进入当前的用户文件夹下,记得显示隐藏文件. 找到.condarc ...
- FreeBSD jail 折腾记(二)
FreeBSD jail 折腾记(二) 创建jail目录 创建4个 分别是模板 骨架 数据 项目 创建模板目录 mkdir -p /jail/j1 # 然后放入基本目录,上篇说过不再写 创建骨架目录 ...
- 【转载】有图 KVM折腾记..
KVM折腾记...https://lengjibo.github.io/KVM%E6%8A%98%E8%85%BE%E8%AE%B0/ Veröffentlicht am 2018-09-20 | ...
- Android编译环境折腾记
题记:感觉是时候写点什么了=_=! 第一次安装了ubuntu14.04.5,官网下载的iso,官网下的jar,编译android4.x需要安装jdk6,更高的版本会有问题,baidu到很多搭建环境的步 ...
随机推荐
- ASP.NET Core 数据保护(Data Protection)【中】
前言 上篇主要是对 ASP.NET Core 的 Data Protection 做了一个简单的介绍,本篇主要是介绍一下API及使用方法. API 接口 ASP.NET Core Data Prote ...
- MongoDB 聚合管道(Aggregation Pipeline)
管道概念 POSIX多线程的使用方式中, 有一种很重要的方式-----流水线(亦称为"管道")方式,"数据元素"流串行地被一组线程按顺序执行.它的使用架构可参考 ...
- 通杀所有系统的硬件漏洞?聊一聊Drammer,Android上的RowHammer攻击
通杀所有系统的硬件漏洞?聊一聊Drammer,Android上的RowHammer攻击 大家肯定知道前几天刚爆出来一个linux内核(Android也用的linux内核)的dirtycow漏洞.此洞可 ...
- 你必须知道的指针基础-4.sizeof计算数组长度与strcpy的安全性问题
一.使用sizeof计算数组长度 1.1 sizeof的基本使用 如果在作用域内,变量以数组形式声明,则可以使用sizeof求数组大小,下面一段代码展示了如何使用sizeof: ,,,,,}; int ...
- Android学习——uses-sdk标签详解
1 前言 我们都知道,Android的版本在不断的迭代,并且每个版本都加入了不同的新特性.那么随着Android的用户量越来越多,Android的开发人员就必须熟悉Android各个版本的特性并且确保 ...
- Java static 的一两点使用
这篇文章是关于Java static关键字的使用,主要会介绍以下的内容: static 的概念 static的各种应用 总结 static 是什么 static 顾名思义是静态的意思.与this相对, ...
- js实用篇之String对象
概述 String对象是JavaScript原生提供的三个包装对象之一,用来生成字符串的包装对象. var s1 = 'abc'; var s2 = new String('abc'); typeof ...
- ES6新特性之 promise
新的ES6中引入了promise的概念,目的是让回调更为优雅.层层嵌套的回调会让javascript失去美感和可读性,同时javascript也推荐采用链式的方式去书写函数调用.于是Promise就应 ...
- python的shutil模块
shutil模块提供了大量的文件的高级操作.特别针对文件拷贝和删除,主要功能为目录和文件操作以及压缩操作 1.复制文件 def copy(src, dst): """Co ...
- SQLSERVER中的假脱机spool
SQLSERVER中的假脱机spool 我发现网上对于假脱机的解释都非常零散,究竟假脱机是什么? 这几天在家里研究了一下,收集了很多网上的资料 假脱机是中文的翻译,而英文的名字叫做 spool 在徐老 ...