基于windows10+hexo+github搭建个人博客(1)

2019-08-04 阅读数:0次

科普

https://hexo.io/zh-cn/docs/helpers.html#list-categories

安装步骤[2022年9月4日更新]

安装git
安装node.js

官网地址 https://nodejs.org/en/ (安装自带node和npm)
以前版本在 https://nodejs.org/en/download/releases/ 下载
注意：node版本不能太高，2022年可以使用的版本：
1
2
3
4
node: 13.14.0
hexo: 3.9.0
hexo-cli: 4.3.0
npm: 6.14.4

安装hexo方式

2019年

安装cnpm(加速)
npm install -g cnpm --registry=https://registry.npm.taobap.org
安装hexo
cnpm install -g hexo-cli

2022年

1 2	npm config set registry http://registry.npm.taobao.org npm install -g hexo-cli

通过node -v, npm -v, cnpm -v, hexo -v查看是否安装成功
新建工作目录后初始化
1
hexo init
(若出现问题)：ERROR Try running: ‘npm install hexo --save’
(原因) .gitignore文件里面忽略了node_modules文件夹，所以这个文件夹没有更新上去。所以用npm重新安装即可。
(方法)
1
npm install

使用步骤(在工作目录下)

hexo n "XXX"或者 hexo new “XXX” 编辑新文章
hexo clean
hexo g 或者 hexo generate
hexo s 或者 hexo server启动本地服务器
hexo server -p 5000
可以通过 http://localhost:4000/ 访问, /public文件夹相当于网站的根目录
hexo d 或者 hexo deploy 之前需要完成ssh和git的配置
修改post名称需要修改title, md名, 文件夹名, 再clean和g
修改categories需要修改post的categories即可, 再clean和g

部署步骤[2022年9月4日更新]

新建仓库 XXX(github用户名).github.io

安装部署插件

1	cnpm install --save hexo-deployer-git 2022年不需要

配置根目录下的_config.yml文件
1
2
3
4
deploy:
type: git
repo: https://github.com/XXX/XXX.github.io.git
branch: master
如果配置了ssh，可以配置为如下代码，这样可以每次不用输入账号密码
1
repo: git@github.com:XXX/XXX.github.io.git
配置ssh参考：http://blog.haoji.me/build-blog-website-by-hexo-github.html?from=xa
部署 hexo d 可以通过 https://XXX.github.io 查看

更换主题

浏览主题 https://hexo.io/themes/
yilia主题 https://github.com/litten/hexo-theme-yilia

下载主题(根目录下)

1	git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

或者

1	git clone https://github.com/iissnan/hexo-theme-next themes/next

修改主题
在根目录下/_config.yml修改为 theme: yilia
hexo clean hexo g hexo s hexo d
(注意)yilia主题缺少模块，还要按照"所有文章"步骤来完善

添加分类页面

生成页面
1
hexo new page categories

编辑/source/categories/index.md文件

title: categories
date: 2019-08-02 20:25:28
type: "categories"
layout: "categories"(选择调用哪个categories.ejs文件)
comments: true

配置/theme/XXX/_config.yml

1
2
3

menus:
  home: /
  categories: /categories

在文章md添加分类
1
2
title: XXX
categories: 教程

可视化需要編写/themes/yilia/layout/categories.ejs和 main.0cf68a.css
5.1第一种风格

新建categories.ejs，具体代码如下

<section class="archives-wrap">
<div class="archive-year-wrap">
 <a href="#" class="archive-year"><%= page.title %></a>
</div>
<div class="archives">
 <article class="archive-article archive-type-category">
   <div class="archive-article-inner">
     <header class="archive-article-header">
     </header>
   </div>
 </article>
</div>
</section>
<section class="archives-wrap">
<div class="archive-year-wrap">
 <a href="#" class="archive-year">共计<%= site.categories.length %>个</a>
</div>
<div class="archives">
   <% site.categories.each(function (tag, i) { %>
     <article class="archive-article archive-type-category">
         <div class="archive-article-inner">
            <header class="archive-article-header">
              <div class="category-tagcloud">
                <div class="article-category tagcloud">
                  <a href="<%= config.root %><%= tag.path %>/" class="article-tag-list-link color<%= tag.name.length % 5 + 1 %>"><%- tag.name %>[<%= tag.posts.length %>]</a>
                </div>
              </div>
            </header>
          </div>
      </article>
   <% }) %>       
 </div>
</section>

在main.0cf68a.css文件最后添加如下代码

1	.category-tagcloud .tagcloud a{font-size:15px; height:25px; line-height:24px;}

5.2第二种风格

新建categories.ejs，具体代码如下

<article class="article article-type-post show">
<header class="article-header" style="border-bottom: 1px solid #ccc">
<h1 class="article-title" itemprop="name">
 <%= page.title %>
</h1>
</header>
<% if (site.categories.length){ %>
 <div class="category-all-page">
     <h2>共计&nbsp;<%= site.categories.length %>&nbsp;个分类</h2>
     <ul class="category-list">
     <% site.categories.sort('name').each(function(item){ %>
       <% if(item.posts.length){ %>
         <li class="category-list-item">
           <a href="<%- config.root %><%- item.path %>" title="<%= item.name %>"><%= item.name %>
           </a>
           <span class="category-list-count">
             <%= item.posts.length %>
           </span>
         </li>
       <% } %>
     <% }); %>
     </ul>
   </div>
 <% } %>
