阿谢的BLOG Beta3.9版 发布说明

Posted on

BLOG首页截图

折腾了一个晚上也算是搭建好了属于自己的小窝，我不是一个很会说话的人，即使我有酒和故事，我也不会和别人讲，但我愿意以文字的形式在这记录我的故事，记录我的成长。

安装

  • 注册github账户
  • 安装Git
  • 安装node.js
  • 安装hexo

使用入门

  • 分类和标签
  • 导航栏
  • 摘要(文章折叠)
  • markdown简单语法
  • 部署
  • 主题修改
  • 图片

总结

安装

  • 注册github：我想作为一个同性交友网站，github是每个程序员都需要注册和使用的。

  • 安装Git: 学会使用Git就可以替代Windows下的命令行。

划重点：接下来的两步都是 文档|hexo 上面都的，要学会看文档，不管是哪种类型。

  • 安装node.js

  • 安装hexo

使用入门

多标签:[tag1,tag2,tag3]

导航栏：

1
hexo new page "xxx"  产生如下图所示的文件格式

BLOG首页截图

markdown简单语法：

  • 一级标题:#

  • 摘要(文章折叠):<!–more–>之前的文字就会显示在文章首页，后面的文字就会被折叠。

  • 链接和锚点:

    1
    2
    3
    [安装](#1)  

    <span id = "1">**安装**</span>

  • 粗体:斜体，粗体，斜体和粗体

  • 转义:比如我要打出<!–more–>，可以在”!”前添加”\”

  • 文章间跳转: 

    1
    {% post_link 文章文件名（不要后缀） 文章标题（可选） %}

  • 链接样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
//修改文件 themes\next\source\css\_common\components\post\post.styl ，
//在末尾添加如下css样式，颜色可以自己定义。

.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}
  • 主页文章添加阴影效果:
1
2
3
4
5
6
7
8
9
// 打开\themes\next\source\css\_custom\custom.styl,向里面加入:

.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);
}
  • 数学公式：
    在主题文件的_config.yml找到mathjax,并将其设置为true
    LaTe常见符号
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    mathjax:
      enable: true
      per_page: true

    //并在需要数学公式的文章前将mathjax开关打开

    mathjax: true

    $$
    f([\frac{1+\{x,y\}}{(\frac{x}{y}+\frac{y}{x})(u+1)}+a]^{3\2})
    $$
    //效果如下所示

$$
f([\frac{1+{x,y}}{(\frac{x}{y}+\frac{y}{x})(u+1)}+a]^{3\2})
$$

部署：

1
2
3
hexo clean
hexo generate
hexo deploy

图片：

  • 在根目录下_config.yml中找到post_asset_folder，并将其值修改为true；

  • 右键Git Bash Here输入：npm install hexo-asset-image –save

  • 输入hexo n “xxxx”,产生xxxx.md文件同时还会生成一个xxxx文件夹

  • 将图片复制进xxxx文件夹,并在xxxx.md对应位置输入![t](xxxx/x.jpg)

  • 注意:xxxx为文件夹的名字,x为图片的名字，jpg也是分大小写的。

总结

其实很早就开始写Blog，之前是在CSDN，写着写着感觉不爽，想要有自己的定制Blog，于是就想到搭建属于自己的Blog。今后会在这上面写下自己的学习过程，自己的心得体会。搭建Blog之前，还没开始尝试，就去问了一个学长，可不可以教教我怎么搭建Blog，学长只和我说了一句话:”学计算机要有自学能力，不要一上来就问能不能教教我”,我当时就感觉很惭愧，觉得自己连怎么向别人提问题都不会。之前看过一本书叫《学会提问》，我想我有必要去再看一遍。

参考:
https://segmentfault.com/a/1190000009544924

更新

站内搜索（2019.3.23 update）

当博客中的文章越来越多时，自然就会有这个需求，因此有此次更新

这里第一步就不顺利，原因是环境变量设置错误，根据错误提示修改环境变量后解决

  • npm install hexo-generator-searchdb --save

  • 在站点配置文件添加

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

  • 修改主题配置文件

    1
    2
    local_search:
      enable: true

搜索截图

Sitemap（2019.3.23 update）

  • 安装针对谷歌和百度的插件
    1
    2
    npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save

重新部署就能在博客根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml

注意修改根目录配置文件中的URL为你博客首页，这样是为了保证生成的sitemap.xml文件中地址正确

下面访问就能查看自己网站的网页树

然后将该文件添加到百度站点，谷歌站点

在将站点加入百度引擎时，需要验证网站所有者，下面是设置HTML方法

  • 在主题的_config.yml

  • themes\next\layout\_partials下添加

谷歌的效率还是高！几分钟就能搜索到！

整篇都是自己网站的结果哈哈哈哈！