搭建 Hexo 博客--增强篇

主题优化

主题配置介绍

我这里只讲自己在使用的 yelle 主题,你可以参考下,可能还有一些改动我后续会自己在慢慢改,但是大体基本也就这样了。

从中我们也可以看出,对于主题来讲,大部分可以配置的地方其实都是在这里的,所以对于主题的使用者来讲,懂这里很重要。

  • 基本上主题的配置文件都是有内容改,但是下面这几点我觉得特别重要:
  • duoshuo,如果你是打算采用多说评论系统的话,你需要设置这里,但是我个人对多说没好印象
  • youyan,有言也是国内实用比较多的评论系统之一,个人感觉相对比较稳定
  • open_in_new,我个人觉得这个东西就应该是 true,不是用新标签的都是坏人
  • baidu_tongji,我个人使用的是百度统计,具体百度统计的使用可以查看百度统计官网:http://tongji.baidu.com

我的 yelle 主题配置

# >>> Basic Setup | 基础设置 <<<

# Header | 主菜单
## About Page: `hexo new page about`
## Tags Cloud Page: `hexo new page tags`
menu:
  主页: /
  关于我: /about/
  标签云: /tags/
  所有文章: /archives/
  IntelliJ IDEA: /tags/IntelliJ IDEA

# Link to your avatar | 填写头像地址
avatar: /img/avatar.png

# Small icon of Your site | 站点小图标地址
favicon: /favicon.png

# If your site' url is 'http://yoursite.com/blog', set root_url as '/blog/'
# 网站若存放在子目录,请按上面格式填写
# https://hexo.io/docs/configuration.html#URL
root_url: 

# Social info. Bar | 社交信息展示
## Keep "mailto:" in Email | 设置 Email 时保留 "mailto:"
## Encrypt email 加密邮件地址 http://ctrlq.org/encode/
## RSS requires a plugin to take effect | 使用 RSS 需先安装对应插件
## https://github.com/hexojs/hexo-generator-feed

subnav:
  Email: "mailto:judas.n@qq.com"
  #新浪微博: "sina weibo"
  GitHub: "https://github.com/judasn/IntelliJ-IDEA-Tutorial"
  RSS: "/atom.xml"
  #V2EX: "#"
  #知乎: "zhihu"
  #豆瓣: "douban"
  #简书: "jianshu"
  #SegmentFault: ""
  #网易云音乐: "netease"
  #虾米音乐: "xiami"
  #Facebook: "#"
  #Google: "#"
  #Twitter: "#"
  #LinkedIn: "#"
  #QQ: "#"
  #微信: "Wechat"
  #PayPal: "#"
  #StackOverflow: "#"
  #Instagram: "#"
  #Flickr: "#"
  #reddit: ""
  #Medium: ""
  #TiddlyWiki: ""
  #Tumblr: ""
  #_500px: ""

# >>> Conments 评论系统 <<<
# Chose ONE as your comment system and keep others disable.
# 选一个作为网站评论系统,其他保持禁用。

disqus: 
  #on: true
  shortname: 
  # https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-
  # It is unnecessary to enable disqus here if 
  # you have set "disqus_shortname" in your site's "_config.yml" 

duoshuo: 
  #on: true
  domain: 
  # 是否开启多说评论,http://duoshuo.com/create-site/
  # 使用上面网址登陆你的多说,然后创建站点,在 domain 中填入你设定的域名前半部分
  # http://<要填的部分>.duoshuo.com (domain只填上<>里的内容,不要填整个网址)

youyan:
  on: true
  id: 1738968
  # 是否开启友言评论,http://www.uyan.cc/index.php
  # id 中填写你的友言用户数字ID,注册后进入后台管理即可查看
  # 友言服务在 Web 环境下运行,普通本地环境无法查看,请部署后在线上测试。


# >>> Style Customisation 样式自定义 <<<

# Background | 背景
## "5": show images form bg-1.jpg to bg-5.jpg in `/yelee/source/background/`
## "5": 显示`/yelee/source/background/`文件夹中 bg-1.jpg 到 bg-5.jpg 这5张图片
## "0": white-gray background | 淳朴灰白背景
background_image: 0

highlight_style:
  on: true
  inline_code: 3  # Value: 0 - 9 可选,3还不错
  code_block: 2  # Value: 0 - 4 
  # Set inline_code to style highlight text
  # Chose a highlight theme for code block
  # 通过 inline_code 切换内置文本高亮样式
  # 通过 code_block 切换内置代码高亮配色主题