</article>

在main.0cf68a.css文件最后添加如下代码

.category-all-page {
 margin: 30px 40px 30px 40px;
 position: relative;
 min-height: 70vh;
}
.category-all-page h2{
   margin: 20px 0;
}
.category-all-page .category-list {
   margin: 0;
   padding: 0;
   list-style: none;
}
.category-all-page .category-list-item { margin: 10px 15px; }
.category-all-page .category-list-count {      color: grey;}
.category-all-page .category-list-count:before {
     display: inline;
     content: "("
 }
.category-all-page .category-list-count:after {
     display: inline;
     content: ")"
}

5.3第二种风格多层次分类

新建categories.ejs，具体代码如下

<article class="article article-type-post show">
 <header class="article-header" style="border-bottom: 1px solid #ccc">
 <h1 class="article-title" itemprop="name">
   <%= page.title %>
 </h1>
 </header>
 <% if (site.categories.length){ %>
   <div class="category-all-page">
       <h2>共计&nbsp;<%= site.categories.length %>&nbsp;个分类</h2>
       <%- list_categories(site.categories, {
         show_count: true,
         class: 'category-list-item',
         style: 'list',
         depth: 2,
         separator: ''
       }) %>
   </div>
 <% } %>
</article>

在main.0cf68a.css文件最后添加如下代码

.category-all-page {
 margin: 30px 40px 30px 40px;
 position: relative;
 min-height: 70vh;
}
.category-all-page h2{
   margin: 20px 0;
}
.category-all-page .category-list {
   margin: 0;
   padding: 0;
   list-style: none;
 }
.category-all-page .category-list-item { margin: 10px 15px; }
.category-all-page .category-list-count {      color: grey;}
.category-all-page .category-list-count:before {
     display: inline;
     content: "("
   }
.category-all-page .category-list-count:after {
     display: inline;
     content: ")"
}  
.category-all-page .category-list-child { padding-left: 10px; }
.category-all-page .category-list-item-list-item{
   margin: 10px 15px;
 } 
.category-all-page .category-list-item-list-count{
 color: grey;
}
.category-all-page .category-list-item-list-count:before {
 display: inline;
     content: " ("
}
.category-all-page .category-list-item-list-count:after {
     display: inline;
     content: ") "
}

参考
https://blog.csdn.net/Wonz5130/article/details/84666519
next主题直接可以，yilia不行，yilia具体看：
(style2、3的参考, styl文件要转为css才能用)https://www.voidking.com/2018/06/11/deve-hexo-categories/
(style1的参考)
https://github.com/litten/hexo-theme-yilia/pull/667/commits/588f914ca64a0773041027986c120a30f679f21b

添加标签页面

生成标签页面
1
hexo new page tags

编辑/source/tags/index.md文件

title: tags
date: 2019-08-02 20:25:28
type: "tags"
layout: "tags"(才能调用tags.ejs文件)

配置/theme/XXX/_config.yml

menus:
  home: /
  categories: /categories
  tags: /tags

在文章md添加标签（yilia自带，前面步骤可以不用）
1
2
3
4
5
title: XXX
categories: 教程
tags:
- hexo
- 博客

可视化需要編写/themes/yilia/layout/tags.ejs和 main.0cf68a.css
tags风格
新建tags.ejs，具体代码如下

<div class="tag-container">
<section class="archives-wrap">
 <div class="archive-year-wrap">
     <a href="#" class="archive-year">
         <%= page.title %>
     </a>
 </div>
 <div class="archives">
     <article class="archive-article archive-type-category">
         <div class="archive-article-inner">
             <header class="archive-article-header">
             </header>
         </div>
     </article>
 </div>
</section>
<section class="archives-wrap">
 <div class="archive-year-wrap">
     <a href="#" class="archive-year">共计<%= site.tags.length %>个</a>
 </div>
 <div class="archives">
     <article class="archive-article archive-type-category">
         <div class="archive-article-inner">
             <header class="archive-article-header">
                 <div class="category-tagcloud">
                 <div class="article-category tagcloud">
                     <ul class="article-tag-list">
                         <% site.tags.each(function(tag, i) { %> 
                           <li class="article-tag-list-item">
                             <a href="<%= config.root %><%= tag.path %>/" class="article-tag-list-link color<%= tag.name.length % 5 + 1 %>"><%- tag.name %>[<%= tag.posts.length %>]</a>
                           </li>
                         <% }) %>
                     </ul>        
                 </div>
                 </div>
             </header>
         </div>
     </article>
   </div>
</section>
</div>

在main.0cf68a.css文件最后添加如下代码

.tag-container .archives-wrap{
 border-bottom: 0px solid #eee;
 background: #eaeaea
}

归档页面

生成归档页面
1
hexo new page "archives"
编辑/source/archvies/index.md文件
1
type: "archives"

配置/theme/XXX/_config.yml

menus:
  home: /
  categories: /categories
  tags: /tags 
  archives:/ archives

参考

https://blog.csdn.net/qq_37210523/article/details/80909983
https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
https://www.jianshu.com/p/2afac1bc0af8
http://blog.haoji.me/build-blog-website-by-hexo-github.html?from=xa