logo头像

技术引领生活!

基于yilia主题在github上搭建博客

杂谈 2019/04/07

本文于1831天之前发表，文中内容可能已经过时。

经过一系列折腾后,发现还是hexo + github 写博客靠谱,MARKDOWN语法真香…
更多内容请参考staticgen网站

安装部署

安装hexo,首先安装nodejs 这里没啥好说的,如果网速比较慢请更换为淘宝源

1
sudo npm install -g hexo-cli --registry=https://registry.npm.taobao.org

在合适目录执行命令

1
2
3
4
5
6
hexo init blog
cd blog
cnpm install
cnpm install hexo-deployer-git --save 没有这一步的话可能会在hexo d发布这一步报错
cnpm install --save hexo-tag-aplayer
cnpm i hexo-generator-json-content --save 这个是yilia主题要用到的

配置

打开目录下的_config.yml文件在[theme]中选择想要的主题
在deploy中填入:

1
2
3
4
5
deploy:
  type: git
  branch: master
  message: '站点更新:{{now("YYYY-MM-DD HH/mm/ss")}}'
  repo: git@github.com:spygg/spygg.github.io.git

命令:

1
2
3
4
hexo s 为启动服务
hexo clean 为清除部署
hexo g 是产生文件
hexo d 为发布

ps:

添加图片技巧

在source目录下新建一个photos目录,在引用的时候使用如下代码

1
![图片](/photos/在github上搭建博客(基于yilia主题)/pic.webp)  头像和打赏就是类似的方法

修改照片属性

1
.article img{max-width:80%;margin: 0 auto;display: block; max-height: 800px;}

添加多个分类使用

1
2
3
4
5
6
7
[分类1,分类2]
或者
tags:
    - linux
    - ubuntu
    - centos
    - mail

参看链接:
Hexo 基于yilia主题及其它插件优化
Hexo 静态博客

主题配置

安装主题

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

vim yilia/_config.yml

修改代码块样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
直接修改编译好的文件。路径为： theme/yilia/source/main.0cf68a.css 
修改代码背景色，搜索 .article-entry .highlight, 修改background后面的颜色

pre{background:#272822;
改为
pre{background:#1a0139;

修改行号颜色，搜索 .article-entry .highlight .gutter pre .line
将
.article-entry .highlight .gutter pre .line{color:#666
改为
.article-entry .highlight .gutter pre .line{color:#fc0000

修改代码字体颜色 .article-entry .highlight .line
.article-entry .highlight .line{color:#fff;
修改为
.article-entry .highlight .line{color:#00ff0d;

代码块行号显示错乱

vim yilia/source/main.0cf68a.css

1
2
3
4
将 white-space:pre-wrap; 删除.
这个问题是自动换行造成的，使用不自动换行的white-space:pre;
样式代码块部分会自动出现底部滚动条，行号错乱问题就没有了

版权声明

themes/yilia/layout/_partial/article.ejs中插入代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<%
  var sUrl = url.replace(/index\.html$/, '');
  sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
%>
<% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
  <div class="declare">
    <strong>本文作者：</strong>
    <% if(config.author != undefined){ %>
      <%= config.author%>
    <% }else{%>
      <font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
    <%}%>
    <br>
    <strong>本文链接：</strong>
    <%= sUrl%>
    <br>
    <strong>版权声明：</strong>
    本作品采用
    <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
    进行许可。转载请注明出处！
    <% if(theme.licensee_img != undefined){ %>
      <br>
      <a rel="license" href="<%= theme.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%=    theme.licensee_img%>"/></a>
    <% } %>
  </div>
<% } else {%>
  <div class="declare" hidden="hidden"></div>
<% } %>

vim yilia/source/main.0cf68a.css 添加如下代码

1
2
3
4
5
.declare {
  background-color: #eaeaea;
  margin-top: 2em;
  border-left: 3px solid #ff1700;
  padding: .5em 1em; }

同时在yilla/_config.yml中添加

1
2
declare_type: 2
licensee_name: GPL3.0

在根目录的_config.yml中修改url

1
url: https://spygg.github.io

评论系统

  1. 申请账号 具体可以参考valine官网

  2. 删除themes/yilia/layout/_partial/post目录下的changyan.ejs duoshuo.ejs wangyiyun.ejs文件
    vim valine.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id="vcomment" class="comment"></div> 
    <script async src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script async src="//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script>
    <script>
       var notify = '<%= theme.valine.notify %>' == true ? true : false;
       var verify = '<%= theme.valine.verify %>' == true ? true : false;
        window.onload = function() {
            new Valine({
                el: '.comment',
                notify: notify,
                verify: verify,
                app_id: "<%= theme.valine.appid %>",
                app_key: "<%= theme.valine.appkey %>",
                placeholder: "<%= theme.valine.placeholder %>",
                avatar:"<%= theme.valine.avatar %>"
            });
        }
    </script>

  3. vim /Hexo/themes/EvanM/layout/_partial/article.ejs

增加如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
    <section id="comments" style="margin:10px;padding:10px;background:#fff;">
      <%- partial('post/valine', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
        }) %>
    </section>
  <% } %>

<% if(theme.gitalk.enable){ %>
    <%- partial('post/gitalk', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
    }) %>
  <% } %>
<% } %>    ##倒数第一行

添加文章分类

参考链接:
Hexo yilia 添加目录页面

主要步骤为:

  1. 添加 categories 页面

    1
    hexo new page categories

  2. 修改index.md

1
2
3
4
5
6
7
---
title: 文章分类
date: 2018-10-19 11:22:21
type: "categories"
layout: "categories"
comments: false #关闭评论
---

  1. 修改配置文件

    1
    2
    3
    4
    5
    menu:
      主页: /
      分类: /categories
      归档: /archives
    #随笔: /tags/随笔/

  2. 新建yilia/layout/categories.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <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>共计 <%= site.categories.length %> 个分类</h2>
        <%- list_categories(site.categories, {
          show_count: true,
          class: 'category-list-item',
          style: 'list',
          depth: 2,
          separator: ''
        }) %>
      </div>
      <% } %>
    </article>

  3. 修改 yilia\source\main.0cf68a.css，将下面的内容添加进去

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    category-all-page {
        margin: 30px 40px 30px 40px;
        position: relative;
        min-height: 70vh;
      }
      .category-all-page h2 {
        margin: 20px 0;
      }
      .category-all-page .category-all-title {
        text-align: center;
      }
      .category-all-page .category-all {
        margin-top: 20px;
      }
      .category-all-page .category-list {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .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: ") ";
      }
      .category-all-page .category-list-item {
        margin: 10px 10px;
      }
      .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;
      }

  4. 在写文章时添加categories

    1
    2
    3
    4
    5
    ---
    title: Hexo yilia 添加目录页面
    tags: [linux,Hexo]
    categories: [Hexo,创建目录]
    ---

