Hexo折腾记

时间  2019-11-15 标签 hexo 折腾

若是时间能够静止，我但愿就停在此刻。 博客地址:Damonare的我的博客css

前言

博主以前也有折腾wordpress和jekyll可对于一个前端er来讲，wordpress让人无法尽兴，由于不知道该如何添加本身的代码。而jekyll就太麻烦了每一次都须要从新提交，并且样式也不是很丰富，简直就和鸡肋通常。食之无味，弃之惋惜。html

以前有据说过Hexo这个博客框架，但一直没时间给本身搭一个，其实平时也有注意到不少大牛的博客是很绚丽的，殊不知道那就是Hexo。说干就干，历时一成天，踩坑无数，终于变成了博主想要的样子。放个连接Damonare的我的博客若是你也想要一个和博主同样的博客，那就继续看下去吧。前端

  • 博主系统Window7,搭建博客主题Yilia。下面记录博主搭建的整个过程。

git和github

  • 想搭建一个博客的应该大多数都是程序员吧，那么github帐号应该是必定有的了。你要是实在清新脱俗到连个github帐号也没有，不用担忧，给你个外链Github,帐号设置而后添加SSH,这样你以后输入hexo命令的时候就不用一次次输入密码了，关于如何注册github和添加SSH，这里须要提醒一点，github帐号最好都是小写字母，否则容易解析错误，还有邮箱，尽可能别用国内的邮箱，很容易出问题了，好比你git提交的贡献不被记录。
  • Git身为程序员给他应该是会用的吧。好吧假设你不会使用git和github给你个外链看这里

Hexo

  • 好的，如今你有了github和git了，也配置好了，那么就须要在github新建一个仓库了,node

    这里写图片描述

    注意：这里的仓库名称要和你的username对应git

  • Node安装

Node能够去官网下载，或是在国内下载，因为众所周知的缘由，这里放一个nodejs.cn的连接 Node内置npm包，咱们以后就能够打开node命令行使用npm进行安装一些依赖，若是以为太慢，可使用淘宝镜像cnpm程序员

  • Hexo安装

好的，如今咱们Node,git,github都弄好了，如今能够本地化一个hexo了,新建hexo文件夹，任意盘下均可以，而后命令行执行命令：github

npm install hexo -g  #-g表示全局安装, npm默认为当前项目安装复制代码

若是遇到错误：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' }复制代码

改用下面的命令安装：json

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是博文题目复制代码

若是不想博文在首页所有显示, 并能出现阅读全文按钮效果, 须要在你想在首页显示的部分下添加

 复制代码

这点和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="" %="">
  
  
  

 复制代码

并在这一行以前加入以下代码：

 
<% if="" (!index="" &&="" post.toc){="" %="">

  
  
  

 
 
 
  文章目录 <%- toc(post.content)="" %=""> 
 
   

 

<% }="" %="">
  
  
  

 
  
  
  

 复制代码

这段代码的含义清晰明了，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）

后记

有任何问题请在评论中回复，博主会在评论中解答。

联系我们 沪ICP备13005482号-10