hexo进阶

post thumb
Hexo
作者 Louis 发表于 2018年6月5日

hexo部署命令

常用命令

]$ hexo help #查看帮助
]$ hexo init #初始化一个目录
]$ hexo new "postName" #新建文章
]$ hexo new page "pageName" #新建页面
]$ hexo generate #生成网页，可以在 public 目录查看整个网站的文件
]$ hexo server #本地预览，'Ctrl+C'关闭
]$ hexo deploy #部署.deploy目录
]$ hexo clean #清除缓存，**强烈建议每次执行命令前先清理缓存，每次部署前先删除 .deploy 文件夹**

常用简写命令

]$ hexo n ==> hexo new
]$ hexo g ==> hexo generate
]$ hexo s ==> hexo server
]$ hexo d ==> hexo deploy
]$ hexo d -g		#生成加部署
]$ hexo s -g		#预览部署

_config.yml全局配置

]$ vim ~/hexo/_config.yml
# Hexo Configuration
# Docs: http://hexo.io/docs/configuration.html
# Source: https://github.com/hexojs/hexo/
# Site #站点信息
title:  #标题
subtitle:  #副标题
description:  #站点描述，给搜索引擎看的
author:  #作者
email:  #电子邮箱
language: zh-CN #语言
# URL #链接格式
url:  #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.markdown #新文章标题
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
highlight: #语法高亮
 	  enable: true #是否启用
 	  line_number: true #显示行号
 	  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数，设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论，替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件，例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署，
deploy:
	  type: git
 	  repo: 刚刚github创库地址.git
 	  branch: master

blog创建及部署

创建关于/分类/标签页面

  • about
  • categories
  • tags
]$ hexo new "我的第一篇博客"
]$ hexo n page 'about'
]$ hexo new "Ansible"
]$ hexo new 'safe'
]$ hexo n page 'categories'
]$ vim ~/source/categories/index.markdown
type: "categories"
]$ hexo n page 'tags'
]$ vim ~/source/tags/index.markdown
type: "tags"

打赏页面

]$ vim ~/themes/next/_config.yml
  #Reward
reward_comment: 觉得有帮助可以支持作者
wechatpay: /images/wechatpay.jpg   #相对路径或者绝对路径
alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

背景线条

打开：~/theme/next/layout/_layout.swig

在 < /body>之前添加代码(注意不要放在< /head>的后面)

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

打开：~/theme/next/_config.yml ,改成true

# --------------------------------------------------------------
canvas_nest: true

如过觉得线条多的话，

重新编辑next/layout/_layout.swig

{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

配置项说明

  • color ：线条颜色, 默认: '0,0,0'；三个数字分别为(R,G,B)
  • opacity: 线条透明度（0~1）, 默认: 0.5
  • count: 线条的总数量, 默认: 150
  • zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

页面点击出红心

在网址输入如下

http://7u2ss1.com1.z0.glb.clouddn.com/love.js

然后将里面的代码copy一下vim ~/themes/next/source/js/src/love.js，添加上面的代码，然后打开vim ~/themes/next/layout/_layout.swig文件,在末尾添加以下代码：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

左侧链接栏

  • auto_excerpt:不显示全文页
$vim ~/themes/next/_config.yml
auto_excerpt:
  enable: ture
  length: 150
  • busuanzi_count:显示浏览量及访问量
$vim ~/themes/next/_config.yml
busuanzi_count:
	# count values only if the other configs are false
 	enable: true
 	# custom uv span for the whole site
 	site_uv: true
 	site_uv_header: <i class="fa fa-user"></i> 访问人数
 	site_uv_footer:
 	# custom pv span for the whole site
 	site_pv: true
 	site_pv_header: <i class="fa fa-eye"></i> 总访问量
 	site_pv_footer: 次
 	# custom pv span for one page only
 	page_pv: true
 	page_pv_header: <i class="fa fa-file-o"></i> 浏览
 	page_pv_footer: 次
  • social: 链接栏
$vim ~/themes/next/_config.yml
social:
  GitHub: https://github.com/oldthreefeng || github
  #E-Mail: mailto:louisehong4168@gmail.com || Mail
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  Instagram: https://instagram.com/louisehong4168 || instagram
  #Skype: skype:yourname?call|chat || skype

social_icons:
  enable: true
  • links：友情链接
]$ vim ~/themes/next/_config.yml
# Blog rolls
links_icon: link
links_title: 看看他们
links_layout: block
#links_layout: inline
links:
  Awesome: https://fontawesome.com/icons

小图标

字数统计功能

在根目录下安装 hexo-wordcount,运行：

$ npm install hexo-wordcount --save

然后在主题的配置文件themes/next/_config.yml中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

change font by config.yml

@ ritta.blens@gmail.com first way

$ vim ~/themes/next/_config.yml
# 在网上找的字体：我用的是Microsoft YaHei
# you can use https://www.websiteplanet.com/blog/best-free-fonts/ to find you want~
# "Helvetica Neue"," Helvetica, Arial", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei"
font:
  enable: true
  # Uri of fonts host. E.g. //fonts.googleapis.com (Default)
  host: 
  # Global font settings used on <body> element.
    # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Lato
    size: 16

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab
    size:

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family: Roboto Mono

second way to change your font :

vim ~/themes/next/_config.yml
 # For example, you want to put your custom styles file 
 # outside theme directory in root `source/_data`, set 
 # `styles: source/_data/styles.styl` 
 #custom_file_path: 
   # Default paths: layout/_custom/* 
   #head: source/_data/head.swig 
   #header: source/_data/header.swig 
   #sidebar: source/_data/sidebar.swig 
  
   # Default path: source/css/_variables/custom.styl 
   #variables: source/_data/variables.styl 
   # Default path: source/css/_mixins/custom.styl 
   #mixins: source/_data/mixins.styl 
   # Default path: source/css/_custom/custom.styl 
   #styles: source/_data/styles.styl

you can add your custom styles in source/_data/styles.styl according to ~/themes/next/source/css/_variables/base.styl

vim ~/themes/next/source/css/_variables/base.styl
// Font families.
$font-family-chinese      = "PingFang SC", "Microsoft YaHei"

$font-family-base         = $font-family-chinese, sans-serif
$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')

$font-family-logo         = $font-family-base
$font-family-logo         = get_font_family('logo'), $font-family-base if get_font_family('logo')

$font-family-headings     = $font-family-base
$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings')

$font-family-posts        = $font-family-base
$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts')

$font-family-monospace    = consolas, Menlo, $font-family-chinese, monospace
$font-family-monospace    = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes')

$font-family-icons        = 'FontAwesome'

linktogithub

报错

搭建过程中出现了几个报错，统计了一下

异常报错1 fatal: unable to access : Empty reply from server FATAL Something’s wrong. Maybe you can find the solution here: Error: fatal: unable to access ： Empty reply from server

$hexo clean

异常报错2 ERROR Deployer not found: git

]$ npm install hexo-generator-index --save
]$ npm install hexo-generator-archive --save
]$ npm install hexo-generator-category --save
]$ npm install hexo-generator-tag --save
]$ npm install hexo-server --save
]$ npm install hexo-deployer-git --save
]$ npm install hexo-renderer-marked@0.2 --save
]$ npm install hexo-renderer-stylus@0.2 --save
]$ npm install hexo-generator-feed@1 --save
]$ npm install hexo-generator-sitemap@1 --save

总结：前前后后话了两天初步搭建起来，查看了很多的大神blog，最后也成功了，比较开心

详细参见距离博文

Tags:
上一篇
hexo安装使用

文章推荐