Hexo博客landscape-plus新建分类写文章和基础配置介绍

这儿有一个整体主题使用排名: https://www.hexothe.me

在网上找了很多hexo主题，其中有的还是挺好看的。我喜欢简约看上去”干净”的主题，最后选择了landscape-plus的确满足我的风格，主题演示，主题github下载地址:https://github.com/xiangming/landscape-plus，而我的在这个基础上整合网上的大佬们整改了一些样式和一些细节处理，因为我感觉自己有”强迫症“。

首先我推荐自己感觉还不错的hexo主题:

• skapp主题地址: https://github.com/Mrminfive/hexo-theme-skapp 预览效果

• smackdown主题地址: https://github.com/smackgg/hexo-theme-smackdown 预览效果

• light主题地址: https://github.com/hexojs/hexo-theme-light

• even主题地址: https://github.com/ahonn/hexo-theme-even

• 基于next主题修改 地址: https://github.com/Lruihao/hexo-theme-next 预览效果

• TKL主题地址: https://github.com/SuperKieran/TKL 预览效果

  感谢这些制作和修改主题和爱分享的小伙伴们。

主题安装:

这儿下载安装主题 以landscape-plus为例 git clone https://github.com/xiangming/landscape-plus.git themes/landscape-plus ，只要把这个主题名字修改成你喜欢的主题名字就行了。

然后修改根目录下的_config.yml把 theme的值设置为landscape-plus，然后运行hexo clean在执行hexo g重新生成一下就换掉主题了。

配置介绍:

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# en
# Site
title: '向阳' #网站名称
subtitle: '一只站在树上的鸟，从来不害怕树枝突然折断，因为它相信的不是树枝，而是它自己的翅膀！' #副标题
description: '' #描述
keywords:
author: kziwws #底部作者
language: zh-CN #显示中文
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: #如果有网址填写你的域名 没有可以填写服务器IP地址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# 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: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
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: ''
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 8
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# search
search:
  path: search.xml
  field: post
  format: html
  limit: 1000

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
  
# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## Use posts date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 15
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape-plus

# Deployment
## Docs: https://hexo.io/docs/deployment.html
#使用git提交到github仓库里
#xxx换成你的使用的github的用户名
deploy:
  type: git #这儿前面有两个空格 中间有一个空格 后面的类似
  repository: git@github.com:xxx/xxx.github.io.git 
  branch: master
  
#如果是使用rsync部署到服务器 
deploy:
  type: rsync
  host: 服务器名 主机IP
  user: 用户名 ssh的用户名
  root: 远程主机目录
  port: ssh登录端口 如22

关于写文章和新建分类:

• hexo new page categories 这儿本身有 _posts和tags 新建过后会出现一个文件，然后打开这个文件,打开里面的index.md,写上 type: "categories"，类别建立成功。

  ---
  title: categories
  date: 2020-01-06 15:51:07
  type: "categories"
  ---

• 新写文章 hexo new "文件名字如:title"会在 source/_post 文件夹下创建一个文件，命名为：title.md.

• 这儿打开过后

  ---
  title: 比如hexo如果写文件
  date: 2018-03-18 04:31:11
  categories://这个是文章对应的分类，如果一篇文章只能属于一个大的分类，但是这个大的分类又可以细分，比如这儿这儿写的这篇属于技术technology，细分过后属于hexo 博客搭建，这儿写上阶梯型的就像是二叉树一样的结构。这个当然你明白了就行了，后面也可以根据分类去查找文章
   - technology
   - hexo
  tags: //这儿文章可以属于任何一个标签，你喜欢它属于哪一个标签就写上，同一篇文章可以属于不同的标签，这个理解没有问题吧，先懂这点就行,因为建类别的时候就是根据这个标签去查找的。这个是如果有同阶梯的，表示同等级的权重。
   - hexo
  keywords: hexo博客,landscape-plus，新建分类，基础配置介绍
  description: Hexo写文章新建分类和基础配置介绍
  ---

• 写文章这儿推荐使用Typora 这个链接我放了一个Mac版本的，不知道是不是最新，自己鉴定，不过是真心好用的。如果你SSH工具使用的是FinalShell 前往下载这个的话，你可以直接设置文件点击右键->选择文本编辑器->设置外部文本编辑器->然后选择Typora下一次打开方式选择文本编辑器,就方便多了，只要在文章的时候就会打开这个方便的工具。