blockquote_style:
  on: true
  blockquote: 3  # Value: 0 - 7 可选
  # 自定义文章「引用部分」的样式

# 左边栏宽度 px
left_col_width: 330

# Copyright info. of post | 文末版权信息
copyright: true

# Table of contents | 文章目录
toc: true

# 目录中标题不换行
# Keep TOC title on the same line | 
toc_nowrap: true

# 自定义"阅读全文"链接按钮的显示文字
# Customize the text on excerpt link
excerpt_link: more

# 是否显示边栏中的搜索框(仅样式,未添加搜索功能)
# Search Box in left column
search_box: false

# 是否开启主页及加载头像时的动画效果
# Animation in Homepage and Loading avatar
animate: true

# Load jQuery UI to style tooltips
# 工具提示框样式美化
jquery_ui: false

# >>> Small features | 小功能设置 <<<

# 是否开启边栏多标签切换
# Birdhouse button in left column
tagcloud: true

# Blogroll, Link exchange | 友情链接
friends:
  YouMeek: http://www.YouMeek.com
  YouMeek导航: http://i.YouMeek.com
  GitHub: https://github.com/
  IntelliJ IDEA: http://www.jetbrains.com/idea/
#friends: false

#是否开启“关于我”。
aboutme: 此地只专注于技术
#aboutme: true

# 是否在新窗口打开链接
# Open ALL link in a new tab
open_in_new: true

# Customize feed link 自定义订阅地址
rss: /atom.xml


# >>> Vendors | 第三方工具 & 服务 <<<

# images viewer | 图片浏览器
## http://www.fancyapps.com/fancybox/
fancybox: true

# Display Math(LaTeX, MathML...) | 数学公式支持
## https://www.mathjax.org/
mathjax: false

# Socail Share | 是否开启分享
share: true

# 百度、谷歌站长验证。填写 HTML 标签 content
# Site Verification for Google and Baidu. HTML label content.
baidu_site: 
google_site: 

# Fill in Google Analytics tracking ID, #e.g. UA-XXXXX-X
google_analytics: 

# 百度统计 http://sitecenter.baidu.com/sc-web/
# 查看代码,填入 //hm.baidu.com/hm.js? 之后的内容
baidu_tongji: b68dade9d355a0b3d875d0ffbbe1f212

# 不蒜子网站计数设置
# http://ibruce.info/2015/04/04/busuanzi/
visit_counter:
  on: true
  site_visit: 本站到访数
  page_visit: 本页阅读量

# GitHub Repo Widget
# https://github.com/hustcc/GitHub-Repo-Widget.js
github_widget: false

常用页面添加

404、关于我、标签页

  • 还是以上一篇文章我们讲解的项目根目录上:E:\git_work_space\hexo,在该目录启动 Git Bash:
  • 新增一个 404 页面:hexo new page 404
  • 新增一个 about 页面:hexo new page about
  • 新增一个 tag 标签云页面:hexo new page tags
  • 新增一个 robot.txt 文件,把该文件放在:E:\git_work_space\hexo\source 目录下,如果你没有该文件可以到我的项目上找:https://github.com/judasn/judasn.github.io
  • robot 文件内容:
User-Agent: *
Allow: /
Disallow: /background
Disallow: /css
Disallow: /fancybox
Disallow: /font-awesome
Disallow: /img
Disallow: /js
Sitemap: http://code.youmeek.com/sitemap.xml
Sitemap: http://code.youmeek.com/baidusitemap.xml

插件推荐

插件的基本使用命令

  • 安装插件:npm install 插件名 --save
  • 卸载插件:npm uninstall 插件名
  • 更新插件和博客框架(需要在 E:\git_work_space\hexo 目录下):npm update
    • 它实质上是通过项目根目录下 package.json 文件更新各大组件

必备插件

  • 支持RSS:npm install hexo-generator-feed --save
  • 生成站点地图:npm install hexo-generator-sitemap --save
  • 生成百度站点地图:npm install hexo-generator-baidu-sitemap --save
  • HTML 压缩:npm install hexo-html-minifier --save
  • JavaScript 压缩:npm install hexo-uglify --save
  • CSS 压缩插件:npm install hexo-clean-css --save
  • SEO优化:npm install hexo-generator-seo-friendly-sitemap --save

结束语

  • 真心希望这是 Hexo 最后一篇,因为我们只是要安心写东西而已,不需要太多折腾。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容