精华内容
下载资源
问答
  • 前言 墙面环境已经搭好,开始安装Hexo 下载Hexo ...完整操作 下载 cnpm install hexo-cli -g 初始化 ...美化主题 介绍 这里用的是Next 1. Next主题集成了评论、统计等功能,非常强大,也是很火的一...

    前言
    前面环境已经搭好,开始安装Hexo

    下载Hexo

    创建一个文件夹,进入并右键点击Git Bash Here
    完整操作

    下载

    cnpm install hexo-cli -g
    

    初始化

    hexo init
    

    测试

    hexo s
    

    博客搭建好了
    但是会感觉默认的主题太过单调
    没关系,可以更改


    美化主题

    介绍
    这里用的是Next

    1. Next主题集成了评论、统计等功能,非常强大,也是很火的一个主题  
    
    2. 这里有两个_config.xml文件,一个是站点目录下的,是Hexo初始化时的配置;另一个是Next主题下的,位于主题目录下,由主题作者提供
    

    站点目录

    /MyBog/_config.xml  
    

    主题目录

    /MyBlog/themes/next/config.xml  
    

    关于博客有几条指令经常用到

    hexo clean   #清除缓存  
    hexo g       #生成静态页面  
    hexo s       #开启本地服务器
    hexo d       #部署到远程服务器  
    #将hexo clean、hexo g、hexo s统称为测试三连  
    

    主题设定

    在Git中输入命令下载主题
    主题下载可到Themes | Hexo

    点击
    在这里插入图片描述
    复制链接
    在这里插入图片描述

    完整操作

    git clone https://github.com/iissnan/hexo-theme-next theme/next
    
    • 打开站点目录 找到theme字段,将值修改为next,如图:
      在这里插入图片描述

    • 现在测试三连(hexo clean 、hexo g 、hexo s)运行

    完整操作

    hexo clean 
    hexo g
    hexo s
    

    并打开https://localhost:4000测试
    在这里插入图片描述

    主题版本设定

    • 编辑主题配置,可以更改Next中的几种版本主题

    • 在这里插入图片描述

        Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
        Mist - Muse 的紧凑版本,整洁有序的单栏外观
        Pisces - 双栏 Scheme,小家碧玉似的清新
        Gemini - 新出的版本,简约的风格比较不错(现在我正在用的)
      

    语言设定

    编辑站点配置,将language设置为想要的语言

        语言            代码            示例
    1. English     ——   en          ——  language:en
    2. 简体中文     ——  zh-Hans      ——  language: zh-Hans
    3. 繁体中文     ——  zh-hk        ——  language: zh-hk
    

    菜单设定

    编辑站点配置,搜索menu,将需要的类别取消注释,即#
    在这里插入图片描述

    新建-关于

    完整操作

    hexo new page about
    

    新建-标签

    完整操作

    hexo new page tags
    

    新建-分类

    完整操作

    hexo new page categories
    

    新建-归档

    完整操作

    hexo new page archives  
    

    并在主题配置中修改为true,如图:
    在这里插入图片描述

    效果如图:
    在这里插入图片描述

    文章的标签、分类使用
    在这里插入图片描述

    开启社交

    在这里插入图片描述

    效果如图:
    在这里插入图片描述

    全文阅读

    在markdown文章中任意位置添加<!-- more -->
    效果如图:
    在这里插入图片描述

    统计阅读量、人数、字数

    编辑主题目录中需要的,改为true,统计网站、文章访问的人数
    在这里插入图片描述

    编辑主题目录中需要的,改为true,统计字数、阅读时间
    在这里插入图片描述

    效果如图:
    在这里插入图片描述
    在这里插入图片描述

    返回顶部

    编辑主题目录,改为true
    在这里插入图片描述

    效果如图:
    在这里插入图片描述


    博客搭建最后效果
    https://l1090865.github.io/

    END

    end

    展开全文
  • 修改主题配置文件 hexo/themes/hexo-theme-next/layout/_macro/post.swig 找到 <div class="post-meta"> <span class="post-time"> 标签后增加: 1 2 3 4 5 6 7 8 {%if post.updated ...

     

    显示文章更新时间

    修改主题配置文件 hexo/themes/hexo-theme-next/layout/_macro/post.swig

    找到 <div class="post-meta"> <span class="post-time"> 标签后增加:

    1
    2
    3
    4
    5
    6
    7
    8
    {%if post.updated and post.updated > post.date%}
      <span class="post-updated">
        &nbsp; | &nbsp; {{ __('post.updated') }}
        <time itemprop="dateUpdated" datetime="{{ moment(post.updated).format() }}" content="{{ date(post.updated, config.date_format) }}">
          {{ date(post.updated, config.date_format) }}
        </time>
      </span>
    {% endif %}

    post-updated 用来访问对应的语言配置文件里的值,theme. 来访问主题配置文件的变量,post. 来访问每篇文章的前置设置 Front Matter 里的变量。
    代码里需要保证updated的时间是date之后才会显示

    修改语言配置文件 hexo/themes/hexo-theme-next/languages/zh-Hans.yml

    增加 post 下 updated 的配置

    1
    2
    post:
      updated: 更新于

    修改主题配置文件 hexo/themes/hexo-theme-next/_config.yml

    增加一行:

    1
    display_updated: true

    给博客设置RSS

    安装

    hexo-generator-feed

    1
    $ npm install hexo-generator-feed --save

    设置

    打开 站点配置文件 _config.yml
    新增以下内容

    1
    2
    3
    4
    5
    6
    7
    8
    feed:
      type: atom
      path: atom.xml
      limit: 20
      hub:
      content:
      content_limit: 140
      content_limit_delim: ' '

    更改背景透明度

    首先打开主题配置文件夹

    themes\next\source\css\_schemes\Pisces

    然后找到配置文件

    _layout.styl

    修改配置文件

    1
    2
    3
    .content-wrap {
        background: rgba(255, 255, 254, 0.5);
    }

    如上图,将 .content-wrap 的 background 属性值设置为:rgba(255, 255, 254, 0.5) (这个值可以根据个人需求自定义)


    添加Google AdSense

    新建 AdSense 模板

    1
    themes/next/layout/_custom/google_adsense.ejs

    在 next 主题下的 layout/_custom 文件夹下创建一个 google_adsense.ejs 文件
    然后将 Google AdSense 的代码复制到 google_adsense.ejs

    编辑 _layout.swig

    1
    2
    3
    <!-- Google AdSense start -->
    {% include '_custom/google_adsense.ejs' %}
    <!-- Google AdSense end -->

    根据 Google AdSense 的要求将代码放置在 <head> 和 </head> 标记之间


    侧栏加入已运行的时间

    加入下面代码:
    文件位置:~/blog/themes/next/layout/_custom/sidebar.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 language="javascript">
      function show_date_time(){
        window.setTimeout("show_date_time()", 1000);
        BirthDay=new Date("05/27/2017 15:00:00");
        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>

    上面 Date 的值记得改为你自己的


    添加字数统计

    安装 hexo-wordcount 插件

    首先在博客目录下使用 npm 安装插件:

    1
    npm install hexo-wordcount --save

    修改配置文件

    为了方便地开启和关闭字数统计功能,我们需要在配置文件(站点配置文件或主题配置文件均可)中添加一个键值对:

    1
    2
    3
    4
    5
    # 开启字数统计
    word_count: true
    # 关闭字数统计
    # word_count: false

    修改 post.swig

    为了能在文章信息处显示字数,我们需要修改 themes/next/layout/_macro/post.swig,在 class 为 post-mata 的 div 中的添加如下内容:

    1
    2
    3
    4
    <div class="theme-info">
      <div class="powered-by"></div>
      <span class="post-count">共{{ totalcount(site) }}字</span>
    </div>

     

    展开全文
  • hexo主题配置一     hexo主题配置二    hexo主题配置三     hexo主题配置四     hexo主题配置五     Hexo博客提交百度和Google收录 &...

    转载及引用

    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  # 是否在返回顶部按钮显示已滚动百分比
    

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

    • 使用进行手动截断,

    • 或者在 文章头部添加 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
    
    

    注意: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上,结合域名定向(不需要备案)的方法达到检索的目的,在百度蜘蛛爬取的时候,解析到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 才能访问,项目描述可以随便写.

    创建项目

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

    静态网站

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

    添加域名解析

    • 在设置里,用自己的域名替换自带的域名,但是 证书状态是失败,需要把 解析到 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 的站点都不必再 额外授权 ,直接就可以评论。

      2.1 utterances评论系统安装
      1. 新建一个 github 存储库必须是公开的存放评论的地方。而不是私有的,这样我们的读者才可以查看以及发表评论。

      2. Github APP 安装 utterances.点击 Install。

      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 生成 ,不在需要手动修改主题文件了
      
    展开全文
  • Hexo博客美化及功能增添 补充上一篇------Mac下使用Hexo+Github搭建个人博客 6.Hexo博客美化及功能增添 1)选主题 Hexo官网:https://hexo.io/themes/ 里面有特别多的主题可以选择,我在这里选的是next这个主题。...

    Hexo博客美化及功能增添

    补充上一篇------Mac下使用Hexo+Github搭建个人博客

    6.Hexo博客美化及功能增添

    1.选主题
    Hexo官网:https://hexo.io/themes/
    里面有特别多的主题可以选择,我在这里选的是next这个主题。下载主题:

    cd ~/blog
    git clone https://github.com/iissnan/hexo-theme-next themes/next
    

    ·修改站点配置文件:_config.yml,将里面76行的theme由landscape修改为next

    ·更换新的主题,可能会有一些延迟

    2.通过站点配置文件修改网站细节
    需要修改的内容可以参考网站:https://hexo.io/zh-cn/docs/configuration,
    里面对各个参数有一些详细的解释,我这里修改一些博客的标题,副标题,描述,语言等。
    这里我想说的是,一般你修改一项,重新部署网站一下,因为一旦出错,就比较容易找到原因。

    修改博客标题、作者、语言
    说明:
    hexo 下的_config.yml 称为站点配置文件
    themes/next 中的_config.yml 称为主题配置文件

    这样还是不起作用的话,请查看theme/next/languages/目录下是否有zh-Hans.yml 文件.一般是有zh-CN.yml 但是我们按照 hexo 文档language是这样的:

    language: zh-Hans // 这里设置语言 简体中文
    

    所以要把zh-CN.yml文件改成名字为zh-Hans.yml就可以了

    效果如图:

    3.主题文件修改博客内容
    ·关键也是同样名字的配置文件:_config.yml,看一下里面的内容。

    修改整个主题,不需要的用#注释掉,这里我已经将默认的Muse注释掉,改为Pisces

    将menu也修改,本来只有首页和归档,限制添加标签和分类,只需要去掉前面的#,现在来看一下效果。

    效果如图:

    ·需要新建一个分类和标签页面

    cd ~/blog/source/
    hexo new page categories
    hexo new page tags
    

    编辑刚新建的页面,将页面的type设置为categories,主题将自动为这个页面显示分类。页面内容如下:

    添加分类类型

    4.设置侧边栏的社交连接

    添加友情链接

    5.设置打赏功能,不管有没有人,设置一下这个功能还是挺好的。
    越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。只需要主题配置文件中填入微信和支付宝收款二维码图片地址即可开启该功能。

    EXAMPLE -打赏功能配置示例:

    reward:
      enable: true
      comment: 你可以对我打赏了哦
      wechatpay: /images/wechatpay.jpg 
      alipay: /images/alipay.jpg
    


    6.设置头像为圆形可旋转
    进入以下目录:

     cd ~/blog/themes/next/source/css/_common/components/sidebar/
     vim sidebar-author.styl
    

    7.首页文章设置阅读全文

     cd ~/blog/themes/next/
     vim _config.yml
    

    8.添加动态背景
    进入主题配置文件

    9).博客添加fork Github
    进入 http://tholman.com/github-corners/
    选取自己喜欢的风格

    我选取的第一个,复制该代码。

      cd ~/blog/themes/next/layout/      //进入该配置文件
      vim _layout.swig //编辑
    

    10.修改文章内链接样式

      cd ~/blog/themes/next/source/css/_common/components/post/
      vim post.styl
    


    11.修改文章底部带#的标签

    cd ~/blog/themes/next/layout/_macro/
    vim post.swig 
    


    12.Valine评论
    注册LeanCloud

    点击设置

    点击应用key

    进入主题配置文件_config.yml,appid、appkey已复制

    13.增加搜索功能

    参考Next官方文档
    ·添加不蒜子统计功能
    进入主题配置文件

    14.增加加载效果
    编辑主题配置文件

    pace: true
    pace_theme: space-theme-center-circle
    

    15.点击爆炸效果

    首先在themes/next/source/js/src里面建一个叫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)};
    

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

    {% if theme.fireworks %}
       <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 %}
    

    打开主题配置文件,在里面最后写下:

    # Fireworks
    fireworks: true
    

    16.隐藏网页底部强力驱动

    /blog/themes/next/layout/_partials //进入该文件夹
    vim footer.swig  编辑该文件
    ####把下面这些注释掉
    <!--{% if theme.footer.powered.enable %}
      <div class="powered-by">{#
      #}{{ __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'})) }}{#
      #}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
     #}</div>
    {% endif %}
    
    {% if theme.footer.powered.enable and theme.footer.theme.enable %}
      <span class="post-meta-divider">|</span>
    {% endif %}
    
    {% if theme.footer.theme.enable %}
      <div class="theme-info">{#
      #}{{ __('footer.theme') }} – {{ next_url('https://theme-next.org', 'NexT.' + theme.scheme, {class: 'theme-link'}) }}{#
      #}{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
    #}</div>
    {% endif %}-->
    

    17.增加内容分享服务

    效果如下:

    展开全文
  • 网上很多关于主题美化的教程都是老版本 next 5.1 的,最近更新到 next 7 之后摸索了好久才找到简单有效的自定义主题方式,下面是具体的操作。 修改主题下 _config.yml 文件,找到下面这一部分,也即注释掉最后一行 ...
  • 设置阅读全文 用编辑器打开themes/next 目录下的_config.yml文件 auto_excerpt: enable: false length: 150 ...打开hexo\themes\hexo-theme-next\layout_partials路径下footer.swig文件,在你...
  • Hexo博客Next主题美化

    2020-05-12 13:38:01
    本文主要说明在Hexo博客nexT主题下如何进行美化,具体对应效果可通过博客页面(https://alderaan.xyz)进行查看。
  • Hexo-next主题美化

    2018-11-25 18:52:07
    Hexo优点 个人认为Hexo博客搭建较为简单,适合...关于Next主题的美化教程众多,这里不一一介绍,我会再下面独立成章一些个人认为比较有用的美化教程,其余可参考以下博客: Hexo官方插件(官方即正统) hexonext...
  • hexo+next主题美化

    2020-03-02 10:43:58
    1、设置 hexonext 主题 我们在站点的配置文件_config.yml 中找到 theme 后添加: theme: next # 配置成刚下载的next主题 2、配置 hexo 网站相关信息 我们在站点的配置文件_config.yml 中,修改: # Site title:...
  • hexo theme next7.8 主题美化

    千次阅读 2020-07-16 15:11:29
    hexo 主题 next7.8 版本配置美化 1. 下载主题 最简单的安装方式就是直接克隆整个仓库: # 进入你的博客目录 cd hexo # 将仓库复制到博客目录的 themes/next 文件夹中 git clone ...
  • hexo美化——拓展篇

    千次阅读 2019-04-29 21:02:53
    hexo/themes/next/source/css/: 是next主题的样式文件,决定主题的外观。 hexo/themes/next/source/css/main.styl:汇总css文件夹中所有的样式。 hexo/themes/next/source/css/ _custom/custom.styl:是空的,专门...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 284
精华内容 113
关键字:

hexonext美化