从零开始搭建博客Hexo-Node-Git搭建博客

短命女 2022-01-18 23:35 30647阅读 0赞

从零开始搭建博客第一部分，Github注册及Github Pages建立

## 什么是 Hexo？ ##

### [Hexo][] 是一个快速、简洁且高效的博客框架。Hexo 使用 [Markdown][]（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 ###

## 一：注册Github ##

### 1：打开[Github首页][Github]，点击Sign up 进行注册。 ###

--------------------

## 二：Github Pages 静态网页建立 ##

### 1：在新页面点击 `NEW` 按钮，创建属于自己的新仓库。 ###

### 2: 点击 `Code` ###

### 3: 点击 `Create new file` ###

### 4: 输入 `index.html`，在 `Edit new file` 书写内容。 ###

### 5：点击 `Commit new file` 进行创建。 ###

### 6：用浏览器打开 `用户名.github.io` ###

Github Pages 静态网页建立完成。

--------------------

## 三：Hexo博客本地环境安装 ##

### 1: 安装 [Node][] ###

### 2: 安装 [Git][] ###

### 4: 初始化 Hexo ###

*  电脑中任选盘符新建一个文件夹作为博客网站的根目录，文件名好不要是中文。
 *  空白处右键点击 `Git Bash Here`

### 安装 Hexo ###

$ npm install -g hexo-cli
    复制代码

等待运行完成后依次输入以下命令

$ hexo init <新建文件夹的名称>
    $ cd <新建文件夹的名称>
    $ npm install
    复制代码

**注意:后续的命令均需要在站点目录下（即文件夹内）使用Git Bash运行。**

此时Hexo框架的本地搭建已经完成了。我们来运行一下看看：

命令行依次输入以下命令:

$ hexo clean #清除浏览器缓存
    $ hexo g
    $ hexo s
    复制代码

