菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
38
0

Hexo next主题博客搭建及美化

原创
05/13 14:22
阅读数 1066

转载及引用

hexo主题配置一     hexo主题配置二    hexo主题配置三     hexo主题配置四     hexo主题配置五    
Hexo博客提交百度和Google收录     hexo个人博客收录谷歌的详细过程(有图)    
Hexo NexT 魔改系列之三 ── 评论篇     更好的基于 github issues 的评论系统——utterances    
Hexo Next 集成 utterances 评论系统    
Hexo 双线部署到 Coding Pages 和 GitHub Pages 并实现全站 HPPTS

安装 next 主题

  1. 在git上克隆主题文件
git clone https://github.com/iissnan/hexo-theme-next themes/next
  1. 在站点目录下的配置文件_config.yml 中找到以下部分,并修改。
theme: next  #选择博客主题,名字为themes中选择的主题文件夹名称
下载好主题后,在Hexo中切换主题只需修改站点配置文件中theme属性来配置,想换就换。
  1. next主题中提供了四种样式,选择自己喜欢的。 在 themes-> next ->_config.yml 文件中找到一下代码,去掉 # 即可选择主题样式。

    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini

    3.1 当 选择 Mist 主题样式时,解决菜单样式居中

    • 在 themes/next/source/css/_schemes/Mist/_menu.styl 文件下,添加 text-align 属性

       .menu {
         text-align:right;
         margin: 0;
  2. hexo常用命令
 hexo n "博客名称"  => hexo new "博客名称"   #这两个都是创建新文章,前者是简写模式
$ hexo p  => hexo publish
$ hexo g  => hexo generate  #生成
$ hexo s  => hexo server  #启动服务预览
$ hexo d  => hexo deploy  #部署

$ hexo server   #Hexo 会监视文件变动并自动更新,无须重启服务器。
$ hexo server -s   #静态模式
$ hexo server -p 5000   #更改端口
$ hexo server -i 192.168.1.1   #自定义IP
$ hexo clean   #清除缓存,网页正常情况下可以忽略此条命令

购买域名

  1. 在 阿里云,腾讯云这些网站购买域名(需要实名认证),或者翻墙买 .me, .io 这些域名(有钱大佬可以尝试,不知道访问这些域名需不需要翻墙)。
  2. 在 站点目录下的source目录下创建文件 CNAME,写上自己的域名(如我自己的)

    frontwhite.xyz

菜单设置

菜单设置

用于设置博客上方导航栏显示,在主题配置文件_config.yml 中修改。

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   # 404页面
只是在menu选项中  去掉#   还不能让标签页面、分类页面生效,需要我们手动创建。

创建标签,分类页面

打开命令行,进入博客所在文件夹。执行以下命令,创建标签和分类。

  hexo new page tags
  hexo new page categories
同时,在/source目录下会生成一个tags文件夹,里面包含一个index.md文件。

+ 修改生成的source/tags/index.md文件,加上type: "tags",才行,title可以随便写
```
---
title: 学习之路
date: 2019-12-21 11:13:45
type: "tags"
---
```

+ 修改生成的source/tags/categories.md文件,加上type: "categories"
```
---
title: 分类
date: 2019-12-18 19:45:11
type: "categories"
---
```

文章标签和分类

在所写的文章里的头部,加上以下代码,即可在标签页看到标签个数和标签,分类也是如此

 ---
tags: [学习,小白]
categories: test
---
这里的tags和categories就是给文章加上标签和分类,两者的区别就是categories是有层级的,像上面那样分类里Next就是Hexo的子类,Hexo是不支持指定多个同级分类的。

图标和内容量

menu_settings:
  icons: true  # 是否显示各个页面的图标
  badges: false  # 是否显示分类/标签/归档页的内容量

404页面创建

  • 在站点目录下使用命令创建404页面。

    hexo new page 404
  • 在站点目录下的 source/404/index.md,添加以下代码,并把 homePageUrl的值换成自己的博客地址。这样 腾讯公益404就成功了。

      <!DOCTYPE HTML>
      <html>
      <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="robots" content="all" />
        <meta name="robots" content="index,follow"/>
        <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
      </head>
      <body>
        <script type="text/plain" src="http://www.qq.com/404/search_children.js"
                charset="utf-8" homePageUrl="https://frontwhite.xyz"
                homePageName="回到我的主页">
        </script>
        <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
        <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
      </body>
      </html>
  • 在themes/next/languages/zh-CN.yml 中可以修改 菜单栏 的名字

    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      schedule: 日程表
      sitemap: 站点地图
      commonweal: 公益404  # 修改为 公益

主题设置

都在themes/next 文件下进行设置。

### 设置头像

  • 找自己喜欢的图,放至next/source/images/文件夹下。在 _config.yml 文件下,找到以下的配置,可以自行配置。
# Sidebar Avatar
avatar: 
  url:  /images/avatat.jpg   #头像本地地址
  rounded: true   #头像是否设置为圆形
  rotated: true   #是否产生鼠标移入头像,有旋转动动画

设置网站图标

  • 网站图标库: easyicon,  icon
  • 下载16x16以及32x32大小的PNG格式图标,置于/themes/next/source/images/下
  • 打开themes/next/下的_config.yml,查找favicon,替换 small 和 medium 的图标

    favicon:
    small: /images/favicon.png  
    medium: /images/favicon.png
    apple_touch_icon: /images/apple-touch-icon-next.png
    safari_pinned_tab: /images/logo.svg

浏览文章进度条

  • 在 _config.yml文件中找到 back2top, 修改 scrollpercent 为 true,

      back2top:
      enable: true  # 是否启用点击返回顶部按钮
      sidebar: true  # 是否在侧边栏显示点击返回顶部按钮
      scrollpercent: true  # 是否在返回顶部按钮显示已滚动百分比

首页文章不展示全文显示摘要

  • 使用<!--more-->进行手动截断,
  • 或者在 文章头部添加 description: 关于本篇文章的描述
  • 自动形成摘要,在 主题配置文件 中添加:

    auto_excerpt:
      enable: true
      length: 150

    默认截取的长度为 150 字符,可以根据需要自行设定

    
    scroll_to_more: true  #点击阅读全文后是否跳到<!--more-->标记处,设为false时点击阅读全文可以从头阅读
    
    save_scroll: false #自动保存每篇文章或页面上一次滚动的地方
    
    excerpt_description: true #自动在首页对文章进行摘要描述作为前言文本
    

设置字体和字体大小

  • 在 _config.yml文件中找到,修改famil和size,或者自己找一个字体镜像库,修改host的链接
font:  
  enable: true  #开启设置
  host:   # 默认 google 字体库
  global: #全局设置
    external: true 
    family: 微软雅黑  #设置字体样式
    size: 1  #设置字体大小,默认是1 (16px)

右上角的Follow-Github

  • 如果你想大家在看博客的时候能快速链接到你的Github,不妨设置Github_banner(颜色为黑白),设置如下:

    github_banner:
      enable: true  #开启
      permalink: https://github.com/whitedesignd #你的GitHub地址
      title: Follow me on GitHub
  • 觉得黑白的图标不好看,可以使用 GitHub RibbonsGitHub Corners中的任何一款图标。进入网站,复制代码。(我选择的是蓝色的)

    (1) 在 themes/next/layout/_layout.swig 下,在末尾下加入代码。

    window.addEventListener('DOMContentLoaded', () => {
      let icon = document.querySelector(".github-corner");
      icon.innerHTML  = `<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD;color:#fff;aria-hidden="true">
          <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
          <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body">
          </path>
      </svg>`;
    },false);

页面阅读统计

busuanzi_count:      # 页面阅读统计
  enable: true    #设true 开启
  total_visitors: true     #总阅读人数 uv数
  total_visitors_icon: user  #阅读总人数的图标
  total_views: true  #总阅读次数 pv数
  total_views_icon: eye  #阅读总次数的图标
  post_views: true #开启内容阅读次数
  post_views_icon: eye #内容页阅读数的图标

代码样式设置

codeblock:
  highlight_theme: normal  #样式主题 normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  copy_button:  #复制按钮
    enable: true  #开启
    show_result: true  #复制成功提示
    style: mac  #代码框样式  default | flat | mac

顶部阅读进度条

reading_progress:
  # Available values: top | bottom
  position: top
  color: "#0a74daa1"
  height: 3px

静态资源压缩

Hexo自动生成的html中有很多空白的地方,会影响加载速度,所以最好还是压缩一下.这里使用 hexo-neat插件 或者安装 gulp来压缩。

hexo-neat压缩

#### 安装 hexo-neat

npm install hexo-neat --save-dev

##### 在站点目录下的_config.yml的末尾,添加配置信息。

    # hexo-neat
    # 博文压缩
    neat_enable: true
    # 压缩html
    neat_html:
      enable: true
      exclude:  #排除的文件
      
    # 压缩css  跳过min.css
    neat_css:
      enable: true
      exclude:
        - '**/*.min.css'
        
    # 压缩js 跳过min.js
    neat_js:
      enable: true
      mangle: true
      output:
      compress:
      exclude:
        - '**/*.min.js'
        - '**/jquery.fancybox.pack.js'
        - '**/index.js'  
        - '**/love.js'
    # 压缩博文配置结束
  # 注意上面的路径 **/* ,需要自己去配置正确的路径。,不然生成的是空白页面,当然你也可以删掉,全部压缩。

gulp 压缩

##### 安装 gulp

npm install gulp -g

##### cd 到博客的根目录(即站点目录)安装压缩静态文件要用的依赖包

npm i gulp gulp-htmlclean gulp-htmlmin gulp-imagemin gulp-minify-css gulp-uglify --save

###### 在博客根目录下创建 gulpfile.js

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');

// 压缩html
gulp.task('minify-html', function() {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
});
// 压缩css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}),
        imagemin.jpegtran({'progressive': true}),
        imagemin.optipng({'optimizationLevel': 7}),
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))
});
// 默认任务