参考聊天记录
聊天记录

我的根目录_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: LiusBlog
subtitle: 技术引领生活
description: 一些技术感悟
keywords: "Qt,Linux,Python,Django,爬虫,QML,HTML,JAVASCRIPT"
author: spygg
email: liushidc@163.com
language: zh-CN
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://spygg.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# 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: true # Open external links in new tab
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: true
  tab_replace: 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: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# 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

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

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yilia

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  branch: master
  message: '站点更新:{{now("YYYY-MM-DD HH/mm/ss")}}'
  repo: git@github.com:spygg/spygg.github.io.git


jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

主题配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
# Header

menu:
  主页: /
  分类: /categories
  归档: /archives
#随笔: /tags/随笔/


# SubNav
subnav:
  github: "https://www.github.com/spygg"
  zhihu: "https://www.zhihu.com/people/spygg/activities"
  rss: "#"
  
  #qq: "#"
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  #mail: "mailto:litten225@qq.com"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: /

# Content

# 文章太长，截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: 'more >>'
# 数学公式
mathjax: true
# 是否在新窗口打开链接
open_in_new: false

declare_type: 2
licensee_name: GPL3.0
# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '您的支持是我前行的动力!'
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.webp
alipay: /img/zhifubaocode.webp
# 微信二维码图片地址
weixin: /img/weixincode.webp

# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 2
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /img/favicon.webp

#你的头像url
avatar: /img/me.webp

#是否开启分享
share_jia: true

#评论：1、多说；2、网易云跟帖；3、畅言；4、Disqus；5、Gitment
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: true

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia的
disqus: false

#4、Valine https://valine.js.org
valine: 
  appid:  #Leancloud应用的appId
  appkey:  #Leancloud应用的appKey
  verify: false #验证码
  notify: false #评论回复提醒
  avatar: identicon #评论列表头像样式：''/mp/identicon/monsterid/wavatar/retro/hide
  placeholder: Just go go #评论框占位符

#5、Gitment
gitment_owner: spygg      #你的 GitHub ID
gitment_repo: ''          #存储评论的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: true

# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '所有文章'
  friends: '友链'
  aboutme: '关于我'

friends:
  Litten的博客: http://litten.me/
  Evan的博客: https://www.edevops.top/

aboutme: <ul>           
                    <li>人生苦短，我用 Python！</li>
                    <li>简单高效我学C</li>
                    <li>优雅强大,必须Qt</li>
                    <li>博主 Github 地址:<a href="https://github.com/spygg" target="_blank">https://github.com/spygg</a></li>
                    <li>我的CSDN:<a href="https://blog.csdn.net/spygg" target="_blank">https://blog.csdn.net/spygg</a></li>
                    <li>联系邮箱：liushidc@163.com</li>
          </ul>
赏
支付宝打赏 微信打赏

您的支持是我前行的动力!

转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © spygg
Copyright © 2019 | Powered by Hexo | Theme by Snippet