建站辛酸

发表于 更新于 阅读次数：

准备工作

http://blog.haoji.me/build-blog-website-by-hexo-github.html?from=xa

配置hexo

安装

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

项目地址

更换为hexo

1
2
3
4
5
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
-theme: landscape
+theme: next

站点信息

1
2
3
4
5
6
7
8
# Site
title: 0xE4s0n的博客
subtitle:
description:
keywords:
author: 0xE4s0n
language: zh-CN
timezone:

仓库

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:0xE4s0n/0xE4s0n.github.io.git
  branch: master

头像

1
2
3
4
5
favicon:
  small: /images/headicon.png
  medium: /images/headicon.png
  apple_touch_icon: /images/headicon.png
  safari_pinned_tab: /images/headicon.svg

移除next页脚

1
2
3
4
5
6
7
8
9
10
11
powered:
  # Hexo link (Powered by Hexo).
  enable: false
  # Version info of Hexo after Hexo link (vX.X.X).
  version: true

theme:
  # Theme & scheme info link (Theme - NexT.scheme).
  enable: false
  # Version info of NexT after scheme info (vX.X.X).
  version: true

添加其它页面

1
2
3
hexo new page about
hexo new page tags
hexo new page categories
1
2
3
4
5
6
menu:
  home: / || home
  categories: /categories/ || th
  tags: /tags/ || tags
  archives: /archives/ || archive
  about: /about/ || user

更改tags/index.md

1
2
3
4
5
---
title: tags
date: 2019-07-30 10:34:06
type: "tags"
---

更改categories/index.md

1
2
3
4
5
---
title: categories
date: 2019-07-30 10:34:15
type: "categories"
---

侧栏

显示数目

1
2
3
menu_settings:
  icons: true
  badges: true

主题

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

大头像

1
2
3
4
5
6
7
8
9
10
11
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/headicon.png
  # 圆角头像
  rounded: true
  # 不透明度
  opacity: 1
  # 鼠标指示旋转头像
  rotated: false

back2top

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

首页收起文章详情

1
2
3
auto_excerpt:
  enable: true
  length: 150

代码块

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

上传附件

  • 在source下创建download文件夹，把附件放到这个文件夹下
  • 最后在文章中按照markdown的格式引入即可[点击下载](/download/xxx)

添加百度收录

到百度站点管理提交你的站点获得一个token
在_config.yml中配置baidu_site_verification:

第三方插件

以下配置特别注意，如果配置了CDN以CDN的配置为准

fancybox

图片放大功能
在next目录下

1
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox
1
fancybox: true

gitalk

在github申请一个

得到client_id和client_secret

1
2
3
4
5
6
7
8
9
10
11
12
gitalk:
  enable: true
  github_id: 0xE4s0n # Github repo owner
  repo: 0xE4s0n.github.io # Repository name to store issues
  client_id: xxxxx # Github Application Client ID
  client_secret: xxxxxx # Github Application Client Secret
  admin_user: 0xE4s0n # GitHub repo owner and collaborators, only these guys can initialize github issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en, es-ES, fr, ru, zh-CN, zh-TW
  language: zh-CN

不蒜子访客统计

1
2
3
4
5
6
7
8
9
# 访客人数统计
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

更改显示样式

更改blog\themes\next\layout\_partials\analytics\busuanzi-counter.swig下布局

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
{%- if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  {%- if theme.busuanzi_count.total_visitors %}
    <span class="post-meta-item-icon">
      <i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
    </span>
    <span class="site-uv" title="{{ __('footer.total_visitors') }}">
      访客：<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
    </span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_visitors and theme.busuanzi_count.total_views %}
    <span class="post-meta-divider">|</span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_views %}
    <span class="post-meta-item-icon">
      <i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i>
    </span>
    <span class="site-pv" title="{{ __('footer.total_views') }}">
      浏览次数：<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
    </span>
  {%- endif %}
</div>
{%- endif %}

本地搜索

1
2
3
4
5
6
7
8
9
10
11
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

背景动画