// gulp 3 的写法
//gulp.task('default', gulp.parallel(
    'minify-html','minify-css','minify-js','minify-images'
));
//gulp 4
gulp.task('default',gulp.series(gulp.parallel('minify-css', 'minify-js', 'minify-html' ,'images')))

// 出现 gulp和gulp-cli版本不一致的问题,可能需要重新安装 npm i gulp-cli -g

<p style="height:20px"></p>

注意:gulp-babel 只能转换如箭头函数等一部分 ES6 的新特性 对 import 无能为力 ,如果需要压缩含有 import 特性的代码 需要使用 webpack 或者 browserify 等工具 具体教程网上有 我因为用不到也就没仔细研究

###### 执行压缩

hexo clean 
hexo g 
gulp 
hexo d

//或者 hexo cl && hexo g && gulp && hexo d

点击图片放大

在 next/_config.yml 找到 fancybox

  fancybox: true

Hexo博客提交百度和Google收录

### 站点地图

站点地图即sitemap, 是一个页面,上面放置了网站上需要搜索引擎抓取的所有页面的链接。站点地图可以告诉搜索引擎网站上有哪些可供抓取的网页,以便搜索引擎可以更加智能地抓取网站。

    • 生成站点地图

      • 安装百度和Google的站点地图生成插件:
      npm install hexo-generator-baidu-sitemap --save
      npm install hexo-generator-sitemap --save
    • 修改配置文件

      修改站点配置文件_config.yml,添加以下内容:

      # 自动生成sitemap
      sitemap:
        path: sitemap.xml
      baidusitemap:
        path: baidusitemap.xml

      此时,进入public目录,你会发现里面有sitemap.xml(提交给谷歌)和baidusitemap.xml (提交给百度)两个文件,这就是生成的站点地图。里面包含了网站上所有页面的链接,搜索引擎通过这两个文件来抓取网站页面。

      • 添加robots.txt

        robots.txt 是一种存放于网站根目录下的ASCII编码的文本文件,它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的,哪些是禁止爬取的。
        在source目录下增加rebots.txt文件,网站生成后在网站的根目录站点目录/public/下。

        User-agent: *
        Allow: /
        Allow: /archives/
        Allow: /categories/
        Allow: /tags/
        
        Disallow: /vendors/
        Disallow: /js/
        Disallow: /css/
        Disallow: /fonts/
        Disallow: /vendors/
        Disallow: /fancybox/
        
        Sitemap: https://你的域名/sitemap.xml
        Sitemap: https://你的域名/baidusitemap.xml
        
    • Google网站站长百度站长

      关于如何登录Google。这里就不再说了,相信你们有办法。

      • 添加站点

        • 登录Google网站站长,进入Search Console,选择 网址之后 填入网址,下载验证的HTML文件,
          放在站点目录下的 scoure 下,打包上传,进行验证。
       > 我能访问到下载的文件,就是不能验证成功,所以采用了取巧的方法,在自己的 github pages 仓库上的  Upload files 上传验证文件,即可通过。
       +  验证通过后,进入 站点地图,提交 sitemap.xml,等待验证。
    
       + 浏览器网址中输入 site:自己的网址,就可以查看到自己的博客
        ```
          site:https://frontwhite.xyz
        ```
       + 百度站长也是一样的做法。只是没有站点地图,在链接提交的页面,选择自动提交的 sitemap  提交,添加 自己的百度站点网址
        ```
          https://frontwhite.xyz/baidusitemap.xml
        ```
       +  Github上的博客,百度无法收录。把博客源码托管在[Coding Net](https://coding.net/)上,结合域名定向(不需要备案)的方法达到检索的目的,在百度蜘蛛爬取的时候,解析到coding pages。自行google教程。
    
    • bing收录和 google收录一样简单。先注册登录,必应收录有两种方式,一种使用刚刚谷歌的 Google Search Console 来进行收录。第二种是就是自己添加URL还可以直接导入你URL。

    Coding 部署博客

    github 的博客 国内的访问速度有点慢,加上百度站长不收录(GitHub 禁止了百度的爬取),所以采取了双线部署的方式。

    • coding官网 注册登录,已被腾讯收购。所以登录就会来到腾讯云开发者平台,点击创建项目。
    • 添加SSH,这一步跟github一样。生成的公钥在 C:用户用户名.ssh,使用 命令行方式查看。
     C:\用户\用户名\.ssh> cat id_rsa.pub

    在 coding的个人设置里添加SSH公钥即可。

    • 创建项目SanbaiBlog,项目名称建议和你的用户名一致,这样做的好处是:到时候可以直接通过 user_name.coding.me 访问你的博客,如果项目名与用户名不一致,则需要通过 user_name.coding.me/project_name 才能访问,项目描述可以随便写.

    创建项目

    <p style='height:20px'></p>

    • 在SanbaiBlog项目中选择 构建与部署 的 静态网站(需要实名认证)。

    静态网站

    <p style='height:20px'></p>

    • 在自己的域名中添加域名解析,其中记录值是 在coding上生成的网站地址,我的是: wy07dq.coding-pages.com。还得把 github.io 这两个的解析路线改为境外。

    添加域名解析

    <p style='height:20px'></p>

    • 在设置里,用自己的域名替换自带的域名,但是 证书状态是失败,需要把 解析到 github.io 的两个记录暂停,再申请证书,正常后,再启用记录。

    coding 替换域名

    • 修改站点目录下的_config.yml, repo 用 https 或者 ssh 都行。
    deploy:
      type: git
      repo: 
        github: https://github.com/whitedesignd/whitedesignd.github.io
        coding: https://e.coding.net/frontwhite/SanbaiBlog.git
      branch: master
    • 提交代码,就可以看到github和coding上有更新的代码。

    评论系统

    ### NexT 主题本身集成了五种评论插件:Disqus,畅言,Valine,LiveRe (来必力) 和 gitalk。对于我这种 github pages 的博客,只能使用一些方便的评论功能。

    • Disqus评论系统,很多博客甚至一些其它网站都在使用,功能足够强大,也比较美观,还支持匿名评论。但是 Disqus需要翻墙评论。

      虽然几种免翻墙用 Disqus 评论的解决办法,例如 disqus-proxyDisqusJS( next 7 中集成了该功能 )和 Disqus PHP API,不过它们都需要另外一台服务器来进行反代理,而我的博客是放在 Github 上的,也没有多余的服务器可以用,只好放弃了。
    • 畅言 安装需要备案号(我咋备案。。。),不太好用。最难受的是,需要手机号验证,这也就阻挡了大部分的评论者。
    • valine,这是一个国产的评论系统,基于 Leancloud 的一个评论系统,还得去配置一个 Leancloud 账号。展示的方式还算不错啦,但是也存在问题,一是没有评论推送,二是后续无法更好的沟通。
    • LiveRe,韩国的一个评论系统,看上去不错,而且支持多账号登录,不过在国内加载有点慢。
    • gitment 和 gitalk,看到很多大佬在介绍这个,不过有大佬说使用 Github 的 issue 系统作为评论系统,很 geek 的一个想法,不过当用户如果尝试登录评论,所要求的权限是很多的,所以我就放弃了。

      大佬的顾虑:gitment 能够读写所有公开的 repo (Repository (代码)仓库)。,这是不是意味着可以把我所有的 repo 全部删掉。。。

    ### 添加 utterances评论系统

    • 同样是基于 Github 的 issue 系统,但由于是基于 Github App 构建的,权限控制的颗粒度要细一些,所需要的权限要少得多,仅限于读写特定仓库的 issues 和 comments,可以只具有读写 issue 的权限,不需要读写代码的权限。
    • 而且可以只在需要的 repo 中安装。
    • 并且,仅需要给 utterances 授权一次,其他凡是使用 utterances 的站点都不必再 额外授权 ,直接就可以评论。

       <h5 style="font-size:15px;">2.1 utterances评论系统安装</h5>
      
       1. 新建一个 github 存储库必须是公开的存放评论的地方。而不是私有的,这样我们的读者才可以查看以及发表评论。
      
       2. 到 [Github APP](https://github.com/apps/utterances) 安装 utterances.点击 Install。 
      ![](https://shop-element.oss-cn-shenzhen.aliyuncs.com/shop/next-%E9%85%8D%E7%BD%AE/utterances%20install.png)
    
      3. 选择 Only select repositories, 选择刚创建的仓库。

      4. 打开 https://utteranc.es/ ,在网站的底部有生成所需的 javascript。也可在根据下面代码的基础上更新自己的信息插入代码,只需要把下面代码中的 repo 改为你自己的Github用户名/刚才创建仓库的名称,然后在你需要显示评论的位置插入代码即可!
      ```
        <script src="https://utteranc.es/client.js"
              repo="[ENTER REPO HERE]"  // repo改为你自己的Github用户名/刚才创建仓库的名称
              issue-term="pathname"   // 命名issue的格式,默认pathname
              theme="github-light"  // 评论系统 theme,github-light或github-dark
              crossorigin="anonymous"  // 跨域,默认
              async> 
        </script>
      ```
    
        5. 在 layout/_partials/comments.swig 的 %- if page.comments % (大括号不能出现在字里或代码里,不然或出错)下添加以下代码:
    
        ```
          <div class="comments">
            <script src="https://utteranc.es/client.js"
                repo="whitedesignd/hexo--comment"
                issue-term="title"
                label="utterances"
                theme="github-light"
                crossorigin="anonymous"
                async>
            </script>
          </div>
        ```
    
        6. 授权后,就可以进行评论了。
    
        > 现在有插件theme-next/hexo-next-utteranc直接安装 再用 hexo 生成 ,不在需要手动修改主题文件了

    发表评论

    0/200
    38 点赞
    0 评论
    收藏