博客优化 | vegeone

vegeone
0%

博客优化

发表于 更新于 分类于 Valine：

写在前面

​ 在完成了博客的雏形之后接下来就是诸多优化，接下来将列举一些我使用了的优化或美化内容。

​ 对于电脑小白而言，非常推荐这篇知乎，除了时间有点久远，内容真的很详细：(从零开始搭建个人博客（超详细） - 知乎

​ 任何修改过后想要在网页中看到效果都要在对应的博客文件夹中执行以下三个指令

1
2
3
hexo clean
hexo g
hexo d

Hexo常用指令

hexo new **

**部分为你设置的对应博客的名称，注意，是你在本地用于标识这篇博客的名称而不是你在网页中看到的博客的标题

比如我创建现在的这篇博客用的指令是

1
hexo new blog-optimize

然后它会在Blog\source_posts下给你生成一个blog-optimize文件夹以及blog-optimize.md，其中文件夹用于存放一些资源比如说你在博客中可能需要用到的图片或者视频等等，md文件则是你主要编写博客的内容

hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

hexo g/hexo generate

两个指令都可以实现相同的功能

生成静态文件。

选项 描述
-d, —deploy 文件生成后立即部署网站
-w, —watch 监视文件变动
-b, —bail 生成过程中如果发生任何未处理的异常则抛出异常
-f, —force 强制重新生成文件 Hexo 引入了差分机制，如果 public 目录存在，那么 hexo g 只会重新生成改动的文件。 使用该参数的效果接近 hexo clean && hexo generate
-c, —concurrency 最大同时生成文件的数量，默认无限制

hexo d/hexo deploy

部署网站，构建在GitHub的服务器中。

参数 描述
-g, —generate 部署之前预先生成静态文件

优化部分

个性化域名

​ 这篇知乎已经讲的非常详细了，你可以先去万网那边买一个域名，.com太贵了，所以我选择的是.tech。个人博客第6篇——解析域名 - 知乎

设置next主题

​ 继续参照这篇知乎即可个人博客第7篇——设置next主题 - 知乎

设置菜单

打开主题配置文件即Blog\themes\next下的_config.yml，查找menu，将前面的#删除就行了：

1
2
3
4
5
6
7
8
9
menu:
  home: / || home                      #首页
  archives: /archives/ || archive      #归档
  categories: /categories/ || th       #分类
  tags: /tags/ || tags                 #标签
  about: /about/ || user               #关于
  #schedule: /schedule/ || calendar    #日历
  #sitemap: /sitemap.xml || sitemap    #站点地图，供搜索引擎爬取
  #commonweal: /404/ || heartbeat      #腾讯公益404

“||”前面的是目标链接，后面的是图标名称，next使用的图标全是图标库 - Font Awesome 中文网这一网站的，有想用的图标直接在fontawesome上面找图标的名称就行。

新添加的菜单需要翻译对应的中文，打开theme/next/languages/zh-CN.yml，在menu下设置：

1
2
3
4
5
6
7
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索

设置建站时间

打开主题配置文件即Blog\themes\next下的_config.yml，查找since：

1
2
3
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2020-02   #建站时间

设置头像

打开主题配置文件即Blog\themes\next下的_config.yml，查找avatar，url后是图片的链接地址：

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.png   #图片的位置，也可以是http://xxx.com/avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true   #头像展示在圈里
  # If true, the avatar will be rotated with the cursor.
  rotated: false  #头像随光标旋转

然后将你要的头像图片复制到Blog\themes\next\source\images里，重命名为avatar.png。

设置动态背景

canvas nest 风格

在Blog\themes\next目录下打开Git Bash，输入：

1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

打开主题配置文件即Blog\themes\next下的_config.yml，找到canvas-nest，将enable：false改为true：（如果找不到canvas-nest，可能是文件修改了，试试将下面的代码复制粘贴到themes/next中）

1
2
3
4
5
6
7
8
9
10
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  onmobile: true # Display on mobile or not
  color: "0,0,255" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

设置背景

打开主题配置文件即Blog/themes/next下的，将 style: Blog/source/_data/styles.styl 取消注释：

1
2
custom_file_path:
  style: source/_data/styles.styl

打开根目录Blog\source创建文件_data/styles.styl，然后在Blog\themes\next\source\images中添加bg.jpg作为你的背景图片，在styles.styl添加以下内容：

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
body {
    background: url(../images/bg.jpg)//更换背景图片
    background-repeat: no-repeat; //不重复
    background-attachment: fixed; //是否要滚动，fixed不滚动
    background-size: cover;      //是否填充，cover填充
    background-position: center; //背景图片位置
}
.content-wrap {
  opacity: 0.9;
  background: rgba(255,255,255,0.4) //调节背景透明度
}
.sidebar {
  opacity: 0.8; 
}

.sidebar-inner {
  background: rgba(0,191,255,0.6) none repeat scroll !important; //调节侧栏背景透明度，不覆盖到字体，头像等
}
.popup {
  opacity: 0.8; //调节弹出框透明度
}
.header-inner {
  background: rgba(0,191,255,0.8); 
}
.site-brand-container{
  background: rgba(0,191,255,0.8); //调节标题栏透明度
}
// 主页文章添加阴影效果
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
.hider_title{
    cursor: pointer;
    color: #000000;
}
.close:before{
    content: "▼";
}
.open:before{
    content: "▲";
}
.footer-inner {color: #ffb6c1;}

设置预览摘要

只要我们在文章中插入 $$$，该标签之上的是摘要，之后的内容不可见，需点击全文阅读按钮：

1
<!-- more -->

设置侧边栏显示效果

打开主题配置文件即Blog/themes/next下的_config.yml，找到Sidebar Settings，设置：

1
2
3
4
5
6
7
8
9
10
sidebar:
  # Sidebar Position. #设置侧边栏位置
  position: left
  #position: right

  #  - post    默认显示模式
  #  - always  一直显示
  #  - hide    初始隐藏
  #  - remove  移除侧边栏
  display: post

文章末尾添加版权说明

查找主题配置文件Blog/themes/next/_config.yml中的creative_commons：

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # 将false改为true即可显示版权信息
  language:

添加访问量统计

打开主题配置文件即Blog/themes/next下的_config.yml，找到busuanzi_count，改为true：

1
2
busuanzi_count:
  enable: true

打开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
27
28
29
30
{% if theme.busuanzi_count.enable %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

    <span id="busuanzi_container_site_pv">总访问量<span id="busuanzi_value_site_pv"></span>次</span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_uv">总访客数<span id="busuanzi_value_site_uv"></span>人</span>
    <span class="post-meta-divider">|</span>
<!-- 不蒜子计数初始值纠正 -->
<script>
$(document).ready(function() {

    var int = setInterval(fixCount, 50);  // 50ms周期检测函数
    var countOffset = 20000;  // 初始化首次数据

    function fixCount() {            
       if (document.getElementById("busuanzi_container_site_pv").style.display != "none")
        {
            $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + countOffset); 
            clearInterval(int);
        }                  
        if ($("#busuanzi_container_site_pv").css("display") != "none")
        {
            $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + countOffset); // 加上初始数据 
            clearInterval(int); // 停止检测
        }  
    }
       	
});
</script> 
{% endif %}

支持mathjax公式

打开主题配置文件，搜索mathjax：

1
2
3
mathjax:
    enable: true   #将false改为true
    mhchem: false  #用来写化学方程式

本地搜索

打开cmd安装插件：

1
npm install hexo-generator-search

查找主题配置文件Blog/themes/next/_config.yml中的local_search ：

1
2
3
local_search:
  enable: true
  trigger: manual   #手动，按回车键或搜索按钮触发搜索

Hexo博客提交百度和Google收录

可以查看以下链接Hexo博客提交百度和Google收录