精华内容
下载资源
问答
  • Hexo NexT主题自定义背景图片

    千次阅读 2020-10-31 21:20:25
    Hexo NexT主题自定义中可能会碰到的坑前言初衷个性化之路正文方法1(失败)方法2后记 前言 初衷 Hexo是一个基于Node.js的静态网页生成器,我将它与Github Page搭配使用,创建我的个人博客网站。 但是相信大家绝对...

    前言

    初衷

    Hexo是一个基于Node.js的静态网页生成器,我将它与Github Page搭配使用,创建我的个人博客网站。
    但是相信大家绝对不会只用原版简陋的Landscape主题吧……
    于是,我结合大佬们的建议、参阅了无数Hexo个人网站后 决定用NexT主题。我选的是Gemini:-)

    个性化之路

    虽说NexT很不错,但是依然达不到预期的效果。

    • 单调的灰白背景
    • 想要单击效果
    • 没有评论功能
    • ……

    正文

    方法1(失败)

    单调的灰白背景谁也不喜欢。谁都想自己找张好看的图片放上去。
    本着“Baidu is your friend”的原则,我找到了好多方法。
    不过
    这些教程清一色的让我们修改themes\next\source\css\ _custom\custom.styl这个文件。

    “这个是Next故意留给用户自己个性化定制一些样式的文件”

    我 怎 么 没 有 这 东 西
    这是因为版本更新NexT改掉了一些文件

    于是我自己偷偷新建了一个themes\next\source\css\ _custom\custom.styl……
    仍 然 不 好 使(废话
    另外,在themes\next\_config.yml中有一个方法

    # Define custom file paths.
    # Create your custom files in site directory `source/_data` and uncomment needed files below.
    custom_file_path:
      #head: source/_data/head.swig
      #header: source/_data/header.swig
      #sidebar: source/_data/sidebar.swig
      #postMeta: source/_data/post-meta.swig
      #postBodyEnd: source/_data/post-body-end.swig
      #footer: source/_data/footer.swig
      #bodyEnd: source/_data/body-end.swig
      #variable: source/_data/variables.styl
      #mixin: source/_data/mixins.styl
      #style: source/_data/styles.styl
    

    不过在经试验后,发现这一方法不能只用一个,优先级似乎高于main.styl
    所以如果只添加了一个,网页会找不到其他部分的css并报错。

    方法2

    以这次报错为契机,我找到了渲染出的main.css与源文件main.styl进行比较。
    我发现main.styl中以@import "\.styl";的形式引用themes\next\source\css中的.styl文件,在渲染时构成main.css
    然后我在main.styl的末尾发现了这个东西:

    // Custom Layer
    // --------------------------------------------------
    for $inject_style in hexo-config('injects.style')
      @import $inject_style;
    

    这意味着你可以在这里加入自己的个性化文件,并且与预置的文件一起渲染成最终网站所使用的main.css
    于是我加入了@import "_custom/styles.styl"一行
    将想要使用的背景图片放在themes\next\source\images文件夹中
    创建themes\next\source\css\ _custom\style.styl文件

    body { 
    background: url(/images/图片名);
    background-repeat: no-repeat;// 设定背景图片非重复填充
    background-attachment: fixed;// 设置背景图片不随页面滚动
    background-position: 50% 50%;// 设置背景图片位置
    background-size: cover//
    }
    

    最终成功!

    后记

    本文是MD-11的第一次博客写作。作者我仍是一名初中学生,所以本文可能瑕疵颇多,仍需改进;
    另外,本文成文匆忙,作者未配插图。
    希望大家多多谅解:-)

    展开全文
  • 在使用 Hexo + NexT 搭建个人博客的过程中一直有个问题没有解决,直到今天才找到了解决方法。问题就是在展示同一张图片中,caption出现了两次,如图: 问题分析 图片正下方的 image-caption 是 NexT 给 fancybox ...

    摘要

    https://wylu.github.io/posts/7bd83fc5/

    在使用 Hexo + NexT 搭建个人博客的过程中一直有个问题没有解决,直到今天才找到了解决方法。问题就是在展示同一张图片中,caption出现了两次,如图:

    multiple-captions

    问题分析

    图片正下方的 image-caption 是 NexT 给 fancybox 加上的;而图片左下方的 figcaption 是因为使用了 hexo-renderer-pandoc Markdown 渲染器导致的,hexo-renderer-pandoc 将 Markdown 文件渲染成 HTML 时,会对图片进行渲染,然后生成一个 figcaption 的标签。

    很多人可能不会有这样的问题,因为 Hexo 默认的 Markdown 渲染器是 hexo-renderer-marked,hexo-renderer-marked 渲染图片时不会生成 figcaption。

    如果你使用的是 hexo-renderer-marked 渲染器,就不会有这样的问题,但是相信很多人都是因为需要使用 mathjax,所以都将默认的 Hexo 默认的 Markdown 渲染器换成了 hexo-renderer-pandoc,hexo-renderer-pandoc 功能强大(依赖与 pandoc 自身强大的功能),它对数学公式的渲染简直可以说是吊打 hexo-renderer-marked,这也是我一直使用它的原因。

    所以为了在使用 hexo-renderer-pandoc 的同时,把图片 caption 出现了两次的问题解决,我提过 issue,查阅了许多资料,终于找到了解决的方法。

    解决方法

    编辑站点配置文件 _config.yml,添加如下内容:

    pandoc:
      extensions:
        - '-implicit_figures'
    

    执行下列命令重新生成站点,展示效果如下:

    $ hexo clean && hexo g && hexo s -o
    

    single-caption

    隐藏 fancybox 的 caption

    以 NexT v7.7.0 为例,通过查看 hexo-theme-next/source/js/utils.js 源码,发现 NexT 在使用 fancybox 时,如果图片 title 或 alt 属性不为空时,就会 fancybox 添加一个子标签展示图片的 title 或 alt 属性值。

    var imageTitle = $image.attr('title') || $image.attr('alt');
    if (imageTitle) {
      $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
      // Make sure img title tag will show correctly in fancybox
      $imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle);
    }
    

    如果想通过配置支持选择是否展示 caption,可以参考下方的方法(在 NexT v7.7.0 已测试过),其实不管 NexT 的版本如何,解决方法的思路基本是一致的。

    首先修改主题配置文件 _config.yml,找到 fancybox 的配置,将 fancybox 的配置改成如下所示内容:

    # FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
    # For more information: https://fancyapps.com/fancybox
    fancybox: 
      enable: true
      caption: false
    

    其中,enable 控制是否启用 fancybox,而 caption 控制是否展示 caption (当然只有在 enable 为 true 时,caption 配置才有效),如果你不启用 fancybox 自然也不会有 caption。

    然后,编辑 hexo-theme-next/source/js/utils.js 文件,将上面的代码修改成如下内容:

    var imageTitle = $image.attr('title') || $image.attr('alt');
    if (imageTitle) {
      if (CONFIG.fancybox.caption) {
        $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
      }
      // Make sure img title tag will show correctly in fancybox
      $imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle);
    }
    

    接着,编辑 hexo-theme-next/source/js/next-boot.js 文件,将 CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox(); 替换成如下内容:

    /**
     * Register JS handlers by condition option.
     * Need to add config option in Front-End at 'layout/_partials/head.swig' file.
     */
    CONFIG.fancybox.enable && NexT.utils.wrapImageWithFancyBox();
    

    相信你可以发现,我们这里将 CONFIG.fancybox 替换成 CONFIG.fancybox.enable,正是因为我们自定义的配置是通过 fancybox 下的 enable 的值来确定是否启用的。另外从源码上方的注释可以看到,CONFIG 下的配置项需要在前端文件 ‘layout/_partials/head.swig’ (实际上该文件在’layout/_partials/head/head.swig’)中加上。

    所以最后,我们需要在 layout/_partials/head/head.swig 中修改一下上面我们所使用 CONFIG.fancybox.caption 配置。参照其它配置,这里需要将 fancybox: {{ theme.fancybox }},修改成如下内容:

    fancybox: {{ theme.fancybox | json }}
    

    重新生成,效果如下:

    no-caption

    References

    https://github.com/wzpan/hexo-renderer-pandoc/issues/34

    https://github.com/theme-next/hexo-theme-next/issues/857

    展开全文
  • 原文 https://leay.net/2020/02/14/hexo-next-font ...PS:Hexo Next 的瞎几把优化可以看看这篇:尝试折腾了下用 hexo-next-theme 搭建的博客 一个 Hexo 插件分享哈:Hexo 插件 hexo-douban-getter —— 展示豆瓣标

    原文

    https://leay.net/2020/02/14/hexo-next-font

    说明

    版本:Hexo 4.0、Next 7.0

    搜索的一些文章里提及改动的地方挺多的,我乱试了一下,似乎并不需要那么复杂。不知道是不是我没搞懂。

    可能是因为 Next 更新了一些配置简化了操作?总之记录一下。

    相关配置

    先看主题配置文件 _config.yml 里与字体相关的配置项:

    font:
      enable: true
      # CDN
      host: 
    
      # Font options:
      # `external: true` will load this font family from `host` above.
      # `family: Times New Roman`. Without any quotes.
      # `size: x.x`. Use `em` as unit. Default: 1 (16px)
    
      # external: 控制是否使用 CDN。
      # family: 字体样式。
      # size: 字体大小。默认为 1(16px)。
      
      # Global font settings used for all elements inside <body>.
      # 全局配置,覆盖 <body> 标签里所有元素
      global:
        external: true
        family: 
        size: 
    
      # Font settings for site title (.site-title).
      # 博客名字那儿
      title:
        external: true
        family: 
        size:
    
      # Font settings for headlines (<h1> to <h6>).
      # 注意这是文章里的标题,而不是侧边栏的 toc
      headings:
        external: true
        family: #Roboto Mono
        size:
    
      # Font settings for posts (.post-body).
      # 正文
      posts:
        external: true
        family:
        size:
    
      # Font settings for <code> and code blocks.
      # 代码块
      codes:
        external: true
        family: 
    

    挑选并配置字体

    Google Fonts 挑选一款字体,在配置里的 family 处添加即可。

    例如:

    font:
      enable: true
      global:
        external: true
        family: Noto Serif SC 
        size:
    

    如此配置之后,基于 hexo-next-theme 的博客就会全局使用「思源宋体」。

    同理,配置代码块的字体也只需要挑选并覆盖相应配置即可。如:

    font:
      enable: true
    # ……
      codes:
        external: true
        family: Roboto Mono
        size:
    

    其它可配置样式的覆盖详见上面的 相关配置

    样式的高级设置

    主题提供的字体配置挺到位的,但仍然有限。

    一是只能配置 global、title、headings、posts、codes 几处(其实也挺丰富了);二是能配置切换字体,设置字体大小,但不能设置颜色等;三是字体只能设置一种 —— 网页是支持多种字体按优先级展示的。

    这些问题,可以使用 Next 4.0 提供的「加载用户自定义样式的配置」解决。

    道理很简单,就是用 Next 提供的自定义样式覆盖默认或者配置的样式。

    在主题配置文件 _config.yml 里开启:

    custom_file_path:
      #head: source/_data/head.swig
      #header: source/_data/header.swig
      #sidebar: source/_data/sidebar.swig
      #postMeta: source/_data/post-meta.swig
      #postBodyEnd: source/_data/post-body-end.swig
      #footer: source/_data/footer.swig
      #bodyEnd: source/_data/body-end.swig
      #variable: source/_data/variables.styl
      #mixin: source/_data/mixins.styl
      style: source/_data/styles.styl
    

    然后在 Hexo 根目录进入 source/_data/styles.styl(若无则新建),添加自己想要设置(覆盖)的样式就好啦!

    比如我要更改全局的字体颜色,就可以这样:

    * {
      color: #2e405b;
    }
    

    PS:同理,这里也可以覆盖博客的各种样式

    font-family

    字体设置默认使用的 CDN 是 //fonts.googleapis.com。如果从 CDN 上访问失败,就会默认使用如下的字体:

    • Non-code Font: Fallback to "PingFang SC", "Microsoft YaHei", sans-serif
    • Code Font: Fallback to consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace

    非代码的文字使用 "PingFang SC", "Microsoft YaHei", sans-serif

    代码块使用 consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace

    浏览器要知道用什么字体,实际上是通过读取 CSS 属性 font-family 1实现的。

    在 Next 里,font-family 的默认值就是上面的两项。当我们在配置文件的 font 里添加字体后,被添加的字体就会被插入到 font-family 默认值的头部 —— 当 font-family 里配置了好几个值时,浏览器会优先使用排在前面的字体。

    比如本站最后渲染出来的效果是这样的(你可以打开浏览器的调试窗口查看):

    body {
        font-family: 'Noto Serif SC',"PingFang SC","Microsoft YaHei",sans-serif;
    }
    
    code, pre {
        font-family: 'Roboto Mono',consolas,Menlo,monospace,"PingFang SC","Microsoft YaHei";
    }
    

    然而很可惜的是,Next 似乎无法在配置文件里 fontfamily 处配置多个字体。

    # 无效配置
    font:
      enable: true
      global:
        external: true
        family: Noto Serif SC , Noto Serif SC
        # family: [Noto Serif SC , Noto Serif SC]
        # family: "Noto Serif SC , Noto Serif SC"
    

    如果你想要利用 font-family 的规则2:或者 修改默认使用的字体,阔以直接到源码 source/css/_variables/base.styl 里修改。

    如下面,修改 $font-family-chinese

    // Font families.
    - $font-family-chinese = "PingFang SC", "Microsoft YaHei";
    + $font-family-chinese = "Noto Serif SC";
    

    Next 能加载用户自定义的样式,同样也能加载用户自定义样式使用的变量。然而同样比较可惜的是,自定义样式使用的变量里的定义(source/_data/variables.styl),不能覆盖变量默认定义的值hexo-next-theme/source/css/_variables/)。但是你可以在默认定义里注释掉变量后,在自定义变量里重新定义并赋值。

    自定义样式使用的变量

    在主题配置文件 _config.yml 里开启使用自定义样式变量:

    custom_file_path:
      #head: source/_data/head.swig
      #header: source/_data/header.swig
      #sidebar: source/_data/sidebar.swig
      #postMeta: source/_data/post-meta.swig
      #postBodyEnd: source/_data/post-body-end.swig
      #footer: source/_data/footer.swig
      #bodyEnd: source/_data/body-end.swig
      variable: source/_data/variables.styl
      #mixin: source/_data/mixins.styl
      #style: source/_data/styles.styl
    

    首先,在主题的 source/css/_variables/base.styl 下注释掉你想自定义的变量。如:

    // Font families.
    //$font-family-chinese = "PingFang SC", "Microsoft YaHei";
    

    然后在 source/_data/variables.styl (若无则新建)添加自定义变量并配置(你刚刚注释掉的变量)。

    $font-family-chinese = "试试就试试";
    

    我觉得 source/_data/variables.styl 的设计应该是为 source/_data/styles.styl 提供变量。像上面这样使用好像没啥必要。要说有点好处的话,就是方便了管理用户配置吧……

    googleapis 镜像

    虽然许多文章里都提到说 fonts.googleapis.com 不太稳定,但我访问还挺顺利的……

    fonts.googleapis.com 的国内 CDN 比较少,只找到这么一篇帖子。

    前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务

    用上面帖子里提供的 CDN,Next 的配置就可以这样:

    font:
      enable: true
      host: //fonts.loli.net
    

    官方文档

    https://theme-next.org/docs/theme-settings/#Fonts-Customization

    如果修改不生效

    1. 浏览器清理下缓存。
    2. 是部署后没效果还是本地就没效果?hexo shexo d 前使用 hexo clean 清理下。
    3. 部署后没效果的话,稍微等一下远程的缓存刷新。
    4. 本地没生效的话,CSS 文件夹有没有使用 CDN?
    5. 再不行,进主题的 CSS 文件,或后文里提到的 styles.styl.post-body 单独添加字体相关的 CSS。
    6. 尝试升级 hexo-theme……
    7. 如果仍不能正常显示,或者确定不是自己的问题,可以去 theme-next/hexo-theme-next 提 issue 。

    1. font-family 的规则是这样的:(1)优先使用排在前面的字体。(2)如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。(3)如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。 ↩︎

    2. 利用 font-family 的规则:比如「font-family应 该优先指定英文字体,然后再指定中文字体。否则,中文字体所包含的英文字母,会取代英文字体。」这样的问题。 ↩︎

    展开全文
  • Hexo Next 7.71

    2020-05-21 22:46:55
    4.安装Hexo 安装命令 npm install hexo-cli -g 安装成功界面: 搭建本地个人博客 初始化hexo 新建一个空白文件夹(下文提到的“项目根目录”是指你新建的文件夹的位置)用于存放 hexo 资源。在空白文件夹里面打开 ...

    准备环境

    1.安装Node.js
    2.安装Git
    3.注册码云
    4.安装Hexo

    安装命令

    npm install hexo-cli -g
    

    安装成功界面:
    在这里插入图片描述

    搭建本地个人博客

    初始化hexo

    新建一个空白文件夹(下文提到的“项目根目录”是指你新建的文件夹的位置)用于存放 hexo 资源。在空白文件夹里面打开 Git Bash ,输入下列命令行进行初始化,初始化成功后会在文件夹生成如下图的文件。

    hexo init
    

    在这里插入图片描述

    生成静态页面

    hexo g
    

    启动本地服务

    hexo s
    

    关闭本地服务器在 Git Bash 界面按 Ctrl+C, 在浏览器输入:http://localhost:4000 查看
    在这里插入图片描述

    美化个人博客

    克隆主题

    在项目根目录下的 themes 文件中,打开 Git Bash ,用命令行克隆下新的主题。我这里用的 Next 主题,需要其他主题的自己百度找。

    git clone https://github.com/theme-next/hexo-theme-next.git
    

    在这里插入图片描述

    配置主题

    用文本的方式打开项目根目录下的 config.yml 配置文件,找到 theme
    把原来默认的 landscape 主题名字,改成刚刚克隆的主题名字(主题名字为上图中文件夹的名字)。
    在这里插入图片描述

    测试主题

    重新回到项目根目录下,打开 Git Bath ,用命令行启动服务器。在浏览器访问 http://localhost:4000
    在这里插入图片描述

    发布文章

    在项目根目录下,打开 Git Bash ,执行新建命令,然后 hexo 会自动在指定目录下生成对应文件,如下图所示。然后找到新建好的文件,打开即可进行编辑。

    hexo new "此处输入文章名字"
    

    在这里插入图片描述
    准备好 md 格式文件后,使用下面命令生成网站静态文件到默认设置的 public 文件夹,然后再启动本地服务器。

    hexo g
    

    主题风格设置

    打开主题文件夹下的 config.yml 配置文件(注意:这里要区别,不是項目根目录,主题文件夹的路径为:新建空白文件夹名称/themes/主题文件夹名称)。通过查找功能找到 Schemes 模块,修改为 Gemini 风格。如果喜欢其他风格可以自己修改。如下图所示:
    在这里插入图片描述

    博客左侧栏设置

    在上面的网站界面,可以发现网站的文字是英文,只要修改一下语言模式即可。打开根目录文件夹下的 config.yml 配置文件。找到 language,设置为 zh-CN。标题等其他参数的设置如下。可以对照效果图的具体位置,根据自己的实际需求进行修改。(注意:修改了项目根目录下的config.yml配置文件,需要重启部署项目后才能生效)
    在这里插入图片描述

    分类设置

    添加分类列表

    在项目根目录下,执行下面的命令行,新建分类页面,然后会在项目根目录下的 source 文件夹中新建一个 categories 文件夹

    hexo new page categories
    

    在这里插入图片描述
    打开 categories 文件夹中的 index.md 文件,添加 type 字段,设置为 “categories”。如下图所示。
    在这里插入图片描述

    接着到主题文件夹下的 config.yml 配置文件下,找到 menu 模块,把 categories 的注释给去掉。如下图所示。

    分类美化

    主题文件夹下 source css custom custom.styl 中增加如下代码:

    // 分类&&标签 页面样式
    .post-block.page {
        margin-top: 40px;
    }
    
    // 分类页面page
    .category-all-page {
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
        background-color: #797D7F;
        padding: 20px 30px 60px 30px;
        border-radius: 25px 25px 25px 25px;
    }
    .category-all-title {
        font-family: Impact;
        font-size: 24px;
        color: aqua;
    }
    .category-list {
        overflow: auto;
    }
    .category-list li {
        height: 30px;
        float: left;
        border-right: 3px solid #222;
        padding: 0 20px;
    }
    .category-all ul li {
        list-style: none!important;
    }
    .category-list li:last-child {
        border-right: none;
    }
    .category-list li a {
        font-size: 16px;
        text-decoration: none;
        color: chartreuse;
        font-family: Helvetica, Verdana, sans-serif;
        // text-transform: uppercase;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    .category-list li a:hover {
        color: black;
    }
    .category-list li.active a {
        font-weight: bold;
        color: black;
    }
    

    将文章添加到对应分类

    文章发布前,在 front-matter 部分,多写一个 categories 字段,然后参数写上类别的名称,保存后重启服务,在网页上点击“分类”,可以看到分类下已经生成了刚刚设置的类别,并把刚刚发布的文章归类在此类别下。

    标签设置

    方法跟分类设置一样,所以不再赘述介绍。
    但是需要补充一点, front-matter 中字段有多个参数的时候,可以使用如下图的写法。

    Hexo 博客添加站内搜索

    安装 hexo-generator-search

    npm install hexo-generator-search --save
    

    安装 hexo-generator-searchdb

    npm install hexo-generator-searchdb --save
    

    在项目根目录下的 config.yml 配置文件的文末添加下面这段代码。

    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    

    编辑主题文件夹的 config.yml 配置文件,设置 Local searchenable 为 ture。

    博客头像设置

    添加博客头像

    打开主题文件夹下的 config.yml 配置文件,通过查找功能找到 avatar,然后把一个在线的头像图片地址(百度图片中直接复制链接即可),作为 url 的参数。如下图所示:

    设置头像圆角并旋转打开

    打开主题文件夹的 source\css_common\components\sidebar 目录下的 sidebar-author.styl 文件,然后把下面的代码添加进去即可。

    .site-author-image {
      display: block;
      margin: 0 auto;
      padding: $site-author-image-padding;
      max-width: $site-author-image-width;
      height: $site-author-image-height;
      border: $site-author-image-border-width solid $site-author-image-border-color;
      /* 头像圆形 */
      border-radius: 80px;
      -webkit-border-radius: 80px;
      -moz-border-radius: 80px;
      box-shadow: inset 0 -1px 0 #333sf;
      /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
        (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
     
      /* 鼠标经过头像旋转360度 */
      -webkit-transition: -webkit-transform 1.0s ease-out;
      -moz-transition: -moz-transform 1.0s ease-out;
      transition: transform 1.0s ease-out;
    }
    img:hover {
      /* 鼠标经过停止头像旋转 
      -webkit-animation-play-state:paused;
      animation-play-state:paused;*/
      /* 鼠标经过头像旋转360度 */
      -webkit-transform: rotateZ(360deg);
      -moz-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
    }
    /* Z 轴旋转动画 */
    @-webkit-keyframes play {
      0% {
        -webkit-transform: rotateZ(0deg);
      }
      100% {
        -webkit-transform: rotateZ(-360deg);
      }
    }
    @-moz-keyframes play {
      0% {
        -moz-transform: rotateZ(0deg);
      }
      100% {
        -moz-transform: rotateZ(-360deg);
      }
    }
    @keyframes play {
      0% {
        transform: rotateZ(0deg);
      }
      100% {
        transform: rotateZ(-360deg);
      }
    }
    

    进度条设置

    1.进入博客文件夹的/themes/next文件夹下。

    cd /themes/next
    

    2.载安装Progress module。

    git clone https://github.com/theme-next/theme-next-pace source/lib/pace
    

    3.在/themes/next/config.yml中设置。

    pace:  #是否开启进度条
      enable: true
      # Themes list:
      # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
      # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
      theme: mac-osx #选择进度条样式
    

    网页背景设置

    动态背景设置

    打开主题文件夹下的 layout 文件夹,用文本的方式打开 layout.swig 文件,在文末加上如下的代码:

    <!-- 动态背景 -->
    <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
    

    背景图片设置

    打开主题文件夹下的 source 文件夹,进入 css/custom 文件下,用文本形式打开 custom.styl 文件,然后添加下面这段代码。代码中 url 的地址是指到: 主题文件夹/source/images/ 。

    body{
        background:url(http://edviv.gitee.io/images_bed/images/BG1.jpg);
       // background:url(https://source.unsplash.com/random/1600x900);
        background-size:cover;
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
        // 设置主题部分的透明度,具体看图
        opacity: 0.8;
    }
    
    /*归档页样式优化*/
    .my-post-time{
      position: absolute;
        color: #fff;
        background-color: #49b1f5;
        border-radius: 5px;
        padding-left: 5px;
        padding-right: 5px;
        margin-left: 15px;
    }
    
    .mypost{
        position: relative;
        margin-bottom: 1rem;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    
    a.my-post-title-link:before{
        top: 10px;
        width: 18px;
        height: 18px;  
        content: "\f073";
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 18px;
        line-height: 18px;
    }
    
    a.my-post-title-link{
      text-decoration: none;
      font-size: 18px;
      font-weight: 400;
    }
    
    .my-post-title{
          display: block;
        margin-left: 5rem;
        color: #4c4948;
        text-decoration: none;
        font-size: .8rem;
        cursor: pointer;
    }
    
    .my-post-header{
        position: top;
        margin-bottom: 1rem;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    
    }
    .my-post-title-link{
        font-size: 16px;
        font-weight: 500;
        
    }
    
    .my-post-meta{
      position: absolute;
        color: #99a9bf;
        width: 80px;
        color: #114142;
    }
    

    点击出现桃心效果设置

    在主题文件夹下的 source\js 目录下新建一个 src 文件夹,在 src 文件中,新建一个 clicklove.js 文件,然后把下面的代码复制进去。

    !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
    

    接着,打开主题文件下的 layout 文件夹,用文本的方式打开 layout.swig 文件,在文末加上如下的代码:

    <!-- 页面点击小红心 -->
    <script type="text/javascript" src="/js/src/clicklove.js"></script>
    

    首页文章预览设置

    使用 < !–more–> 手动切断
    这种方法可以根据文章的内容,自己在合适的位置添加 < !–more–> 标签,使用灵活,也是Hexo推荐的方法。

    社交小图标设置

    在主题文件夹下的 config.yml 配置文件中,搜索 Social,然后提示自己增加自己需要的小图标并设置对应连接。

    底部隐藏由Hexo强力驱动、主题–NexT.Mist

    在主题文件夹下,打开 layout/partials/footer.swig 文件,注释掉相关代码如下所示,位置是文末。我修改的如下代码框所示:

    <!--
    {%- if theme.footer.beian.enable %}
      <div class="beian">
        {{- next_url('http://www.beian.miit.gov.cn', theme.footer.beian.icp + ' ') }}
        {%- if theme.footer.beian.gongan_icon_url %}
          <img src="{{ theme.footer.beian.gongan_icon_url }}" style="display: inline-block;">
        {%- endif %}
        {%- if theme.footer.beian.gongan_id and theme.footer.beian.gongan_num %}
          {{- next_url('http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=' + theme.footer.beian.gongan_id, theme.footer.beian.gongan_num + ' ') }}
        {%- endif %}
      </div>
    {%- endif %}
    
    <div class="copyright">
      {% set copyright_year = date(null, 'YYYY') %}
      &copy; {% if theme.footer.since and theme.footer.since != copyright_year %}{{ theme.footer.since }} – {% endif %}
      <span itemprop="copyrightYear">{{ copyright_year }}</span>
      <span class="with-love">
        <i class="fa fa-{{ theme.footer.icon.name }}"></i>
      </span>
      <span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright or author }}</span>
    
      {%- if config.symbols_count_time.total_symbols %}
        <span class="post-meta-divider">|</span>
        <span class="post-meta-item-icon">
          <i class="fa fa-area-chart"></i>
        </span>
        {%- if theme.symbols_count_time.item_text_total %}
          <span class="post-meta-item-text">{{ __('symbols_count_time.count_total') + __('symbol.colon') }}</span>
        {%- endif %}
        <span title="{{ __('symbols_count_time.count_total') }}">{{ symbolsCountTotal(site) }}</span>
      {%- endif %}
    
      {%- if config.symbols_count_time.total_time %}
        <span class="post-meta-divider">|</span>
        <span class="post-meta-item-icon">
          <i class="fa fa-coffee"></i>
        </span>
        {%- if theme.symbols_count_time.item_text_total %}
          <span class="post-meta-item-text">{{ __('symbols_count_time.time_total') }} &asymp;</span>
        {%- endif %}
        <span title="{{ __('symbols_count_time.time_total') }}">{{ symbolsTimeTotal(site, theme.symbols_count_time.awl, theme.symbols_count_time.wpm, __('symbols_count_time.time_minutes')) }}</span>
      {%- endif %}
    </div>
    
    {%- 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_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">
        {%- set next_site = 'https://theme-next.org' %}
        {%- if theme.scheme !== 'Gemini' %}
          {%- set next_site = 'https://' + theme.scheme | lower + '.theme-next.org' %}
        {%- endif %}
        {{- __('footer.theme') }} – {{ next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'}) }}
        {%- if theme.footer.theme.version %} v{{ next_version }}{%- endif %}
      </div>
    {%- endif %}
    
    {%- if theme.add_this_id %}
      <div class="addthis_inline_share_toolbox">
        <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{ theme.add_this_id }}" async="async"></script>
      </div>
    {%- endif %}
    
    {{- next_inject('footer') }}
    
    -->
    
    <div class="copyright">
      {% set copyright_year = date(null, 'YYYY') %}
      &copy; {% if theme.footer.since and theme.footer.since != copyright_year %}{{ theme.footer.since }} – {% endif %}
      <span itemprop="copyrightYear">{{ copyright_year }}</span>
      <span class="with-love">
        <i class="fa fa-{{ theme.footer.icon.name }}"></i>
      </span>
      <span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright or author }}</span>
    
    <div>
    <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
    <script>
        var now = new Date(); 
        function createtime() { 
            var grt= new Date("2/26/2020 05:20:00");//在此处修改你的建站时间
            now.setTime(now.getTime()+250); 
            days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
            hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
            if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
            mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
            seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
            snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
            document.getElementById("timeDate").innerHTML = " ❤ 欢迎您参观本蒟蒻的小窝 ❤ "+"  小窝已经陪我度过了 "+dnum+" 天 "; 
            document.getElementById("times").innerHTML = hnum + " 时 " + mnum + " 分 " + snum + " 秒"+" 永远年轻 ❤ 永远热泪盈眶 "; 
        } 
    setInterval("createtime()",250);
    </script>
    </div>
    
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    
    <div class="powered-by">
      <i class="fa fa-user-md"></i>
      <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>
    </div>
    
    
    <div class="theme-info">
      <div class="powered-by"></div>
      <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
    </div>
    

    设置网站图片 Favicon

    找到自己的喜欢的图标,下载下来,覆盖掉主题文件夹下的 source/images 目录里面的三张图片即可

    网页顶部进度加载条设置

    在主题文件夹的 config.yml 配置文件中,搜索到 pace 后,把其值改为 true 即可,然后选择一款你喜欢的样式。

    博客置顶设置

    安装插件

    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save
    

    在需要置顶的文章的 Front-matter 中加上 top 即可,数值越大表示等级越高,越靠前显示。

    ---
    title: this is my first blog
    date: 2019-04-14
    top: 100
    ---
    

    在主题文件夹中打开 layout/macro/post.swig 文件,定位到 post-header ,把下面的代码添加进去即可。

    {% if post.top %}
      <i class="fa fa-thumb-tack"></i>
      <font color=7D26CD>置顶</font>
    {% endif %}
    

    打赏功能设置

    在主题文件夹下打开 config.yml 配置文件中,定位到 reward,把微信收款码和支付宝收款码存放到项目根目录下的 source/uploads 里面(若没有 uploads 文件夹可以自己新建)。然后如下图所示修改相关配置,animation 这个字段是设置字体跳动,可以根据个人需求设置。

    文章底部版权信息设置

    在主题文件夹的 layout/macro 目录下,新建一个 my-copyright.swig 文件,把下面的代码复制进去。

    {% if page.copyright %}
    <div class="my_post_copyright">
      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
      
      <!-- JS库 sweetalert 可修改路径 -->
      <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
      <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
      <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
      <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
      <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
      <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
        <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功!"></i></span>
      </p>
      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> 转载请保留原文链接及作者。</p>  
    </div>
    <script> 
        var clipboard = new Clipboard('.fa-clipboard');
        $(".fa-clipboard").click(function(){
          clipboard.on('success', function(){
            swal({   
              title: "",   
              text: '复制成功',
              icon: "success", 
              showConfirmButton: true
              });
        });
        });  
    </script>
    {% endif %}
    

    在主题文件夹的 source/css/common/components/post/ 目录下,新建一个 my-post-copyright.styl 添加如下代码。

    .my_post_copyright {
      width: 85%;
      max-width: 45em;
      margin: 2.8em auto 0;
      padding: 0.5em 1.0em;
      border: 1px solid #d3d3d3;
      font-size: 0.93rem;
      line-height: 1.6em;
      word-break: break-all;
      background: rgba(255,255,255,0.4);
    }
    .my_post_copyright p{margin:0;}
    .my_post_copyright span {
      display: inline-block;
      width: 5.2em;
      color: #b5b5b5;
      font-weight: bold;
    }
    .my_post_copyright .raw {
      margin-left: 1em;
      width: 5em;
    }
    .my_post_copyright a {
      color: #808080;
      border-bottom:0;
    }
    .my_post_copyright a:hover {
      color: #a3d2a3;
      text-decoration: underline;
    }
    .my_post_copyright:hover .fa-clipboard {
      color: #000;
    }
    .my_post_copyright .post-url:hover {
      font-weight: normal;
    }
    .my_post_copyright .copy-path {
      margin-left: 1em;
      width: 1em;
      +mobile(){display:none;}
    }
    .my_post_copyright .copy-path:hover {
      color: #808080;
      cursor: pointer;
    }
    

    打开主题文加下的 layout/macro/post.swig 文件,找到如图所示的位置添加上下面这段代码。

    <div>
          {% if not is_index %}
            {% include 'my-copyright.swig' %}
          {% endif %}
    </div>
    


    打开项目根目录下的 source/css/common/components/post/post.styl 文件,在文末加上这句代码:

    @import "my-post-copyright"
    

    在 Markdown 文章中加入 copyright : ture

    配置项目根目录下的 config.yml 文件,此处配置会在第四章节,对接远程仓库(码农)的时候讲到,我们到这里还是用本的本地服务器进行测试,所以不用修改,默认就行。

    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://yoursite.com
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    

    网站底部字数统计设置

    在项目根目录下安装 hexo 插件。

    npm install hexo-wordcount --save
    

    打开主题文件夹下的 layout/partials/footer.swig 文件,在文末添加上下面这段代码。

    <div class="theme-info">
      <div class="powered-by"></div>
      <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
    </div>
    

    网站底部加上访问量

    打开主题文件夹下的 layout/partials/footer.swig 文件,在文末添加如下代码,位置如下图所示:

    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    
    <div class="powered-by">
      <i class="fa fa-user-md"></i>
      <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>
    </div>
    

    外链网易云音乐设置

    打开网易云,登录自己的账号,选择自己喜欢的一首歌,然后点击“生成外链播放器”,如下图所示


    打开主题文件夹下的 layout/macro/sidebar.swig 文件,自己找个合适的位置,把刚刚复制的代码放进去。我放置的位置如下图所示。

    文章内链接文本样式设置

    打开主题文件夹下的 source\css_common\components\post\post.styl 文件,然后在文末加上下面这段代码即可。

    // 文章内链接文本样式
    .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; //底部分割线颜色
      }
    }
    

    文章显示阅读数量设置

    在主题文件下的 config.yml 配置文件中,定位到 busuanzi_count,把 enable 的值修改为 true。

    # 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
    

    评论模块接入

    Valine

    对接码云的远程仓库

    在码云上创建一个公有仓库,并把公有仓库的链接保存下来。

    打开项目根目录下的 config.yml 配置文件,修改 deploy 的值。tpye 设置为 git,repo 则设置为刚刚新建的远程仓库链接。
    注意:冒号后面需要再加一个空格,不然会出现格式错误。

    在项目根目录下,打开 Git Bash,配置码云的用户和邮箱。

    git config --global user.name空格+你的码云的名字
    git config --global user.email空格+你的码云的邮箱
    

    安装hexo-deployer-git,安装成功图如下:

    npm install hexo-deployer-git --save
    


    一键部署到远程仓库,部署成功图如下:

    hexo g
    hexo deploy
    


    回到刚刚新建的远程仓库,刷新页面,可以发现本地博客的相关文件已经全部部署到远程仓库上了。

    配置免费域名
    在项目首页 -> 服务 -> Gitee Pages

    第一次用的用户,需要先绑定手机。

    绑定手机后重新进入,选择对应的分支,然后点击部署。等待之后,就会生成对应的访问连接。如下图所示。

    点击 Gitee Pages 生成的网站地址,即可远程访问自己的个人博客,但是,我们会发现博客上的样式都没有。
    打开项目根目录下的 config.yml 文件,修改 URL 部分的参数。
    url 字段的值修改为远程访问连接
    root 字段的值修改 /+远程仓库的名称

    重新部署

    hexo clean
    hexo g
    hexo d
    

    hexo博客next主题自定义友情链接页面

    在 hexo/themes/next/layout 目录下新建一个 link.swig文件,并写入以下内容:

    {% block content %}
      {######################}
      {### LINKS BLOCK ###}
      {######################}
      
        <div id="links">
            <style>
                .container .main-inner {
                    width: 1100px;
                }
                .links-content{
                    margin-top:1rem;
                }
                
                .link-navigation::after {
                    content: " ";
                    display: block;
                    clear: both;
                }
                
                .card {
                    width: 45%;
                    font-size: 1rem;
                    padding: 10px 20px;
                    border-radius: 4px;
                    transition-duration: 0.15s;
                    margin-bottom: 1rem;
                    display:flex;
                }
    
                @media(max-width: 1400px){
                    .card{
                        width: 40% !important;
                    }
                }
                .card:nth-child(odd) {
                    float: left;
                }
                .card:nth-child(even) {
                    float: right;
                }
                .card:hover {
                    transform: scale(1.1);
                    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
                }
                .card a {
                    border:none; 
                }
                .card .ava {
                    width: 3rem!important;
                    height: 3rem!important;
                    margin:0!important;
                    margin-right: 1em!important;
                    border-radius:4px;
                    
                }
                .card .card-header {
                    font-style: italic;
                    overflow: hidden;
                    width: 100%;
                }
                .card .card-header a {
                    font-style: normal;
                    color: #2bbc8a;
                    font-weight: bold;
                    text-decoration: none;
                }
                .card .card-header a:hover {
                    color: #d480aa;
                    text-decoration: none;
                }
                .card .card-header .info {
                    font-style:normal;
                    color:#a3a3a3;
                    font-size:14px;
                    min-width: 0;
                    overflow: hidden;
                    white-space: nowrap;
                }
    
                span.focus-links {
                    font-style: normal;
                    margin-left: 10px;
                    position: unset;
                    left: 0;
                    padding: 0 7px 0 5px;
                    font-size: 11px;
                    border-color: #42c02e;
                    border-radius: 40px;
                    line-height: 24px;
                    height: 22px;
                    color: #fff !important;
                    background-color: #42c02e;
                    display: inline-block;
                }
                span.focus-links:hover{
                    background-color: #318024;
                }
    
                .friends-btn{
                    text-align: center;
                    color: #555!important;
                    background-color: #fff;
                    border-radius: 3px;
                    font-size: 15px;
                    box-shadow: inset 0 0 10px 0 rgba(0,0,0,.35);
                    border: none!important;
                    transition-property: unset;
                    padding: 0 15px;
                    margin: inherit;
                }
    
                .friends-btn:hover{
                    color: rgb(255, 255, 255) !important;
                    border-radius: 3px;
                    font-size: 15px;
                    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
                    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
                    margin: inherit;
                    }
                }
            </style>
            <div class="links-content">
                <div class="link-navigation">
    
                    {% for link in theme.mylinks %}
                    
                        <div class="card">
                            <img class="ava" src="{{ link.avatar }}"/>
                            <div class="card-header">
                            <div><a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a> <a href="{{ link.site }}"><span class="focus-links">关注</span></a></div>
                            <div class="info">{{ link.info }}</div>
                            </div>
                        </div>
                    
                    {% endfor %}
    
                </div>
                {{ page.content }}
                </div>
            </div>
      
      {##########################}
      {### END LINKS BLOCK ###}
      {##########################}
    {% endblock %}
    

    然后修改 hexo/themems/next/layout/page.swig 文件,我的page.swig如下:

    {% extends '_layout.swig' %}
    {% import '_macro/sidebar.swig' as sidebar_template with context %}
    
      {% block title %}
        {%- set page_title_suffix = ' | ' + title %}
    
        {%- if page.type === 'categories' and not page.title %}
          {{- __('title.category') + page_title_suffix }}
        {%- elif page.type === 'tags' and not page.title %}
          {{- __('title.tag') + page_title_suffix }}
        
    <!-- 友情链接-->
    {% elif page.type === 'links' and not page.title %}{#
      #}{{ __('title.links') + page_title_suffix }}
      
        {%- elif page.type === 'schedule' and not page.title %}
          {{- __('title.schedule') + page_title_suffix }}
        {%- else %}
          {{- page.title + page_title_suffix }}
        {%- endif %}
      {% endblock %}
    
    {% block content %}
    
      <div class="posts-expand">
        {##################}
        {### PAGE BLOCK ###}
        {##################}
        <div class="post-block" lang="{{ page.lang or page.language or config.language }}">
          {% include '_partials/page/page-header.swig' %}
          {#################}
          {### PAGE BODY ###}
          {#################}
          <div class="post-body{%- if page.direction and page.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}">
            {%- if page.type === 'tags' %}
              <div class="tag-cloud">
                <div class="tag-cloud-title">
                  {{ _p('counter.tag_cloud', site.tags.length) }}
                </div>
                <div class="tag-cloud-tags">
                  {{ tagcloud({min_font: theme.tagcloud.min, max_font: theme.tagcloud.max, amount: theme.tagcloud.amount, color: true, start_color: theme.tagcloud.start, end_color: theme.tagcloud.end}) }}
                </div>
              </div>
            {% elif page.type === 'categories' %}
              <div class="category-all-page">
                <div class="category-all-title">
                  {{ _p('counter.categories', site.categories.length) }}
                </div>
                <div class="category-all">
                  {{ list_categories() }}
                </div>
              </div>
        
            {% elif page.type === 'schedule' %}
              <div class="event-list">
              </div>
              {% include '_scripts/pages/schedule.swig' %}
    
    
              <!-- 友情链接-->
    {% elif page.type === 'links' %}
        {% include 'links.swig' %}
        
            {% else %}
              {{ page.content }}
            {%- endif %}
          </div>
          {#####################}
          {### END PAGE BODY ###}
          {#####################}
        </div>
        {% include '_partials/page/breadcrumb.swig' %}
        {######################}
        {### END PAGE BLOCK ###}
        {######################}
      </div>
    
    {% endblock %}
    
    {% block sidebar %}
      {{ sidebar_template.render(true) }}
    {% endblock %}
    

    然后我们使用 GitBash 新建一个菜单栏

    命令位置:hexo根目录

    hexo new page "links"
    

    这样在 hexo/source 目录下会生成一个 links 文件夹,打开其中的 index.md 文件,在标题头中写入 type = “links” 这个属性头,如下:

    ---
    title: 友情链接
    date: 2019-06-28 20:46:16
    + type: "links"
    ---
    

    关闭这个页面的评论

    ---
    title: 友情链接
    date: 2019-06-28 20:46:16
    type: "links"
    + comments: false
    ---
    

    添加友链

    在主题配置文件 hexo/themes/next/config.xml 文件末尾添加:

    # 友情链接
    mylinks:
      - nickname: Sanarous     # 昵称
        avatar: https://bestzuo.cn/images/touxiang.jpeg    # 头像地址
        site: https://bestzuo.cn  #友链地址
        info: 码农人生
        
      - nickname: Sanarous     # 昵称
        avatar: https://bestzuo.cn/images/touxiang.jpeg    # 头像地址
        site: https://bestzuo.cn  #友链地址
        info: 码农人生
    

    菜单栏汉化

    保持这个格式就行,然后就会从上往下渲染到 links 页面,当然,菜单栏汉化需要在 next 主题目录下 languages 文件中找到 zh-CN 或者 zh-Hans.yml 文件,新增 links :
    文件位置:hexo/themes/next/languages/zh-CN.yml

    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      schedule: 日程表
      sitemap: 站点地图
      commonweal: 公益404
      top: 热门
    +  links: 友链
    

    嵌入视频

    <video width="100%"  src="视频地址" controls loop>
    Your browser does not support the <code>
    video</code> element.</video>
    
    HTML5<video>标签:
    width,视频播放器宽度属性,这里用100%表示自适应
    controls,显示控件属性,比如播放按钮、进度条、全屏等
    loop,循环属性,当媒介文件完成播放后再次开始播放
    src,要播放的视频的url
    autoplay,自动播放属性,视频就绪后马上播放,慎用
    height,视频播放器高度属性
    muted,音频静音属性,视频的音频输出被静音
    

    类似如下

    {% raw %}
    <div style="position: relative;width: 100%;height: 0;padding-bottom: 75%;">
    	<iframe src="//player.bilibili.com/player.html?aid=62931626&bvid=BV1D4411Q7uJ&cid=109319316&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;"> </iframe>
    </div>
    

    以next主题为例子,在next\source\css\custom\custom.styl下底部添加以下css代码:

    /*哔哩哔哩视频适配*/
    
    .bilibili {
        position: relative;
        width: 100%;
    }
    @media only screen and (max-width: 767px) {
        .bilibili {height: 15em;max-width: 25em;}
    }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
        .bilibili {height: 20em;max-width: 30em;}
    }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .bilibili {height: 30em;max-width: 40em;}
    }
    @media only screen and (min-width: 1200px) {
        .bilibili {height: 40em;max-width: 50em;}
    }
    

    插入视频时,加入标签块class="bilibili"到B站的iframe代码:

    <iframe class="bilibili" src="//player.bilibili.com/player.html?aid=53560289&bvid=BV1E4411s7g5&cid=93697201&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    

    3D云标签

    安装插件

    打开站点根目录下的 package.json 文件,添加依赖 “hexo-tag-cloud”: "2.* " 后执行 npm i。或者直接使用命令行安装:

    npm i hexo-tag-cloud --save
    

    配置插件

    打开博客根目录的配置文件 config.yml 并添加以下代码片段

    # hexo-tag-cloud 标签云 | see https://github.com/MikeCoder/hexo-tag-cloud
    tag_cloud:
      textFont: Trebuchet MS, Helvetica # 字体
      textColor: '#555' # 字体颜色
      textHeight: 25 # 字体高度
      outlineColor: '#E2E1D1' # 字体背景色
      maxSpeed: 0.1 # 标签云最大移动速度
    

    之后在主题目录下修改视图。主题不同,需要修改的文件也不同,此处以 NexT 主题为例,其他主题请参考插件文档。打开 layout/macro/sidevar.swig 文件,找到类名为 sidebar-inner 的 div 元素,在该元素中最后位置添加以下代码片段:

    {% if site.tags.length > 1 %}
    <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
    <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
    <div class="widget-wrap">
        <div id="myCanvasContainer" class="widget tagcloud">
        <canvas width="220" height="250" id="resCanvas" style="width=100%">
            {{ list_tags() }}
        </canvas>
        </div>
    </div>
    {% endif %}
    

    修改码云密码配置

    码云修改密码后会导致本地无法上传,也就无法更新博客。
    解决方案:打开控制面板/用户账户/凭据管理器;
    windows凭据,然后修改码云本地链接的密码,改成你更换后的密码。

    hexo文章加密

    安装hexo-blog-encrypt

    在hexo根目录下找到包文件package.json,最后添加如下代码:

    "hexo-blog-encrypt": "1.1.*"
    

    在"hexo-blog-encrypt": "1.1."与前一个内容需要有个,用于分隔,“hexo-blog-encrypt”: "1.1."末尾不用加,
    利用npm安装插件:

    npm install
    

    如果不是最新的版本,可以输入如下代码,进行更新操作:

    npm update
    

    在 hexo根目录下的_config.yml 中启用该插件

    添加如下代码:

    # Security
    ##
    encrypt:
        enable: true
    

    加密文章

    在文章开头格式中添加如下代码:

    ---
    title: hello world
    date: 2016-03-30 21:18:02
    tags:
        - fdsafsdaf
    password: Mike         
    abstract: Welcome to my blog, enter password to read.
    message: Welcome to my blog, enter password to read.
    ---
    
    password: 是该博客加密使用的密码
    abstract: 是该博客的摘要,会显示在博客的列表页
    message: 这个是博客查看时,密码输入框上面的描述性文字
    

    在使用的过程中遇到问题

    首先要确保hexo-blog-encrypt为最新版本,由于在hexo -g(generate)中容易出现差错,推荐按如下步骤执行:

    删除根目录下的db.json文件
    hexo clean
    hexo g
    hexo d
    

    同时也记录下next主题的一个bug

    有与github更新,不识别名为vendors的文件夹,导致打开博客后会出现空白页面。
    所以需要修改在next主题目录下的配置文件config.yml

    vendors:
      # Internal path prefix. Please do not edit it.
      _internal: vendors
    

    修改为:

    vendors:
      # Internal path prefix. Please do not edit it.
      _internal: lib
    

    同时要将hexo/public下的vendors目录重命名为lib,再上传,如果不想这么繁琐,就更新next主题,最新版本已经解决了这个问题。

    相册

    hexo new page "photo"
    

    主题文件下 config.yml
    打开language,在你选择的语言下增加

    photo: 相册  #翻译
    

    修改菜单 menu:

    photo: /当地目录/ || 图标 
    

    在blog文件夹/source下创建photos文件夹,在photos文件夹创建index.md文件,编辑index.md文件,写入以下代码:

    <style type="text/css">
        .header-inner{
             display: none;
        }
        .sidebar{
            display: none;
        }
        .content{
            margin-bottom: 360px;
        }
        .content-wrap{
           width: 100%;
           // box-sizing: content-box;
           padding: initial !important;
           background:url('https://s2.ax1x.com/2019/09/07/nlL4pR.jpg');
        }
    
        .main-inner{
            width: 100%;
        }
        .main {
            padding-bottom: 150px;
            margin-top: 0px;
            background:url('https://s2.ax1x.com/2019/09/07/nlL4pR.jpg');
        }
        .main-inner{
            margin-top: unset;
        }
        .page-post-detail .post-meta{
            display: none;
        }
        body {
            background-image: unset;
            background-attachment: unset;
            background-size: 100%;
            /*background-position: top left;*/
        }
        .header{
            background: rgba(28, 25, 25, 0.6);
            border-bottom: unset;
        }
        .menu .menu-item a{
                font-weight: 300;
                color: #e6eaed;
        }
        .footer-inner {
             padding-left: 0px;
        }
    
        img:hover {
            //opacity:0.8; /*透明度*/
            //filter:alpha(opacity=100); /* For IE8 and earlier */
        }
    
        .imgbox{
            margin-top: 20px;
            padding: 1px 10px;
            width: 100%;
            overflow: hidden;
            height: 250px;
            border-right: 1px solid #bcbcbc;
            background:url('https://s2.ax1x.com/2019/09/07/nlL4pR.jpg');
        }
        .box{
            visibility: visible;
            overflow: auto; 
            zoom: 1;
        }
        .box li{
            float: left;
            width: 25%;
            position: relative;
            overflow: hidden;
            text-align: center;
            list-style: none;
            margin: 0;
            /*display: inline;*/
            padding: 0;
            height: 360px;
        }
        .box li span{
            display: block;
            padding: 12% 7% 10% 7%;
            min-height: 80px;
            //background: #fff;
            color: #000080;
            font-size: 16px;
            font-weight: 600;
            line-height: 26px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    
        img.imgitem{
            padding: unset;
            padding: unset;
            border: unset;
            position: relative;
            padding: 0px;
            height: auto;
            width: 100%;
        }
    
        div#posts.posts-expand {
            border: unset;
            padding: unset;
            margin-bottom: 10px;
        }
        .posts-expand .post-body img{
            padding: 0px !important;
        }
        .box p{
            margin-top: -25px;
            display: block;
            background: #121212;
            color: #000080;
            font-size: 14px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
        }
    
        .box span strong{
            background: rgba(0,0,0,0.4);
            padding: 20px;
        }
    
        .posts-expand .post-title {
            display: none;
        }
    
        .title{
            margin: 10px auto;
            display: inline-block;
            vertical-align: middle;
            //background: url(/images/beichen.jpg);
            font: 85px/250px 'ChaletComprimeMilanSixty';
            //background-position: left bottom !important;
            background-position: center center !important;
            color: #fff;
            background-size: 100% auto !important; 
            -webkit-background-size: cover; 
            -moz-background-size: cover;
            -o-background-size: cover;
            width: 100%;
            text-align: center;
            border: unset;
            height: 560px;
            cursor: unset !important;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    
        @media (max-width: 767px){
            .box li {
                width: 98%;
            }
            .title {
                height: 200px;
            }
    
            .box span {
                min-height: 80px;
                border-right: unset;
                font-size: 17px;
            }
            .box p{
                border-right: unset;
                font-size: 12px;
    
            }
            .posts-expand {
                margin: unset;
            }
    
        }
    
        @media (min-width: 1600px){
    
            .container .main-inner{
                width: 100%;
            }
        }
    
    </style>
    
    <div id="box" class="box"></div>
    
    <script type="text/javascript">
       
       // 相册json
       var json = 
        [
            [
                {
                    'title': '七彩丹霞',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlRzZt.jpg'
                },
                {
                    'title': '9月雨后',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlRvqI.jpg'
                },
                {
                    'title': '五花肉',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlRbGD.jpg'
                },
                {
                    'title': '五花肉+1',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlRHPO.jpg'
                },
                {
                    'title': '别样的艳',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlRTIK.jpg'
                },
                {
                    'title': '远处的城堡',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlRXMd.md.jpg'
                },
                {
                    'title': '夕阳红',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlRqRe.md.jpg'
                },
                {
                    'title': '卢浮宫',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlRIVx.md.jpg'
                },
                {
                    'title': '景区一角',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlRhrR.md.jpg'
                },
                {
                    'title': '夕阳🌇',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlRbGD.md.jpg'
                },
                {
                    'title': '冰沟丹霞',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlRLxH.md.jpg'
                },
                {
                    'title': '别样的雨后',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlRRxJ.md.jpg'
                },
                {
                    'title': '卢浮宫',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlR4q1.md.jpg'
                }
            ],
            
            [
                {
                    'title': '世界之巅',
                    'url': 'https://s2.ax1x.com/2019/09/07/nl5540.md.jpg'
                },
                {
                    'title': '一天的行程',
                    'url': 'https://s2.ax1x.com/2019/09/07/nl56gS.md.jpg'
                },
                {
                    'title': '珠峰国家公园',
                    'url': 'https://s2.ax1x.com/2019/09/07/nl5RBj.md.jpg'
                },
                {
                    'title': '盘山公路',
                    'url': 'https://s2.ax1x.com/2019/09/07/nl54Nq.md.jpg'
                },
                {
                    'title': '保护区',
                    'url': 'https://s2.ax1x.com/2019/09/07/nl5LDJ.md.png'
                },
                {
                    'title': '珠峰大本营',
                    'url': 'https://s2.ax1x.com/2019/09/07/nlINGV.md.png'
                },
                {
                    'title': '氧气瓶',
                    'url': 'https://s2.ax1x.com/2019/09/07/nl5jER.md.jpg'
                },
                {
                    'title': '珠峰日出',
                    'url': 'https://s2.ax1x.com/2019/09/07/nl5cjg.md.jpg'
                },
                {
                    'title': '海拔最高的寺庙—绒布寺',
                    'url': 'https://s2.ax1x.com/2019/09/07/nl5hEn.md.jpg'
                }
            ]
        ]
        
        var content = json2Array(json);
            
        var wid = 250;
        if ((window.innerWidth) > 1200) {
            wid = (window.innerWidth*3)/18;
        }
        var box = document.getElementById('box');
        
        var i=0;
        for (var i = 0; i < content.length; i++) {
            var conBox = document.createElement("div");
            conBox.id = 'conBox'+i;
            box.appendChild(conBox);
            var item = document.createElement("div");
            var title = content[i][0].title;
            var url = content[i][0].url;
            item.innerHTML = "<button class = 'title' style = 'background: url(" + url + ");'><span style = 'display: inline;'><strong style = 'color:#f0f3f6;' >" + title + "</strong></span></button>";
            conBox.appendChild(item);
        
            for (var j = 1; j < content[i].length ; j++) {
                var _title = content[i][j].title;
                var _url = content[i][j].url;
                var item = document.createElement("li");
                item.innerHTML="<div class = 'imgbox' id = 'imgbox' style = 'height: " + wid + "px;'><img class = 'imgitem' src='" + _url + "' alt='" + _url + "'></div><span>" + _title +"</span>";
                conBox.appendChild(item);
            }
        }
        
        //json转二维数组
        function json2Array(arr) {
            for (var i=0; i<arr.length; i++) {
                var tmpArr = []
                for (var attr in arr[i]) {
                    tmpArr.push(arr[i][attr])
                }
                arr[i] = tmpArr
            }
            return arr
        }
    
    </script>
    

    图像修改的地方为:

    'title': '世界之巅',
    'url': 'https://s2.ax1x.com/2019/09/07/nl5540.md.jpg'
    

    图片链接和图像注释,背景图片修改地方为:

    background:url('https://s2.ax1x.com/2019/09/07/nlL4pR.jpg');
    

    多标签

    tag:(此处没空格)
    (空格)-(空格)标签一
    (空格)-(空格)标签二



    (空格)-(空格)标签N

    进度条

    在主题文件夹下面下载 Progress module

    git clone https://github.com/theme-next/theme-next-pace source/lib/pace
    

    在主题文件夹下的 config.yml 中设置:

    pace:  #是否开启进度条
      enable: true
      # Themes list:
      # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
      # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal   #样式
      theme: mac-osx #选择进度条样式
    

    动画特效

    js用绝对路径失效,百度也没百度出所以然,我还是太菜了,然后百度的增加页面的特效,打开主题文件 layout_partial目录下的footer.swig中添加如下代码:

    <!--浏览器搞笑标题-->
      <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/hititle.js"></script>
      <!-- 🌸飘落 -->
      <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/sakura.js"></script>
      <!-- 雪花飘落 -->
      <!-- <script src="https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/snow1.js"></script> -->
      <!-- // 文字 -->
      <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/shehuizhuyi.js"></script>
      <!-- // 烟花 -->
      <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 src="https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/fireworks.js"></script>
      <!-- // 星星跟随坠落 -->
      <script src="https://cdn.jsdelivr.net/gh/cungudafa/cdn@2.1.2/js/cursor.js"></script>
      <!-- // 爱心 -->
      <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/love.js"></script>
    
      <!--浏览器搞笑标题-->
      <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/hititle.js"></script>
      <!-- 🌸飘落 -->
      <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/sakura.js"></script>
      <!-- 雪花飘落 -->
      <!-- <script src="https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/snow1.js"></script> -->
      <!-- // 文字 -->
      <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/shehuizhuyi.js"></script>
      <!-- // 烟花 -->
      <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 src="https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/fireworks.js"></script>
      <!-- // 星星跟随坠落 -->
      <script src="https://cdn.jsdelivr.net/gh/cungudafa/cdn@2.1.2/js/cursor.js"></script>
      <!-- // 爱心 -->
      <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/love.js"></script>
      <!-- // 连线 -->
      <!-- <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/canvas-nest.min.js"></script>
      <script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> -->
      <!-- 样式二(飘动的彩带) -->
      <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/piao.js" type="text/javascript"></script>
       <!--背景切换-->
       <script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
    
    

    动画人物

    安装hexo-helper-live2d:

    $ npm install --save hexo-helper-live2d
    

    安装live2d:

    $ npm install (你需要的模型)
    

    配置:
    Hexo站点配置文件_config.yml,或者主题配置文件_config.yml中添加如下配置:

    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      tagMode: false
      debug: false
      model:
        use: (我需要的模型:live2d-widget-model-hibiki)
      display:
        position: right
        width: 150
        height: 300
      mobile:
        show: true
    

    在Hexo根目录中新建文件夹live2d_models,然后在node_modules文件夹中找到刚刚下载的live2d模型,将其复制到live2d_models中,然后编辑配置文件中的model.use项,将其修改为live2d_models文件夹中的模型文件夹名称。一切就绪之后,用hexo server命令启动服务器,稍等一下就可以看到右下角出现了一个可爱的萌萌哒的妹纸!

    添加PDF插件

    安装插件

    npm install --save hexo-pdf
    

    修改配置

    主题文件夹 config.yml

    pdf:
      enable: true
      # Default height
      height: 500px
    

    建立页面

    hexo new page book 
    

    根目录下执行

    npm i hexo-pdf -S
    

    编辑页面

    在index.md 写入

    {% pdf 文件链接 %}
    

    或者超链接

    <a href="文件链接">文件名</a>
    

    结语

    利用hexo Next 7.71这个主题搭建个人博客完工了,看了网上很多教程,当然也有坑,以上来源于对网上博客搭建教程总结,亲测有效,忘了有些文章作者地链接,如果本文侵犯了您的权限欢迎私聊,同时会放上您的博文链接,为此,对于技术学习欢迎探讨。现在真的认为计算机这个领域真的范围大,我应该静下心来好好学习,希望在这条路上走得更远。

    展开全文
  • hexo修改Next主题的样式

    千次阅读 2017-07-15 21:45:10
    主题样式是在\hexoBlog\themes\next\source\css,这里面保存了Muse,Mist和Pisces三个主题的css文件,例如,字体的边框的颜色还有字体图片的大小等就保存在next\source\css\_variables里. 而我要修改的body超链接的样式...
  • hexo next主题下,自动更换背景图片

    千次阅读 2018-08-27 15:24:22
    背景图片来源 (可根据自己的喜好更改) https://source.unsplash.com 修改背景样式 打开文档下themes\next\source\css\ _custom\custom.styl文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加...
  • 一直没有时间来整理下博客搭建的一些事情,现在补上一篇,给 Hexo Next 博客添加一个相册功能,使用瀑布流的方式。 原理说明 使用 github 作为仓库存储图片文件(图床) 使用 jsdelivr 进行图片 CDN 加速 优点 此...
  • 使用hexo NexT搭建个人博客 -v0.1 2021.5.24 Sherlock init 这篇文章记录一个简单个人博客的搭建过程,我们使用GitHub page + hexo + NexT主题的搭建方式。 整个搭建的环境是在一台arm64 ubuntu20.04机器上。 基础...
  • hexo next主题配置

    2016-05-05 14:43:00
    转自:http://www.jeyzhang.com/next-theme-personal-settings.html 提前说明: 假设网站的根目录为D:/Hexo/,也称为站点目录 站点配置文件是指网站目录下的_config.yml文件,即D:/Hexo/_config.yml 主题配置...
  • 记录 hexo next的 custom.stuyl记录custom.stuyl设置动态title侧栏加入已运行的时间增加站内文章搜索功能修改hexo/_config.yml站点配置文件,末尾新增以下代码: 记录custom.stuyl 位置themes\next\source\css\_custom...
  • 用于备份个人所用设置,有些方案收集...git clone https://github.com/theme-next/hexo-theme-next themes/next 修改站点配置文件 _config.yml,找到如下代码: ## Themes: https://hexo.io/themes/ theme: landsca...
  • Hexo NexT 主题初体验

    2018-07-25 02:15:14
    简谈 NexT 主题的配置和第三方的服务的接入。 前言 前一篇完成了简单个人主页的搭建,然而,追求美的脚步和好奇心的滋生,难以遏制。 NexT 主题配置 NexT 主题配置官网文档...$cd your-hexo-site # 新建名为 tags ...
  • Hexo NexT从源码级别高度定制

    千次阅读 2016-03-30 21:03:17
    玩转了几天Hexo静态博客之后,发现可配置的东西基本...Hexo NexT主题的文档结构/languages #用来配置国际化语言版本,里边包含各种个配置像的文本翻译。 /layout #以swig文件来定义各种含有配置信息调用的布局 /scripts
  • Hexo next主题中添加播放器Aplayer

    千次阅读 2020-02-07 14:51:18
    Hexo next主题中添加播放器Aplayer 下载 首先,先下载Aplayer源码:APlayer dist文件夹 再将文件中的dist文件夹复制到路径:blog/themes/next/source(我的next版本是7.5) 新建music.js 在目录blog/themes/...
  • HexoNext添加gitment评论

    2019-07-17 10:18:12
    [外链图片转存失败(img-lgduvPc5-1563329849975)( https://i.loli.net/2019/07/17/5d2e76ba6056846846.png )] 然后在 主题配置文件next config.yml中开启gitment 因为某个服务器挂了,所以mint要为false才会执行...
  • 【长更】 hexo next 日常问题解决方案

    千次阅读 2019-12-01 16:30:55
    1. 分页显示问题 参考:...修改: /Blog/themes/next/layout/_partials/pagination.swig {%- if page.prev or page.next %} <nav class="pagination"> {{ paginator(...
  • HexoNexT主题设置背景图片

    千次阅读 2020-03-15 07:58:04
    1)修改NexT配置文件 在NexT的配置文件中的custom_file_path参数下设置CSS样式文件style.styl的存储路径,我们可以在此文件中自定义使用自己的各种样式,此路径必须在Hexo根目录source文件夹下,建议设置成默认路径...
  • hexo主题配置一     hexo主题配置二    hexo主题配置三     hexo主题配置四     hexo主题配置五     Hexo博客提交百度和Google收录 &...
  • Hexo-Next主题设置头部图片

    千次阅读 2017-05-10 20:30:04
    Hexo-Next主题设置头部图片 先找一张图片,如bg.gif,把它放在 987860690.github.io\source\images 路径下 进入到 987860690.github.io\themes\hexo-theme-next\source\css\ _common\components\header 目录,...
  • 文章目录tip:没有耐心的可以直接看:正式在hexo next中加入懒加载(最下面)废话背景懒加载简单介绍引入js重点!敲黑板了!!!完善懒加载函数懒加载函数可配置的参数正式在hexo next中加入懒加载1:2:3:按我的...
  • hexo+github教程之三:hexo next主题配置

    千次阅读 2017-03-08 00:49:32
    到了这一步,相信你们都已经搭建好hexo博客,以及配置好github。下面开始讲解hexo主题配置。在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的...安装NexT
  • 网上很多关于主题美化的教程都是老版本 next 5.1 的,最近更新到 next 7 之后摸索了好久才找到简单有效的自定义主题方式,下面是具体的操作。 修改主题下 _config.yml 文件,找到下面这一部分,也即注释掉最后一行 ...
  • Hexo NexT 主题SEO优化指南

    千次阅读 2016-08-16 10:45:53
    当我们搭建一个网站之后,如果没有做一些相关的搜索引擎优化SEO,那么我们的网站是很难获取来自搜索引擎的流量的,用户很难在搜索引擎上搜索到我们网站的内容,所以接下来我们要为Hexo网站做一些简单的搜索优化。
  • 前提准备 你需要 python,以及下载python的插件工具pip; ... 创建相册文件夹(远程) ...照片的命名方式请按照yyyy-MM-dd_图片描述.png/jpg的格式,方便管理以及程序对照片进行处理 对照片进行处理
  • hexo个人博客 next主题添加背景图片

    万次阅读 热门讨论 2016-05-11 15:50:08
    前几天没事自己通过hexo加github搭建了一个自己的个人博客,用的是next主题,发现挺好用,捣鼓了半天终于把全部全部配置完了,但是想改给自己的博客添加一张背景图片,在网上找了很久没找到相关的资料,就自己开始...
  • 在使用 github pages + hexo + next 搭建了 Hexo 博客 并用了一段时间后,想对博客进一步进行定制和美化,记录在这里。过程中发现英文文档要比中文文档详细很多,基本上 thems/next/_config.yaml 中所涉及到的所有...
  • HexoHexo-NexT主题-博客搭建

    千次阅读 2020-12-14 11:38:09
    title: Hexo-NexT主题-博客搭建 date: 2020-02-14 13:49:27 tags: Hexo Next 生活 学习 categories: Hexo-NexT description: 为了记录我的大学生活的学习,在2020春节前决定搭建一个自己的博客来记录自己大学四年...
  • 最详细的Hexo Next主题配置教程

    万次阅读 2016-12-24 21:03:17
    安装Git(必须)作用:把本地的hexo内容提交到github上去.安装Xcode就自带有Git,我就不多说了。申请GitHub(必须)作用:是用来做博客的远程创库、域名、服务器之类的,怎么与本地hexo建立连接等下讲。安装hexoNode...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,056
精华内容 422
关键字:

hexonext修改图片