• 现在开始如何设置分类。现在 /soft/hexo/nginxblog/themes/landscape-plus我的是这目录，你的我不知道，现在要打开的是主题下landscape-plus->_config.yml，直接上配置更加直观。里面会详细介绍。

  menu:
    首页: /
    编程技术: /tags/technology 
    诗: /tags/poetry
    生活随笔: /tags/life
    所有文章: /archives
  rss: /atom.xml
  
  #上面分类解释一下,前面不是介绍了tags和categories这儿举一个例子，就拿编程技术来说有两种都可以，第一种根据tags标签来分类，/tags/technology 凡是文章属于大的标签”技术“都是属于这一类，还有另外一种就是/categories/technology/hexo 也可以塞选出来。但是遇到分类的时候就会出现塞选不全面。所以使用tags感觉好一点。
  
  # Content
  excerpt_link: "阅读全文" #Read More 这个是查看更多是文本
  fancybox: true #相册功能
  mathjax: true  #开启渲染数学公式
  
  # Sidebar
  sidebar: right #左边sidebar位置
  widgets:       #各个挂件的widget
  - category
  - tag
  - tagcloud
  - archive
  - recent_posts
  - links
  
  # Links
  links: #友情链接
    github: ～
  
  # Miscellaneous
  # google_analytics: UA-066185928-1 #这个东西需要翻墙,谷歌统计分析，这儿是一个不能使用的ID，后来我放弃了。所以被我改成百度统计了
  
  baidu_tongji: '81e087347845b30641d06f11be8hb143'#去百度统计里注册,谷歌统计分析，这儿是一个不能使用的ID,只是为了模拟数据
  favicon: /favicon.png
  twitter:
  google_plus:
  fb_admins: 
  fb_app_id:
  
  # Toc
  toc:
    article: true   ## show contents in article.
    aside: true     ## show contents in aside.
  # Scroll to top
  go_top: true
  
  # search # 这儿之前是跳转到百度搜索引擎 于是参考网上的小伙伴分享的技术和自己的琢磨移植了next主题内部的搜素功能，又很多坑，我趟过来了。哈哈后面我会将具体的移值分分享。
  local_search:
    enable: true 
    trigger: auto  #表示搜索结果会不会打字时自动显示
    top_n_per_article: -1 #表示每篇文章最多显示几条结果（-1为不限数字）
  
  # Duoshuo
  # duoshuo_shortname: reqianduan
  #这儿之前是”多说“现在官网都打不开了好吧,然后移植了leancloud, 后面也会分享出来的。
  
  # valine leancloud
  valine_enable: true # valine评论是否开启
  valine:
    appid: vh2N08Qk3UIsu1N8QHu468BH-gzGZoHsz #leancloud中的appid 这儿是模拟的一个ID，无效你需要注册替换成你自己官网注册的。
    appkey: JxrjTSEoPMfc35OMLWhHzcHk #leancloud中的appKey这儿是模拟的一个ID，无效你需要注册替换成你自己官网注册的。
    placeholder: 想说点什么...  #默认留言框内的文字
    notify: false  #新留言是否需要通知 https://github.com/xCss/Valine/wiki
    verify: false  #是否需要验证 验证比较反人类建议false关闭
    avatar: mm  #默认头像
    guest_info: nick,mail # 默认留言框的头部需要访问者输入的信息
    pageSize: 15 #默认单页的留言条数
    
  # Baidu share
  baidushare: true #是否开启百度分享

• 这儿由于上面的移植next主题search功能，和替换掉了”多说”评论 valine leancloud,所以里面的代码肯定是没有修改过的，你先屏蔽掉。然后运行，应该你想要的样子新的类别和新写的文章和一些config.yml里设置的基础配置应该就出来。

这儿再分享一个404页面:

• 当服务器在找不到页面和加载失败的时候使用,直接保存成404x.html文件放在nginx所在的目录下。/usr/local/nginx/html我的是这个目录，放进去过后是/usr/local/nginx/html/404x.html，中间有三个链接，自己填成你的。这个页面也是网上看到扁平化简约风格页面我挺喜欢。也在次感谢提供这个h5的小伙伴。

  <!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"> -->
  <title>Error</title>
  <style type="text/css">
  body, div, h3, h4, li, ol {
  	margin: 0;
  	padding: 0
  }
  body {
  	font: 14px/1.5 'Microsoft YaHei', '微软雅黑', Helvetica, Sans-serif;
  	min-width: 1100px;
  	background: #f0f1f3;
  }
  :focus {
  	outline: 0
  }
  h3, h4, strong {
  	font-weight: 700
  }
  a {
  	color: #428bca;
  	text-decoration: none
  }
  a:hover {
  	text-decoration: underline
  }
  .error-page {
  	background: #f0f1f3;
  	padding: 80px 0 180px
  }
  .error-page-container {
  	position: relative;
  	z-index: 1
  }
  .error-page-main {
  	position: relative;
  	background: #f9f9f9;
  	margin: 0 auto;
  	width: 617px;
  	-ms-box-sizing: border-box;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	padding: 50px 50px 70px
  }
  .error-page-main:before {
  	content: '';
  	display: block;
  	background: url(img/errorPageBorder.png?1427783409637);
  	height: 7px;
  	position: absolute;
  	top: -7px;
  	width: 100%;
  	left: 0
  }
  .error-page-main h3 {
  	font-size: 24px;
  	font-weight: 400;
  	border-bottom: 1px solid #d0d0d0
  }
  .error-page-main h3 strong {
  	font-size: 54px;
  	font-weight: 400;
  	margin-right: 20px
  }
  
  .error-page-main h4 {
  	font-size: 20px;
  	font-weight: 400;
  	color: #333
  }
  .error-page-actions {
  	font-size: 0;
  	z-index: 100
  }
  .error-page-actions div {
  	font-size: 14px;
  	display: inline-block;
  	padding: 30px 0 0 10px;
  	width: 50%;
  	-ms-box-sizing: border-box;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	color: #838383
  }
  
  .error-page-actions ol {
  	list-style: decimal;
  	padding-left: 20px
  }
  .error-page-actions li {
  	line-height: 2.5em
  }
  .error-page-actions:before {
  	content: '';
  	display: block;
  	position: absolute;
  	z-index: -1;
  	bottom: 17px;
  	left: 50px;
  	width: 200px;
  	height: 10px;
  	-moz-box-shadow: 4px 5px 31px 11px #999;
  	-webkit-box-shadow: 4px 5px 31px 11px #999;
  	box-shadow: 4px 5px 31px 11px #999;
  	-moz-transform: rotate(-4deg);
  	-webkit-transform: rotate(-4deg);
  	-ms-transform: rotate(-4deg);
  	-o-transform: rotate(-4deg);
  	transform: rotate(-4deg)
  }
  .error-page-actions:after {
  	content: '';
  	display: block;
  	position: absolute;
  	z-index: -1;
  	bottom: 17px;
  	right: 50px;
  	width: 200px;
  	height: 10px;
  	-moz-box-shadow: 4px 5px 31px 11px #999;
  	-webkit-box-shadow: 4px 5px 31px 11px #999;
  	box-shadow: 4px 5px 31px 11px #999;
  	-moz-transform: rotate(4deg);
  	-webkit-transform: rotate(4deg);
  	-ms-transform: rotate(4deg);
  	-o-transform: rotate(4deg);
  	transform: rotate(4deg)
  }
  </style>
  </head>
  <body>
  	<div class="error-page">
  		<div class="error-page-container">
  			<div class="error-page-main">
  				<h3>
  					<strong>404</strong>很抱歉，您要访问的页面不存在！
  				</h3>
  				<div class="error-page-actions">
  					<div>
  						<h4>可能原因：</h4>
  						<ol>
  							<li>网络信号差不稳定</li>
  							<li>找不到请求的页面</li>
  							<li>输入的网址不正确</li>
  						</ol>
  					</div>
  					<div>
  						<h4>可以尝试：</h4>
  						<ol>
  							<li><a href="http://www.rumoss.cn">返回首页</a></li>
  							<li><a href="#">留言反馈</a></li>
  							<li><a href="#">联系站长</a></li>
  						</ol>
  					</div>
  				</div>
  			</div>
  		</div>
  	</div>
  </body>
  </html>

• nginx中去配置:

  对应的nginx配置目录/usr/local/nginx/conf/nginx.conf,然后打开

  # redirect server error pages to the static page /50x.html
  error_page   500 502 503 504 404 /404x.html;
  location = /404x.html {
      root   html;
  }

我这个主题相对于landscape-plus来说修改了一些细节上的样式，好奇的话后面我会发一篇，具体的修改了哪些样式。