1
git clone https://github.com/theme-next/theme-next-three source/lib/three
1
2
3
4
5
6
7
8
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: true
  delay: false # Set true to further delay loading
  three_waves: false
  canvas_lines: false
  canvas_sphere: true

添加看板娘

官方低配版

项目地址 模型预览

1
npm install --save hexo-helper-live2d

在博客根目录下的_config.yml中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-shizuku
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

再开发高配版

1.下载 张书樵大神的项目，解压到本地博客目录的themes/next/source下，修改autoload.js文件

1
const live2d_path = "/live2d-widget/";

2.在/themes/next/layout/_layout.swing中,新增如下内容：

1
<script src="/live2d-widget/autoload.js"></script>

3.在配置文件中,新增如下内容：

1
2
live2d:
  enable: true

4.想修改看板娘大小、位置、格式、文本内容等，可查看并修改waifu-tips.js、waifu-tips.json和waifu.css

1
2
3
4
5
6
7
8
9
10
#waifu {
	position: fixed;
	bottom: -1000px;
	/* left: 0; */
	right: 20px;
	z-index: 1;
	line-height: 0;
	transition: transform .3s ease-in-out;
	transform: translateY(3px);
}

显示网站运行时间

在blog\themes\next\layout\_partials\footer.swig末尾添加

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
<div id="days"></div>
<script>
function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("04/17/2017 15:13:14");//修改为自己的blog建站时间
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
    if (i<10)
    {i="0" + i};
    return i;
}
show_date_time();
</script>

配置主题

  • 布局在blog\themes\next\layout\文件夹下
  • 配色等在blog\themes\next\source\文件夹下
  • 主题的配置在blog\themes\next\source\css\_schemes,对应变量在blog\themes\next\source\css\_variables

配置背景

blog\themes\next\source\css\_common\scaffolding\base

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
  position: relative; // Required by scrollspy
  font-family: $font-family-base;
  font-size: $font-size-small;
  line-height: $line-height-base;
  color: $text-color;
  background:url(/images/background.png);
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position:50% 50%;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  +tablet-mobile() { padding-right: 0 !important; }
  +desktop-large() { font-size: $font-size-medium; }
}

圆角

  • 主板块
    blog\themes\next\source\css\_schemes\Pisces\_layout.styl

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .content-wrap {
      float: right;
      box-sizing: border-box;
      padding: $content-desktop-padding;
      width: $content-wrap;
      background: rgba(255,255,255,0.5);
      min-height: 700px;
      box-shadow: $box-shadow-inner;
      border-radius: 16px;

      +tablet() {
        width: 100%;
        padding: 20px;
        border-radius: initial;
      }
      +mobile() {
        width: 100%;
        padding: 20px;
        min-height: auto;
        border-radius: initial;
      }
    }

  • 侧边
    blog\themes\next\source\css\_schemes\Pisces\_sidebar.styl

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .sidebar-inner {
      //padding: 20px 10px 0;
      box-sizing: border-box;
      width: $sidebar-desktop;
      color: $text-color;
      background: white;
      box-shadow: $box-shadow;
      border-radius: $border-radius;
      if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) { opacity: 0; }

      &.affix {
        position: fixed;
        top: $sidebar-offset;
      }

      &.affix-bottom {
        position: absolute;
      }
    }

blog\themes\next\source\css\_common\components\back-to-top.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.back-to-top {
  visibility: hidden;
  margin: (20px - $sidebar-offset) -10px -20px;
  background: $b2t-sidebar-bg-color;
  font-size: $b2t-font-size;
  opacity: $b2t-opacity;
  cursor: pointer;
  text-align: center;
  border-radius: $border-radius
  &:hover { opacity: $b2t-opacity-hover; }

  +tablet-mobile() {
    hide() if not hexo-config('sidebar.onmobile');
  }

  &.back-to-top-on {
    visibility: visible;
    the-transition();
  }
}

blog\themes\next\source\css\_schemes\Pisces\_layout.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
.sidebar {
  position: static;
  float: left;
  margin-left: -100%;
  width: $sidebar-desktop;
  background: $body-bg-color;
  box-shadow: none
  border-radius: $border-radius;

  +tablet-mobile() {
    hide();
  }
}