2017年最新hexo——基本设置和了解

PrototypeZ 发布于2019-08-01 16:32 / 1771人阅读

摘要：在根目录配置文件中有一个设置希望设置为就是这个原因是设置后当你新建一个页面后自动生成一个同名文件夹方便管理。

前言

前面的文章已经能让大家搭建起自己的博客，并通过网络访问了，通过基础的发布文章和编辑既可以实现博客的运作了，其他的一些包括分页和标签、分类等都不用自己来操作实现，只要通过命令hexo g就可以了，如果大家看过了next主题的官网中介绍的配置，我会帮助大家对其中描述不清的地方进行讲解。

理解文章和页面

当你前面的做好了后，现在还需要建立三个页面：分类页categories、标签页tags、关于页about,以及一个html页面放到根目录source下，才能完善博客基本的内容。
在根目录配置文件中有一个设置希望设置为true

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true  ##就是这个

原因是设置后当你新建一个页面后自动生成一个同名文件夹方便管理。

hexo new page categories 
hexo new page tags
hexo new page about

tags里index.md设置

---
title: 标签
date: 2017-03-01 19:31:10
type: "tags"
---

categories里index.md设置

---
title: categories
date: 2017-03-01 19:42:08
type: "categories"
---

主题目录下的配置文件设置如下

menu:
  home: /
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags
  commonweal: /404.html

一个文章应该包含以下属性在顶部

---
date: 2017-03-07
title: xxxxxxxxx
tags: xxxx  #如果不想加入标签可以为空
categories: xxxxx #如果不想加入分类可以为空
---

添加Fork me on GitHub

去网址https://github.com/blog/273-g... 挑选自己喜欢的样式，并复制代码，添加到themesnextlayout_layout.swig的body标签之内即可
记得把里面的url换成自己的!

把侧边栏头像变成圆形，并且鼠标停留在上面发生旋转效果

修改themesnextsourcecss_commoncomponentssidebarsidebar-author.styl：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: site-author-image-border-color;
  /* start*/
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */
}
/* start */
.site-author-image:hover {
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

添加音乐

去往网易云音乐搜索喜欢的音乐，点击生成外链播放器，复制代码直接放到博文末尾即可，height设为0可隐藏播放器，但仍然可以播放音乐，auto设成0可手动播放，默认是1自动播放，可把代码放到themes/next/layout/_custom/sidebar.swig文件里，播放器会显示在站点预览中

实现文章标题栏显示更多的文章信息 hexo-wordcount实现

这个是官方文档上没有提及的所以我来说下，可以让你的文章标题位置更加富含信息，本插件可以为文章标题位置添加，文章字数，文章预计阅读时间。

安装WORDCOUNT

执行命令

npm install hexo-wordcount --save

主要功能

字数统计:WordCount
阅读时长预计:Min2Read
总字数统计: TotalCount

查看post.swig模板

模板位置：themesnextlayout_macropost.swig

 {% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %}
            
              {% if theme.post_wordcount.wordcount %}
                
                  
                
                  {% if theme.post_wordcount.item_text %}
                    {{ __("post.wordcount") }}
                  {% endif %}
                    
                      {{ wordcount(post.content) }} 字  ##我在这里加了一个单位上去
                    
              {% endif %}

              {% if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %}
                |
              {% endif %}

              {% if theme.post_wordcount.min2read %}
                
                  
                
                  {% if theme.post_wordcount.item_text %}
                    {{ __("post.min2read") }}
                  {% endif %}
                    
                      {{ min2read(post.content) }} 分钟   ##我在这里加了一个单位上去
                    
              {% endif %}
            
          {% endif %}

因为已经写好了代码，所以大家不用更改什么，只需要按自己需求来修改一些地方，我还对图标进行了修改在FontAwesome官网上找到一些图标替换了标签里对应的class值来实现目的。因为hexo默认引入了这个字体图标库，涉及到图标的地方都可以自行来更改。

其他主题配置

另外评论系统推荐用多说，数据统计用不蒜子统计，搜索系统用local search,内容分享用多说分享，配置起来最简单好用。
next主题的官网文档上写了相关配置的设置方法都是在配置文件里进行值的设定，操作起来很简单，我就不重复讲了，如有其他问题欢迎提问，后面我会讲如何来自定义CSS样式和更改里面的一些设置。

最近访客

GPU云服务器云服务器 2017年春节放假 2017年春节放假安排服务器2017年青云主机基本设置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50587.html

2017年最新hexo——基本设置和了解

摘要：在根目录配置文件中有一个设置希望设置为就是这个原因是设置后当你新建一个页面后自动生成一个同名文件夹方便管理。 showImg(https://segmentfault.com/img/remote/1460000008738195?w=1436&h=527); 前言前面的文章已经能让大家搭建起自己的博客，并通过网络访问了，通过基础的发布文章和编辑既可以实现博客的运作了，其他的一些包括...

ernest.wang 2019-08-29 12:15 评论0 收藏0
2017年最新基于hexo搭建个人免费博客——从零开始

摘要：前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言搭建...

Paul_King 2019-08-29 12:14 评论0 收藏0
2017年最新基于hexo搭建个人免费博客——从零开始

摘要：前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言搭建...

zacklee 2019-08-20 15:12 评论0 收藏0
2017年最新基于hexo搭建个人免费博客——从零开始

摘要：前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言搭建...

hlcfan 2019-08-01 16:31 评论0 收藏0
2017年最新基于hexo搭建个人免费博客——自定义页面样式一

摘要：添加你修改的代码找到你主题文件夹里的对应位置以我的路径为例子里面有个文件夹和一个文件，主要用于打包代码输出成样式的文件分析下其源代码。注意本人不提倡去修改除了下的其他个文件里的源代码，可能后面出问题不好还原。 showImg(https://segmentfault.com/img/remote/1460000008744124?w=1920&h=1280); 前言之前答应一个评论朋...

curried 2019-08-29 12:16 评论0 收藏0