工具教程

Hexo 搭建详细教程(配置篇)

cnguu · 9月24日 · 2018年 ·

本人站点配置

# Site
title: 风执行
subtitle: 责难无以成事
description: PHP 程序猿
keywords: Web,PHP,网站,开发,技术,分享,风执行,Cnguu,博客,博文,笔记,日志,备忘录,踩坑
author: Cnguu
language: zh-CN
timezone: Asia/Shanghai

# URL
url: https://gleehub.com/
root: /
permalink: :type/:year:month:day:id/
permalink_defaults:
  type: post

# 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: :year/:month/:title.md
default_layout: post
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: false
  tab_replace:
  
# Home page
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
per_page: 10
pagination_dir: page

# Extensions
theme: next

# Deployment
deploy:
  type: git
  repo: git@git.dev.tencent.com:cnguu/blog.git
  branch: master
  message: 更新于 {{ now('YYYY-MM-DD HH:mm:ss') }}

# Archive
archive_generator:
  per_page: 10
  yearly: true
  monthly: true
  daily: false
  order_by: -date

模板配置

scaffolds/draft.md

---
title: {{ title }}
comments: false
id: 1
date: {{ date }}
updated: {{ date }}
tags:
---

scaffolds/page.md

---
title: {{ title }}
comments: false
date: {{ date }}
updated: {{ date }}
type:
---

scaffolds/post.md

---
title: {{ title }}
comments: false
id: 1
date: {{ date }}
updated: {{ date }}
tags:
---

创建页面

$ hexo new page about

修改 source/about/index.md

title: 关于我
type: about

使用 NexT 主题

下载

$ git clone https://github.com/theme-next/hexo-theme-next themes/next

修改站点配置文件

# Extensions
theme: next

需要提交备份分支的同学注意啦

主题目录下的 .gitignore 文件需要酌情修改

这里经常会忽略,导致备份文件缺少依赖

以下无特别说明,均为修改主题配置文件

修改主题布局

scheme: Mist

修改菜单

menu:
  home: / || magnet
  about: /about/ || github-alt
  tags: /tags/ || tag
  #categories: /categories/ || th
  archives: /archives/ || tint
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

menu_settings:
  icons: true
  badges: false

图标地址:https://fontawesome.com/v4.7.0/icons/

修改显示语言

修改文件 themes/next/language/zh-CN.yml

title:
  archive: 时间线

menu:
  home: 主页
  archives: 时间线

修改侧栏

sidebar:
  display: hide
  scrollpercent: true
  onmobile: true

修改头像

avatar:
  url: https://wx1.sinaimg.cn/large/006yNh9ngy1fwqjcxokifj30qm0qmq3l.jpg
  rounded: true
  rotated: true

集成百度统计

注册 百度统计 获取统计代码

baidu_analytics: 3f3a6b510f051df49b72fdbbd8e19237

添加 RSS

安装 hexo-generator-feed

$ npm install hexo-generator-feed --save

修改代码高亮

highlight_theme: highlight_theme: night eighties

添加社交

social:
  GitHub: https://github.com/cnguu || github
  Email: mailto:www@cnguu.cn || envelope

social_icons:
  icons_only: true
  transition: true

添加 404 页面

新建 404.html 页面,放到主题的 source 目录下,内容如下:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow" />
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="https://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="回到我的主页"></script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

添加网站建立时间

footer:
  since: 2018

添加本地搜索

安装 hexo-generator-searchdb

$ npm install hexo-generator-searchdb --save

修改站点配置文件

# Local search
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主题配置文件

# Local search
local_search:
  enable: true
  unescape: true

SEO

安装 hexo-generator-sitemap 、hexo-generator-baidu-sitemap 、hexo-baidu-url-submit

$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

修改站点配置文件

# 自动生成 sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

# 主动推送
baidu_url_submit:
  count: 1000 ## 提交最新的一个链接
  host: gleehub.com ## 在百度站长平台中注册的域名
  token: xxxxx ## 请注意这是您的秘钥,所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址,新链接会保存在此文本文档里
  xz_appid: xxxxxx ## 你的熊掌号 appid
  xz_token: xxxxxx ## 你的熊掌号 token
  xz_count: 10 ## 从所有的提交的数据当中选取最新的10条,该数量跟你的熊掌号而定

deploy:
- type: baidu_url_submitter # 百度
- type: baidu_xz_url_submitter # 百度熊掌号

在目录 themes/next/layout/_scripts 下,新建文件 baidu_push.swig

{% if theme.baidu_push %}
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
{% endif %}

修改主题配置文件

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
0 条回应