浏览器中打开([http://locakhost:4000][http_locakhost_4000])或者(127.0.0.1:4000),说明Hexo博客已经成功在本地运行。

--------------------

## 四：本地博客发布到Github Pages ##

### 1：需要在Github上创建好Github Pages仓库 ###

### 2：安装将 Hexo 部署到 Git 的插件 ###

*  在站点目录中运行命令行输入 `npm install hexo-deployer-git --save`
 *  后续还要安装各种插件，实现博客的各种功能。等待插件安装完成

### 3：将本地目录与Github关联起来 ###

*  命令行输入

$ ssh-keygen -t rsa -C "邮箱地址"
    复制代码

*  1： 这里要输入之前注册Github时的邮箱，例如我之前注册用的是 123@qq.com，那命令行就输入ssh-keygen -t rsa -C "123@qq.com"输入后一直回车。
 *  2：打开 C:\\Users\\ 用户名，文件夹内寻找 .ssh 文件夹
 *  3：文件夹内会有两个文件，一个id\_rsa.pub一个id\_rsa，用文本方式打开id\_rsa.pub，推荐使用Vscode 打开，复制里面的的内容。
 *  4：打开Github 点击右上角的头像 Settings 选择SSH and GPG keys
 *  5：点击 `New SSH key` 将之前复制的内容粘帖到Key的框中。 上面的title 可以随意 点击 `Add SSH key` 完成添加。
 *  6: 此时回到命令行。 试一下是否跟Github连接成功。命令行输入`ssh -T git@github.com`，弹出的内容输入yes，看到出现Hi ! You've successfully authenticated, but GitHub doesnot provide shell access. 说明链接成功。此处这个应该是你Github的用户名。

### 4: 修改Hexo站点的 `_config.yml`文件 ###

*  进入博客文件夹， 找到 `_config.yml` 博客的配置文件。以后修改博客的样式或内容会多次用到它。

# Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    
    # Site
    title:  #网站标题
    subtitle: #网站副标题
    description: #网站描述 主要用于SEO
    keywords: #网站关键词 主要用于SEO
    author:  #网站作者
    language: zh-CN #网站语言
    timezone: #网站时区：Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。
    
    复制代码

# URL 网址
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url:  #修改为https://<用户名>.github.io
    root: / #如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
    permalink: :year/:month/:day/:title/ #文章的永久链接格式
    permalink_defaults: #永久链接中各部分的默认值
    复制代码

*  在文件底部 deploy 添加如下代码：

# Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy: #部署部分的设置
    type: git
    repo: git@github.com:<Github用户名>/<github用户名>.github.io.git
    branch: master
    复制代码

### 5: 保存配置，将生成的本地页面上传至Github ###

*  命令行输入`hexo g`，此时Hexo会根据配置文件渲染出一套静态页面。
 *  完成后输入`hexo d`，此时会将之前渲染出的一系列文件上传至Github。

**注意：也可以直接输入`hexo g -d`直接完成渲染和上传。**

上传完成后，打开**https://<用户名>.github.io**查看上传的网页。如果页面变成了之前本地调试时的样子，说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息，没有的话清除一下浏览器缓存试试。

--------------------

## 五：Hexo博客主题安装及Next主题个性化修改 ##

*基于Next主题的修改和配置*

注意：**博客配置文件**是指博客根目录下的\*\*\_config.yml**文件，主题配置文件是指**/themes/主题名/路径下的\_config.yml\*\*文件，例如我使用的主题为next主题，主题配置文件为`./themes/next/_config.yml`。

### 1：主题选择 ###

*  到 [Nexo官网主题页][Nexo]选择喜欢的主题。每个主题配置方法略有不同，建议使用流行主题，推荐Next主题，因为我的博客就是用Next主题搭建的。

### 2：主题修改 ###

#### 主题安装 ####

*  [Next主题文档页面][Next]
 *  [Nest主题Github页面][Nest_Github]
 *  博客根目录打开命令行输入

git clone https://github.com/theme-next/hexo-theme-next themes/next
    复制代码

*  1：安装完成后，打开 博客配置文件 修改theme 主题：

# Extensions 扩展
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next #当前主题名称。值为false时禁用主题
    复制代码

*  2：修改 主题配置文件 是根目录/themes/next目录下的\_config.yml文件。

#### 修改菜单及创建分类页 ####

*  1:定位到 Hexo 站点目录下,在命令行输入如下命令：

$ hexo new page tags
    复制代码

新建出标签页

同样的道理，开启分类页的时候要输入`hexo new page categories`来新建出分类页。

*  2:设置页面类型：编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：

---
    title: 标签
    date: 2014-12-22 12:39:04
    type: "tags"
    ---
    复制代码

*  3:修改 主题配置 文件下的menu项：

menu:
      home: / || home
      #about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
    复制代码

#### 修改主题风格 ####

*  Next自带四种主题风格，可以在主题配置文件搜索Scheme项，将需要的风格前的\#去掉，注意只能开启一个风格。

# Scheme Settings
    # ---------------------------------------------------------------
    
    # Schemes
    # scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini
    复制代码

#### 设置作者头像 ####

*  编辑主题配置文件，搜索修改字段 avatar， 值设置成头像的链接地址。可以设置成在线的图片地址。也可以把图片放在本地。
 *  本地设置：放置在source/images目录下，设置为url: /images/avatar.jpg

# Sidebar Avatar
    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/cat.jpg
      # If true, the avatar would be dispalyed in circle.
      rounded: false
      # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
      opacity: 1
      # If true, the avatar would be rotated with the cursor.
      rotated: true
    复制代码

#### 设置作者昵称与站点描述 ####

# Site 网站
    title: #网站标题
    subtitle: #网站副标题
    description: #网站描述 主要用于SEO
    keywords: #网站关键词 主要用于SEO
    
    
    
    
    复制代码

#### 设置代码高亮主题 ####

*  NexT 使用 [Tomorrow Theme][] 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties：

- 编辑主题配置文件，更改 highlight_theme 字段，将其值设定成你所喜爱的高亮主题，例如：
    # Code Highlight theme
    # Available values: normal | night | night eighties | night blue | night bright
    # https://github.com/chriskempson/tomorrow-theme
    highlight_theme: night eighties
    复制代码

#### 侧边栏社交链接 ####

*  侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。 两者配置均在 主题配置文件 中。

# Social Links.
    # Usage: `Key: permalink || icon`
    # Key is the link label showing to end users.
    # Value before `||` delimeter is the target permalink.
    # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
    social:
      GitHub: https://github.com/yourname || github
      E-Mail: mailto:yourname@qq.com || envelope
      #Weibo: https://weibo.com/yourname || weibo
      #Google: https://plus.google.com/yourname || google
      #Twitter: https://twitter.com/yourname || twitter
      #FB Page: https://www.facebook.com/yourname || facebook
      #VK Group: https://vk.com/yourname || vk
      #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
      #YouTube: https://youtube.com/yourname || youtube
      #Instagram: https://instagram.com/yourname || instagram
      #Skype: skype:yourname?call|chat || skype
    复制代码

*  设定链接的图标，对应的字段是 social\_icons。其键值格式是 匹配键: [Font Awesome][] 图标名称， 匹配键 与上一步所配置的链接的 显示文本 相同（大小写严格匹配），图标名称 是 Font Awesome 图标的名字（不必带 fa- 前缀）。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。

social_icons:
      enable: true
      icons_only: false
      transition: false
    
    复制代码

#### 开启打赏功能 ####

*  越来越多的平台（微信公众平台，新浪微博，简书，百度打赏等）支持打赏功能，付费阅读时代越来越近，特此增加了打赏功能，支持微信打赏和支付宝打赏。 只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。

# Reward
    # If true, reward would be displayed in every article by default.
    # And you can show or hide one article specially through add page variable `reward: true/false`.
    reward:
      enable: true
      comment: 如果觉得文本对您有帮助，欢迎打赏
      wechatpay: /images/wechat.png
      alipay: /images/zhifubao.jpg
      bitcoin: /images/qq.png
    复制代码

**注意：将保存的图片放到 /source/images/图片名称**

##### 修改打赏字体不闪动 #####

*  鼠标一指就疯狂抖动。
 *  修改文件next/source/css/\_common/components/post/post-reward.styl，然后注释其中的函数\#QR > div:hover p函数即可。css文件注释用/ 和 / 包裹代码即可。

#QR > div:hover p { 
      animation: roll 0.1s infinite linear;
      -webkit-animation: roll 0.1s infinite linear;
      -moz-animation: roll 0.1s infinite linear;
    }
    复制代码

*  这个post-reward.styl文件是跟按钮及图片相关的，如果需要修改关于打赏的其他属性，例如按钮大小，样式，图片大小等，都可以修改post-reward.styl文件实现。

#### 开启友情链接 or 侧边栏推荐阅读 ####

*  主题配置文件 中搜索links\_title字段，修改links\_icon、links\_title、links\_layout、links四个字段的内容实现自定义风格。
 *  link\_icon是title前面的图标，用法跟之前的社交链接的图标用法是一样的， 用Font Awesome图标。 links\_title为标题，如果是作为友情链接使用，可以设置为 links\_title: 友情链接 在links字段设置友情链接名字及链接
 *  这个模块的自由度比较高，可以用来放置友情链接，也可以放置推荐阅读。

# Blog rolls
    links_icon: link
    links_title: Links
    links_layout: block
    #links_layout: inline
    #links:
      #Title: http://example.com
    复制代码

#### hexo生成博文插入图片显示不出来 ####

1.  把主页配置文件\_config.yml 里的`post_asset_folder`:这个选项设置为true
2.  在hexo的目录下执行`npm install https://github.com/CodeFalling/hexo-asset-image --save`（需要等待一段时间）。
3.  完成安装后用hexo新建文章 `hexo new "文章标题"` 的时候会发现\_posts目录下面会多出一个和文章名字一样的文件夹。
4.  只要使用`![logo](本地图片测试/logo.jpg)`就可以插入图片。其中\[\]里面不写文字则没有图片标题。

#### 文章左侧的目录如何弄出来？ ####

1.  1、首先在你的markdown文件里面要有标题，所谓标题就是例如这种一级标题(\#)，二级标题(\#\#)，三级标题(\#\#\#)的。
2.  2、在主题的\_config文件里面，将toc的enable设置为true就ok了，默认的目录是有序号的，如果你不想要序号，你需要把number置为false 。

#### 设置 RSS ####

1.  NexT 中 RSS 有三个设置选项，满足特定的使用场景。 更改 主题配置 文件，设定 rss 字段的值：

*  false：禁用 RSS，不在页面上显示 RSS 连接。
 *  留空：使用 Hexo 生成的 Feed 链接。 你可以需要先安装 [hexo-generator-feed][] 插件。
 *  安装方法：根目录下命令行输入`npm install hexo-generator-feed --save`
 *  具体的链接地址：适用于已经烧制过Feed的情形。 建议直接使用插件，比较省事。

#### 设置网站图标 ####

1.  在[EasyIcon][]中分别找一张（16 16与32 32）的ico图标,或者去别的网站下载或者制作，并将图标名称改为favicon16.ico与favicon32.ico。
2.  把图标放在/themes/next/source/images或者放在根目录的/source/images文件夹里。
3.  在 主题配置文件 内搜索favicon字段，把 small、medium字段的地址修改为/images/favicon16.ico 与 /images/favicon32.ico。

#### 实现全站及文章字数统计及阅读时长 ####

1.  根目录命令运行：

npm install hexo-symbols-count-time --save
    复制代码

1.  博客配置文件底部添加如下内容，保存。

# 1，实现全站及文章数字统计及阅读时长
    # 运行 npm install hexo-symbols-count-time --save
    symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true
    复制代码

#### 添加顶部加载条 ####

1.  根目录打开命令行，输入如下命令：

git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace
    复制代码

1.  然后主题配置文件搜索pace字段，修改pace: false为pace: true即可开启加载条功能，修改下方的pace-theme字段还可以修改加载条的样式。

# Progress bar in the top during page loading.
    # Dependencies: https://github.com/theme-next/theme-next-pace
    pace: true
    # Themes list:
    #pace-theme-big-counter
    #pace-theme-bounce
    #pace-theme-barber-shop
    #pace-theme-center-atom
    #pace-theme-center-circle
    #pace-theme-center-radar
    #pace-theme-center-simple
    #pace-theme-corner-indicator
    #pace-theme-fill-left
    #pace-theme-flash
    #pace-theme-loading-bar
    #pace-theme-mac-osx
    #pace-theme-minimal
    # For example
    pace_theme: pace-theme-center-simple
    # pace_theme: pace-theme-minimal
    复制代码

#### 自定义鼠标样式 ####

1.  打开themes/next/source/css/\_custom/custom.styl,在里面写下如下代码:

// 鼠标样式
      * {
          cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
      }
      :active {
          cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
      }
    复制代码

1.  在[EasyIcon][]中找一张16 \* 16的ico图，放在/source/images/中，修改上述代码中的链接为/images/xxx.ico，如果不放在本地的话，可以把图片放在图床，直接替换链接即可。
2.  第一行的链接是默认状态下的鼠标样式，第二行的是鼠标按下时的样式。

// 鼠标样式
      * {
          cursor: url("/images/cat.ico"),auto!important
      }
      :active {
          cursor: url(""/images/cat2.ico""),auto!important
      }
    复制代码

#### 实现点击出现桃心 以及 爆炸效果 ####

1.  在/themes/next/source/js/src下新建文件love.js并填入如下代码：

或建一个叫fireworks.js的文件并写入如下代码：

"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){
        var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{
        x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){
        var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){
        var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){
        for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){
        for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({
        targets:n,x:function(e){
        return e.endPos.x},y:function(e){
        return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({
        targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{
        value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){
        var a;return function(){
        var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){
        var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({
        duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){
        "sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){
        var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{
        x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){
        var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){
        var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){
        for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){
        for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({
        targets:n,x:function(e){
        return e.endPos.x},y:function(e){
        return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({
        targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{
        value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){
        var a;return function(){
        var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){
        var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({
        duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){
        "sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
    复制代码

1.  打开themes/next/layout/\_layout.swig,在上面写下如下代码：

{% if theme.fireworks && not theme.love %}
     <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
     <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
     <script type="text/javascript" src="/js/src/fireworks.js"></script>
    {% endif %}
    
    {% if theme.love && not theme.fireworks %}
      <script type="text/javascript" src="/js/src/love.js"></script>
    {% endif %}
    复制代码

1.  在 主题配置文件 最下方加入如下代码：

# Fireworks and love
    fireworks: true
    love: false
    复制代码

**注意：fireworks是爆炸效果，love是心形效果。两个不能同时开。**

#### 修改网页底部的小图标 ####

1.  在 主题配置文件 搜索footer字段，修改下方的icon字段下的name字段。name字段后的名字是 Font Awesome 图标的名字（不必带 fa- 前缀）。

footer:
      # Specify the date when the site was setup.
      # If not defined, current year will be used.
      #since: 2015
    
      # Icon between year and copyright info.
      icon:
        # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
        # `heart` is recommended with animation in red (#ff0000).
        name: user
        # If you want to animate the icon, set it to true.
        animated: true #animated自动为闪动开关，设置为true后图标会闪动。
        # Change the color of icon, using Hex Code.
        color: "#808080"
    复制代码

#### 去掉页面底部的强力驱动信息及设置备案信息 ####

*  主题配置文件搜索copyright字段，修改powered下的enable字段的true为false即可去掉强力驱动部分的内容

# If not defined, will be used `author` from Hexo main config.
      copyright:
      # -------------------------------------------------------------
      powered:
        # Hexo link (Powered by Hexo).
        enable: true
        # Version info of Hexo after Hexo link (vX.X.X).
        version: true
    
      theme:
        # Theme & scheme info link (Theme - NexT.scheme).
        enable: true
        # Version info of NexT after scheme info (vX.X.X).
        version: true
      # -------------------------------------------------------------
      # Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
      # http://www.miitbeian.gov.cn
      beian: #如果博客有备案的话，下方beian字段设置为true，icp后填写备案号。
        enable: false
        icp:
    复制代码

#### 添加动态背景 ####

**注意：尽量不要添加，耗费资源较大，加载速度非常慢**

*  1.根目录打开命令行，输入：

$ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest
    复制代码

*  2.主题配置文件搜索canvas-nest字段，enable项设置为true。

# Canvas-nest
    # Dependencies: https://github.com/theme-next/theme-next-canvas-nest
    canvas_nest:
      enable: false
      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
    
    复制代码

*  3.其他配置项说明：
 *  color ：线条颜色, 默认: '0,0,0'；三个数字分别为(R,G,B)
 *  opacity: 线条透明度（0~1）, 默认: 0.5
 *  count: 线条的总数量, 默认: 150
 *  zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1
 *  onmobile：是否在手机端显示。

##### 增加波浪背景动画 #####

1.  根目录打开命令行，输入:

git clone https://github.com/theme-next/theme-next-three themes/next/source/lib/three
    复制代码

1.  主题配置文件搜索three\_waves字段，设置为true

# Internal version: 1.0.0
      # See: https://github.com/theme-next/theme-next-three
      # Example:
      # three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three.min.js
      # three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three-waves.min.js
      # canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_lines.min.js
      # canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_sphere.min.js
      three:
      three_waves:
      canvas_lines:
      canvas_sphere:
    复制代码

three\_waves、canvas\_lines、canvas\_sphere三个的效果各不相同，可以自己尝试一下选一个喜欢的。

#### 添加静态背景 ####

*  打开`博客根目录/themes/next/source/css/_custom/custom.styl`文件，编辑如下：

// Custom styles.
    body { 
        background-image: url(/images/background.png); //动图也可以添加
        background-attachment: fixed; // 不随屏幕滚动而滚动
        background-repeat: repeat; // 如果背景图不够屏幕大小则重复铺，改为no-repeat则表示不重复铺
        background-size: contain; // 等比例铺满屏幕
    
    复制代码

#### 博客主页自定义样式修改 ####

> 打开`博客根目录/themes/next/source/css/_custom/custom.styl`文件:
> 
> 用 css 语言修改自己想要的主页样式就可以

#### 在右上角实现fork me on github按钮 ####

1.  最新的Next主题已经内置了增加右上角的Fork me on github按钮功能，只需要在主题配置文件搜索github\_banner字段，去掉前面的\#，把||前面的github链接替换成自己的即可。

# Follow me on GitHub banner in right-top corner.
    # Usage: `permalink || title`
    # Value before `||` delimeter is the target permalink.
    # Value after `||` delimeter is the title and aria-label name.
    github_banner: https://github.com/wudiufo || Follow me on GitHub
    复制代码

||后的参数为按钮的title，为鼠标指在按钮上时显示的文本。

#### 增加回到顶部按钮及显示当前浏览进度 ####

1.  主题配置文件搜索b2t字段，将b2t字段的false修改为true即可，（注意此功能只能用于Pisces和Gemini主题）。

# Back to top in sidebar (only for Pisces | Gemini).
      b2t: true
    
      # Scroll percent label in b2t button.
      # scrollpercent字段设置为true即可实现当前浏览进度的显示。
      scrollpercent: true
    
      # Enable sidebar on narrow view (only for Muse | Mist).
      onmobile: true
    复制代码

#### 修改顶部菜单与下方信息栏的间隙大小 ####

1.  主题配置文件搜索offset字段，将offset的像素数大小设置为需要的值，默认为12。

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
      offset: 12
    复制代码

#### 网站标题栏背景颜色 ####

1.  打开 themes/next/source/css/\_custom/custom.styl ,在里面写下如下代码：

// 网站标题栏背景颜色
    .site-meta {
      background: #FF0033; //修改为自己喜欢的颜色
    }
    复制代码

#### 为博客加上萌萌的动图 ####

1.  首先安装插件，根目录命令行输入：

$ npm install --save hexo-helper-live2d
    复制代码

1.  主题配置文件最下方添加如下代码:

# Live2D
    ## https://github.com/xiazeyu/live2d-widget.js
    ## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
    live2d:
      model:
        scale: 1
        hHeadPos: 0.5
        vHeadPos: 0.618
      display:
        superSample: 2
        width: 150
        height: 300
        position: right
        hOffset: 0
        vOffset: -20
      mobile:
        show: true
        scale: 0.5
      react:
        opacityDefault: 0.7
        opacityOnHover: 0.2
    复制代码

更多设置可以查看[官方文档][Link 1]

#### 添加DaoVoice 实现在线联系 ####

1.  本功能可以实现在线留言，作者会收到邮件，如果绑定了微信，作者还会收到微信通知。
2.  首先到[DaoVoice][]注册一个Daovioce账号。
3.  注册完成后会进到DaoCloud，重新访问连接即可。进到Daovoice面板，点击左侧边栏的应用设置-- 安装到网站。在下方的代码中会看到app\_id: "xxxx"字样。
4.  打开 themes/next/layout/\_partials/head/head.swig 文件中最下方加入如下代码：

{% if theme.daovoice %}
      <script>
      (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
      daovoice('init', {
          app_id: "{ {theme.daovoice_app_id}}"
        });
      daovoice('update');
      </script>
    {% endif %}
    复制代码

1.  在主题配置文件 \_config.yml，添加如下代码：

# DaoVoice 
    daovoice: true
    daovoice_app_id: 这里输入前面获取的app_id
    复制代码

1.  回到Daovoice控制面板，点击聊天设置可以对聊天图标的颜色及位置进行设置。
2.  最后到右上角选择管理员，微信绑定，可以绑定你的微信号。这样收到消息后可以通过小程序进行回复。

#### 主页文章添加阴影效果 ####

1.  打开\\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);
      }
    复制代码

1.  可以自行修改代码来修改阴影效果

#### 增加本地搜索功能 ####

1.  首先安装插件，根目录命令行输入:

$ npm install hexo-generator-searchdb --save
    复制代码

1.  编辑博客配置文件，新增以下内容到任意位置：

search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    复制代码

1.  主题配置文件搜索local\_search字段，设置enable为true

# Local search
    local_search:
      enable: true
    复制代码

#### 添加图片懒加载 ####

*  博客根目录打开命令输入

$ git clone https://github.com/theme-next/theme-next-jquery-lazyload themes/next/source/lib/jquery_lazyload
    复制代码

*  然后在配置文件中搜索 lazyload,将其修改为true

# Added switch option for separated repo in 6.0.0.
    # Dependencies: https://github.com/theme-next/theme-next-jquery-lazyload
    lazyload: true 
    复制代码

#### 添加评论 ####

##### 添加方法 #####

1.  在[来必力][Link 2]的官网上注册账号。
2.  在[此处][Link 3]获取data-uid。
3.  打开NexT主题的配置文件—config中，搜索livere\_uid，将livere\_uid前面的\#号去掉，将id填写到livere\_uid：后面。

# Support for LiveRe comments system.
    # You can get your uid from https://livere.com/insight/myCode (General web site)
    #livere_uid: your uid
    复制代码

#### 代码块复制功能 ####

##### 前言 #####

为了提高博客代码块的用户体验，仅仅代码高亮还不行，最好还能一键复制代码。故此文将讲述Hexo Next主题博客的代码块复制功能配置。

##### 下载 #####

需要下载 [clipboard.js][]

*  [主页][clipboard.js]
 *  [Github][Github 1]

提供下载:（推荐用这个）

*  [clipboard.min.js][]

1.  将下载的文件存到如下目录：（相对目录为工程目录，没有目录则创建）

.\\themes\\next\\source\\lib\\zclip\\clipboard.min.js

##### 导入 #####

1.  新建文件 `custom.js`，目录如下：（相对目录为工程目录）

> \\themes\\next\\source\\js\\src\\custom.js

修改 `custom.js`为如下内容：

//此函数用于创建复制按钮
    function createCopyBtns() {
        var $codeArea = $("figure table");
        //查看页面是否具有代码区域，没有代码块则不创建 复制按钮
        if ($codeArea.length > 0) {
            //复制成功后将要干的事情
            function changeToSuccess(item) {
                 $imgOK = $("#copyBtn").find("#imgSuccess");
                    if ($imgOK.css("display") == "none") {
                        $imgOK.css({
                            opacity: 0,
                            display: "block"
                        });
                        $imgOK.animate({
                            opacity: 1
                        }, 1000);
                        setTimeout(function() {
                            $imgOK.animate({
                                opacity: 0
                            }, 2000);
                        }, 2000);
                        setTimeout(function() {
                            $imgOK.css("display", "none");
                        }, 4000);
                    };
            };
            //创建 全局复制按钮，仅有一组。包含：复制按钮，复制成功响应按钮
            //值得注意的是：1.按钮默认隐藏，2.位置使用绝对位置 position: absolute; (position: fixed 也可以，需要修改代码)
            $(".post-body").before('<div id="copyBtn" style="opacity: 0; position: absolute;top:0px;display: none;line-height: 1; font-size:1.5em"><span id="imgCopy" ><i class="fa fa-paste fa-fw"></i></span><span id="imgSuccess" style="display: none;"><i class="fa fa-check-circle fa-fw" aria-hidden="true"></i></span>');
            //创建 复制 插件，绑定单机时间到 指定元素，支持JQuery
            var clipboard = new Clipboard('#copyBtn', {
                target: function() {
                    //返回需要复制的元素内容
                    return document.querySelector("[copyFlag]");
                },
                isSupported: function() {
                    //支持复制内容
                    return document.querySelector("[copyFlag]");
                }
            });
            //复制成功事件绑定
            clipboard.on('success',
                function(e) {
                    //清除内容被选择状态
                    e.clearSelection();
                    changeToSuccess(e);
                });
            //复制失败绑定事件
            clipboard.on('error',
                function(e) {
                    console.error('Action:', e.action);
                    console.error('Trigger:', e.trigger);
                });
            //鼠标 在复制按钮上滑动和离开后渐变显示/隐藏效果
            $("#copyBtn").hover(
                function() {
                    $(this).stop();
                    $(this).css("opacity", 1);
                },
                function() {
                    $(this).animate({
                        opacity: 0
                    }, 2000);
                }
            );
        }
    }
    //感应鼠标是否在代码区
    $("figure").hover(
        function() {
            //-------鼠标活动在代码块内
            //移除之前含有复制标志代码块的 copyFlag
            $("[copyFlag]").removeAttr("copyFlag");
            //在新的（当前鼠标所在代码区）代码块插入标志：copyFlag
            $(this).find(".code").attr("copyFlag", 1);
            //获取复制按钮
            $copyBtn = $("#copyBtn");
            if ($copyBtn.lenght != 0) {
                //获取到按钮的前提下进行一下操作
                //停止按钮动画效果
                //设置为 显示状态
                //修改 复制按钮 位置到 当前代码块开始部位
                //设置代码块 左侧位置
                $copyBtn.stop();
                $copyBtn.css("opacity", 0.8);
                $copyBtn.css("display", "block");
                $copyBtn.css("top", parseInt($copyBtn.css("top")) + $(this).offset().top - $copyBtn.offset().top + 3);
                $copyBtn.css("left", -$copyBtn.width() - 3);
            }
        },
        function() {
            //-------鼠标离开代码块
            //设置复制按钮可见度 2秒内到 0
            $("#copyBtn").animate({
                opacity: 0
            }, 2000);
        }
    );
    //页面载入完成后，创建复制按钮
    $(document).ready(function() {
      createCopyBtns();
    });
    复制代码

##### 配置 #####

1.  新建文件 `custom.swig` ，目录：.\\themes\\next\\layout\_custom\\custom.swig（相对目录为工程目录）

1.  修改文件 `_layout.swig` ，目录：`\themes\next\layout\_layout.swig`（相对目录为工程目录）

添加如下代码：

<!doctype html>
    
        {% include '_third-party/math/mathjax.swig' %}
        
    
        {% include '_custom/custom.swig' %}
    </body>
    </html>
    复制代码

向文件中 `</body>` 前一行插入文件引用，如第 15 行效果。

{% include '_custom/custom.swig' %}
    复制代码

1.  在主题配置文件`_config.yml`中找到以下代码：
    
    将enable修改为true，show\_result修改为true

codeblock:
      # Manual define the border radius in codeblock
      # Leave it empty for the default 1
      border_radius:
      # Add copy button on codeblock
      copy_button:
        enable: true
        # Show text copy result
        show_result: true
    
    复制代码

## 六：Hexo撰写文章 ##

### 一、创建文章 ###

1.  在站点文件夹中打开git bash，输入如下命令创建文章，其中title为文章的标题：

hexo new "title"
    复制代码

*  此时就会在source/\_post文件夹中创建了一个文件，命名为：title.md，而这个文件就是将要发布到网站上的原始文件，记录文章内容，以下我们将要在这个文件中写下我们的第一篇博客

### 二、编写文章（基于Markdown） ###

1.  推荐大家一款简洁易用的markdown编辑器 [Typora][],点击下载。
2.  [Markdown语法及在线编辑][Markdown]

#### 1.模板设置 ####

*  当我们使用命令 hexo new "title" 去创建我们的文章时，Hexo会根据/scaffolds/post.md文件对新建文件进行初始化，换言之，/scaffolds/post.md文件就是创建新文章的模板，所以我们可以修改它来适应自己的写作习惯，一个简单的示例如下：

---
    title: {
        { title }}
    date: {
        { date }}
    tags: 
    categories: 
    ---
    复制代码

#### 2.头部设置 ####

*  在博客文章的开头会有对文章的说明文字，叫做文章头部，文章的头部除了可以设置文章标题、书写日期等基础信息外，还可以对文章添加标签、分类等，一个简单的示例如下:

---
    title: Title #标题
    date: YYYY-MM-DD HH:MM:SS #文件建立日期
    tags: #标签（不适用于分页）
    - 标签1
    - 标签2
    categories: #分类（不适用于分页）
    - 分类1
    - 分类2
    layout: #布局
    updated: YYYY-MM-DD HH:MM:SS #文件更新日期
    comments：true #开启文章的评论功能
    permalink：覆盖文章网址
    ---
    复制代码

**注意，属性和属性值之间必须有一个空格，否则会解析错误**

#### 3.首页显示 ####

*  1.在Hexo框架博客的首页会显示文章的内容（默认显示文章的全部内容），如果当文章太长的时候就会显得十分冗余，所以我们有必要对其进行精简，只需在文章中使用 ``标志，表示只会显示标志前面的内容
 *  2.推荐使用：
    
    在主题配置文件中找到`auto_excerpt`，将enable变为true，代码如下：
    
        # Automatically Excerpt. Not recommend.
        # Please use  in the post to control excerpt accurately.
        auto_excerpt:
          enable: true
          length: 150 #长度可自由调节
        复制代码

### 三，顶部统计每篇文章阅读次数 ###

在主题配置文件中查找`busuanzi_count`,将其按照如下方式修改：

# Show Views/Visitors of the website/page with busuanzi.
    # Get more information on http://ibruce.info/2015/04/04/busuanzi
    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
    复制代码

## 七，生成sitemap站点地图 ##

**百度+谷歌都无法搜索到我的博客 不能忍**

### 1.先确认博客是否被收录 ###

*  在百度或者谷歌上面输入下面格式来判断，如果能搜索到就说明被收录，否则就没有。
    
        site:写你要搜索的域名 # site:wudiufo.github.io
        复制代码

### 2.创建站点地图文件 ###

> 站点地图是一种文件，您可以通过该文件列出您网站上的网页，从而将您网站内容的组织架构告知Google和其他搜索引擎。搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站。

*  先安装一下，打开你的hexo博客根目录，分别用下面两个命令来安装针对谷歌和百度的插件:

npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save
    复制代码

*  在博客根目录的\_config.yml中添加如下代码:
    
        baidusitemap:
          path: baidusitemap.xml
        sitemap:
          path: sitemap.xml
        复制代码
    
     *  执行以下命令，编译你的博客
    
        $ hexo g
        复制代码
    
     *  在你的博客根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml就表示成功了
     *  执行 `hexo s` 看站点地图是否生成

### 3.让百度,360和谷歌收录我们的博客 ###

#### 验证网站 ####

在百度和360，谷歌上分别搜索：

site:写你要搜索的域名 # site:wudiufo.github.io
    复制代码

*  其中的域名换成你的博客域名，如果此前没有进行过操作，应该是搜不到的，并且搜索出来的结果含有搜索引擎提交入口
 *  分别进入搜索引擎提交入口，添加域名，选择验证网站，有3种验证方式，本文推荐采用HTML标签验证
 *  这里演示[百度站长平台][Link 4]

打开Hexo主题配置文件，添加以下两行:

google_site_verification: #索引擎提供给你的HTML标签的content后的字符串
    baidu_site_verification: #索引擎提供给你的HTML标签content后的字符串
    复制代码

还有其他搜索引擎，自行添加

然后运行：

hexo clean && hexo generate
    hexo deploy
    复制代码

然后点击验证，就可以通过验证了

### 4，百度自动推送 ###

*  将`主题配置文件`中的`baidu_push`设置为`true`，然后将`/next/layout/_scripts`文件夹下面的`baidu-push.swig`文件中的 \`
    
    \` 替换为百度提供的自动推送代码,如下：
    
        <script>
        (function(){
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
        </script>
        
        复制代码

### 5.谷歌收录我们的博客 ###

谷歌操作比较简单，就是向[Google站长工具][Google]提交sitemap 登录Google账号，添加了站点验证通过后，选择站点，之后在**抓取**——**站点地图**——**添加/测试站点地图**

转载于:https://juejin.im/post/5caddd1ff265da035e210dce

[Hexo]: https://link.juejin.im?target=https%3A%2F%2Fhexo.io%2Fzh-cn%2Fdocs%2F%23%25E4%25BB%2580%25E4%25B9%2588%25E6%2598%25AF-Hexo%25EF%25BC%259F
[Markdown]: https://link.juejin.im?target=https%3A%2F%2Fmaxiang.io%2F
[Github]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2F
[Node]: https://link.juejin.im?target=http%3A%2F%2Fnodejs.org%2F
[Git]: https://link.juejin.im?target=http%3A%2F%2Fgit-scm.com%2F
[http_locakhost_4000]: https://link.juejin.im?target=http%3A%2F%2Flocakhost%3A4000
[Nexo]: https://link.juejin.im?target=https%3A%2F%2Fhexo.io%2Fthemes%2F
[Next]: https://link.juejin.im?target=https%3A%2F%2Ftheme-next.iissnan.com%2Fgetting-started.html
[Nest_Github]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Ftheme-next%2Fhexo-theme-next
[Tomorrow Theme]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fchriskempson%2Ftomorrow-theme
[Font Awesome]: https://link.juejin.im?target=https%3A%2F%2Fwww.lixint.me%2Fwww.fontawesome.com.cn
[hexo-generator-feed]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fhexojs%2Fhexo-generator-feed
[EasyIcon]: https://link.juejin.im?target=http%3A%2F%2Fwww.easyicon.net%2F
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FEYHN%2Fhexo-helper-live2d
[DaoVoice]: https://link.juejin.im?target=http%3A%2F%2Fdashboard.daovoice.io%2Fget-started%3Finvite_code%3De25c1e73
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Flivere.com%2F
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Flivere.com%2Finsight%2FmyCode
[clipboard.js]: https://link.juejin.im?target=https%3A%2F%2Fclipboardjs.com%2F
[Github 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fzenorocha%2Fclipboard.js
[clipboard.min.js]: https://link.juejin.im?target=https%3A%2F%2Fraw.githubusercontent.com%2Fzenorocha%2Fclipboard.js%2Fmaster%2Fdist%2Fclipboard.js
[Typora]: https://link.juejin.im?target=https%3A%2F%2Fwww.typora.io%2F
[Link 4]: https://link.juejin.im?target=https%3A%2F%2Flink.jianshu.com%2F%3Ft%3Dhttp%3A%2F%2Fzhanzhang.baidu.com%2Fdashboard%2Findex
[Google]: https://link.juejin.im?target=https%3A%2F%2Flink.jianshu.com%2F%3Ft%3Dhttps%3A%2F%2Fwww.google.com%2Fwebmasters%2Ftools