第一次接触到hexo,之后知乎的这个问题第一个便开始推荐的就是Hexo。
官方网站
为什么会喜欢
作为star数最多的主题,非常简单的配置,也有很多人用。
由于在写本篇文章的时候距离答辩博客的文章过了有十来天,所以便不是初探,而是总结。
本文以下代码摘录地址:
hexo-theme-next/_config.yml
博客
菜单
在主题配置文件中:
menu:
home: / || home
#about: /about/ || user
#tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
# Enable/Disable menu icons.
menu_icons:
enable: true
除了home和archives,其他需要自己新建。
如果想隐藏menu icon,我目前俄做法为在双数杠之前添加#
号。
参考的官方说明:设置 菜单
404页面
新建 404.html
页面
在404.md中输入遗下内容:
---
title: 404
date: 2018-04-09 06:47:40
---
<!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="http://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>
参考的官方说明:
腾讯公益404页面
侧边栏
头像
参考官方说明:
设置头像
在主题配置文件中:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
#avatar: /images/avatar.gif
设置头像的链接可以有两种:
- 完整的互联网地址
- 站点内的地址
站点内的地址路径在source文件夹中新建upload
orimages
,值必须为avatar。
社交账号
# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
#social:
#GitHub: https://github.com/yourname || github
#E-Mail: mailto:yourname@gmail.com || envelope
#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/yourname || instagram
#Skype: skype:yourname?call|chat || skype
social_icons:
enable: true
icons_only: false
transition: false
在双数杠之后的为FontAwesome图标,若没有则显示为小地球。
页脚
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
#since: 2015
# Icon between year and copyright info.
icon: user
# If not defined, will be used `author` from Hexo main config.
copyright:
# -------------------------------------------------------------
# Hexo link (Powered by Hexo).
powered: true
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: true
# -------------------------------------------------------------
# Any custom text can be defined here.
#custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a>
字数统计
需要先安装wordcount插件。
npm i --save hexo-wordcount
在npmjs.com
中的网址:
hexo-wordcount
之后在主题配置文件中便会出现以下代码:
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: true
separated_meta: true
- wordcount: 单篇字符数
- min2read: 阅读时长
- totalcount: 总计字符数
文章相关
阅读浏览次数
参考官方说明:
为NexT主题添加文章阅读量统计功能 | Doublemine
注册的网址:
leancloud
评论
Gitment
参考官方说明:
Gitment:使用 GitHub Issues 搭建评论系统
需要设置的地方:
该设置需要找到,则在GitHub个人信息中个人设置里的开发模块里找到。
实现评论的重点主要内容
github_user: # MUST HAVE, Your Github ID
github_repo: # MUST HAVE, The repo you use to store Gitment comments
client_id: # MUST HAVE, Github client id for the Gitment
client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
这里后两个为主要的注册之后的密钥。
在主题配置文件中:
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
# You can get your Github ID from https://api.github.com/users/<Github username>
gitment:
enable: true
mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: true # Show comments count in post meta area
lazy: false # Comments lazy loading with a button
cleanly: false # Hide 'Powered by ...' on footer, and more
language: zh-Hans # Force language, or auto switch by theme
github_user: # MUST HAVE, Your Github ID
github_repo: # MUST HAVE, The repo you use to store Gitment comments
client_id: # MUST HAVE, Github client id for the Gitment
client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled
遇到的问题
无法评论以及初始化。
我此时创建的是一个专门的储存评论的repo。
详细请查看此篇文章: