当前分类 / Hexo / 总共13篇

想继续使用Valine或LeanClound存储的快绑定域名

· 大约 200 个字 · 预计 1 分钟 读完
Hexo · Hugo · 优化
Hexo · Valine · LeanClound · 域名绑定 · Hugo

在开始前先做一个简单科普，很多朋友在使用评论功能的时候可能留意到了 Valine 这个插件，它是一个很好用的评论插件，但是可能有一部分人并不知道这个插件实现评论的原理，其实它的评论存储服务是依赖于 LeanClound 的，这个 LeanClound 实际上是一个云服务器提供商，只不过它比较人道的是提供了一个开发版环境（虽然资源很小，云引擎只有 0.5CPU 256MB，但是数据库却是够用的），我们实际上是使用了它提供的数据存储服务，而且 LeanClound 为我们提供了一套 JavaScript SDK 来操作数据库，也就是我们要引入的一个 js 文件：

1

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.15.0/dist/av-min.js"></script>

实际上 Valine 就是基于这套 api 来实现数据的插入和查询，然后展现到我们的博客，这样我们就很透彻的理解了它们之间的关系了，接下来进入我们今天的正题。

阅读更多

博客更换ICARUS主题

· 大约 1600 个字 · 预计 8 分钟 读完
Hexo · icarus主题
Nodejs · Hexo · Theme · 主题 · icarus

前言

最近无意间留意到一个比较符合我口味的主题，也许是因为Next主题被我看腻了，于是就换了icarus然后接下来当然是各种折腾，总算是告一段落可以安心的做别的事情了。

主题介绍

主题地址：https://github.com/ppoffice/hexo-theme-icarus

这个主题可以完全替代Next主题，比较让我喜欢的是简洁大气的界面风格，另外还有细致的侧边栏以及订制功能，总结一下特点如下：

  1. 整体的界面美观大方。
  2. Icarus包含常用的搜索，评论，分享和其他插件。
  3. 可设置文章头图片。
  4. 超过70种highlight.js样式可选。
  5. 可以自定义侧边栏。
  6. 字体风格漂亮。
  7. 可在文章内自定义菜单。
  8. 响应式布局。

阅读更多

Hexo主题（Next）美化、配置、优化这一篇就够了

· 大约 800 个字 · 预计 4 分钟 读完
Hexo · Next主题
Hexo · Next · 配置 · 插件 · 美化

前言

最近一段时间把我的博客重新美化了一番，今天就对这些工作做一个总结，并把方法归纳出来分享给大家，希望大家也能把自己的博客做成自己想要的样子，大概工作如下：

  • 实时更新Next主题
  • 添加可爱的小猫挂件
  • 添加Chat聊天挂件
  • 添加分享挂件
  • 添加音乐界面
  • 添加Valine评论邮件通知
  • 添加相册界面

这些美化功能大部分只需要你花费半个小时左右就可以搞定了，我们马上开始吧！

阅读更多

Hexo使用PythonSDK整站静态发布七牛云

· 大约 800 个字 · 预计 4 分钟 读完
Hexo · 优化
Hexo · 七牛 · Python

前言

最近因GitLab的国内访问速度问题将本站静态化到了七牛云存储，但是带来的问题也是很明显的。之前在GitLab使用Page来发布工程只需要提交代码即可，会自动静态化并部署项目，于是乎我就想让静态化并同步到七牛对象存储自动化一些，这也是这篇文章的初衷。

其实在用Python做自动同步之前，我使用的官方提供的一个Window上面的同步工具QSunSync,但是使用起来也不是很方便，最主要的原因是不太符合我整站同步的需求，而且速度极慢。

Python SDK

官网为我们提供了基础的对象存储操作SDK, 点击查看

安装Python SDK

1

pip install qiniu

整个同步过程如下：

  1. 拉取七牛云文件列表。
  2. 获取本地文件列表。
  3. 对比远程文件是否有增量（多余的），进行删除。
  4. 对比本地文件是否有增量（新增的）或者有变化（hash不同），进行上传。

阅读更多

Hexo主题开发手记（1）

· 大约 600 个字 · 预计 3 分钟 读完
Hexo · 主题开发
Hexo · 主题

最近抽空学习了一下前端的基础知识，在之前我也抽空看了相关知识，但是发现没有实践而且不够系统，所以索性这次借着hexo博客搭建来巩固和实践一下所学。

准备

虽然我们是开发hexo的博客主题，但是为了方便我们开发中调试和预览，所以我们还是首先得安装hexo到我们本地目录。

1

hexo init 搭建hexo主题

注意，上面的“搭建hexo主题”是我本地的一个目录。

然后发布，http://localhost:4000 查看

1
2

cd 搭建hexo主题
hexo server

hexo主题 hexo主题

阅读更多

Hexo博客七牛图床最优做法

· 大约 200 个字 · 预计 1 分钟 读完
Hexo · 优化
Hexo · 七牛 · 图床 · CDN

就在昨天，我的新域名备案成功并正式上线了，于是就想到了去七牛做一个图片图床来加速网站访问速度。

令人欣喜的是七牛有10GB的免费存储和20GB下载流量,而且还享有20元/月配额的音视频处理。

七牛免费配额 七牛免费配额

所以我果断从七牛和又拍云之间选择了七牛来做图床。

搜了一下关于七牛图床相关的文章，结果发现都不是自己想要的效果，我想要达到的效果有：

  1. 不能破坏本地markdown书写和预览图片的方便性。
  2. 不能破坏迁移和修改的方便性。
  3. 不影响之前发布的文章，并且能快速切换到七牛图床和其他图床。
  4. 无感知的自动完成，不需要关心这层操作。

基于上面这些想法，我就有了一个基本思路，首先复制备份，然后通过qshell来实现批量上传和同步图片，接着批量替换文章中的<img src=” 字符串后面追加七牛存储的自定义域名。

阅读更多

pug模板引擎（下）

· 大约 1500 个字 · 预计 8 分钟 读完
Hexo · 主题开发
Nodejs · 模板引擎 · pug

逻辑语法

以下是关于模板逻辑的语法。

JavaScript代码

不输出的代码

用 - 开始一段不直接进行输出的代码。

1
2

- for (var x = 0; x < 3; x++)
  li item

生成后

1
2
3

<li>item</li>
<li>item</li>
<li>item</li>

输出的代码

用=开始一段带有输出的代码，它应该是可以被求值的一个 JavaScript 表达式。为安全起见，它将被 HTML 转义。

1
2
3

p
  = '这个代码被 <转义> 了！'
p= '这个代码被 <转义> 了！'

生成后

1
2
3

<p>这个代码被 &lt;转义&gt; 了！
</p>
<p>这个代码被 &lt;转义&gt; 了！</p>

不转义的输出代码

用 != 开始一段不转义的，带有输出的代码。这将不会做任何转义，所以用于执行用户的输入将会不安全。

1
2
3

p
  != '这段文字<strong>没有</strong>被转义！'
p!= '这段文字' + '<strong>没有</strong>被转义!'

生成后

1
2

<p>这段文字<strong>没有</strong>被转义！</p>
<p>这段文字<strong>没有</strong>被转义！</p>

阅读更多

pug模板引擎（上）

· 大约 600 个字 · 预计 3 分钟 读完
Hexo · 主题开发
Nodejs · 模板引擎 · pug

安装 

1

sudo npm install pug

但命令行提示 pug 命令未找到，接下来安装 pug-cli,注意一定要全局安装，否则无法正常编译。

1

sudo npm install pug-cli -g

查看版本

1
2
3

>>> $ pug --version
pug version: 2.0.3
pug-cli version: 1.0.0-alpha6

生成HTML

新建文件命名为index.pug

1
2
3
4

html
    head
        title dp2px
    body

在命令行输入

1
2

>>> $ pug index.pug 
rendered index.html

你会发现在同目录生成了一个 index.html 文件，内容如下

1

<html><head><title>dp2px</title></head><body></body></html>

接下来我们使用pug -w实现自动编译。

1

>>> $ pug index.pug -w

我使用的 VS Code,你可以让你的编辑器左右两边显示，方便实时查看。

pug

阅读更多

Hexo打造可以自由配置的网站通知和页面通知

· 大约 400 个字 · 预计 2 分钟 读完
Hexo · 优化
Nodejs · Hexo · Next · 网站通知 · 网站广播

最近本站要更换域名，所以我就想做一个首页和文章内通知，于是就有了这篇文章。

首先打开 theme/next/layout/_layout.swig 文件找到如下代码中的 content-wrap 节点。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

 <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            {% block content %}{% endblock %}
          </div>
          {% include '_third-party/duoshuo-hot-articles.swig' %}
          {% include '_partials/comments.swig' %}
        </div>
        {% if theme.sidebar.display !== 'remove' %}
          {% block sidebar %}{% endblock %}
        {% endif %}
      </div>
    </main>

在 content-wrap 节点中添加下面代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{% if theme.main_notify.enable%}
      {% if theme.main_notify.pageshow %}
         {% if page.notify === '' %}
           <p class="content-notify marquee">{{ theme.main_notify.notify }}</p>
         {% else %}
          <p class="content-notify marquee">{{ page.notify }}</p> 
         {% endif %}
       {% elseif page.notify !== '' %}
         <p class="content-notify marquee">{{ page.notify }}</p>
       {% elseif page.title === ''%}
         <p class="content-notify marquee">{{ theme.main_notify.notify }}</p>
       {% endif %}
{% endif %}

上面这段代码的逻辑是判断是否要显示通知，我们实际的通知布局只就是 <p> 标签。

1

<p class="content-notify marquee">通知的内容</p>

阅读更多

Hexo Next博客配置和SEO优化

· 大约 600 个字 · 预计 3 分钟 读完
Hexo · 优化
Nodejs · Hexo · Next · SEO · CDN

SEO优化

在Gitlab上面搭建的博客，最近又买了域名给搭建了起来，文章有了，但是发现百度和Google的索引量比较少，乘着国庆假期抽空又折腾了一番，添加了百度和google收录，更换了静态资源cdn地址，对静态资源进行了压缩。

静态资源压缩 静态资源压缩

百度收录

在搜索引擎中输入site:<域名>， 如果没有被收录可以点击“网址提交”来提交网站。百度链接提交

生成站点地图

我们需要使用npm自动生成网站的sitemap，然后将生成的sitemap提交到百度和其他搜索引擎。

1
2

npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save

阅读更多

Hexo next 博客增加瀑布流相册页面

· 大约 600 个字 · 预计 3 分钟 读完
Hexo · 优化
Hexo · photos · 相册 · 瀑布流

参考：asdfv1929’s Home - Hexo NexT主题内添加相册功能

要展示自己拍摄的一些照片，可以给博客添加一个瀑布流的相册页面。

1. 创建页面和导航栏

首先新建相册页面 hexo new page photos，这样会在 /source/ 下创建 photos/index.md，在其中添加 type: picture。

之后在主题配置文件中对应位置 menu 里添加 photos: /photos || camera-retro ，这样生成后就有导航栏菜单了。

2. json 文件处理图片信息

在博客根目录的 /scripts/ 文件夹下新建一个 phototool.js 文件，内容如下。主要功能是访问照片文件夹，获取每张照片的大小和文件名，并生成对应的 json 文件：

阅读更多