Hexo主题Next

第一次接触到hexo,之后知乎的这个问题第一个便开始推荐的就是Hexo。

有哪些好看的 Hexo 主题?

官方网站

开始使用 - NexT 使用文档

主题配置 - NexT 使用文档

第三方服务集成 - NexT 使用文档

Github-NexT

为什么会喜欢

作为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文件夹中新建uploadorimages,值必须为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 搭建评论系统

需要设置的地方:

OAuth应用程序设置

该设置需要找到,则在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。

详细请查看此篇文章:

 wechat
产品北里,讲述产品和人性、涉及设计、技术和运营的公众号。
你们的赞赏是我更新的动力~