当前分类 / Hexo / 总共13篇

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

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

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

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

阅读更多

博客更换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)美化、配置、优化这一篇就够了

前言

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

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

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

阅读更多

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

前言

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

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

Python SDK

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

安装Python SDK

pip install qiniu

整个同步过程如下:

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

阅读更多

Hexo主题开发手记(1)

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

准备

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

hexo init 搭建hexo主题

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

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

cd 搭建hexo主题
hexo server

hexo主题

阅读更多

Hexo博客七牛图床最优做法

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

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

七牛免费配额

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

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

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

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

阅读更多

pug模板引擎(下)

逻辑语法

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

JavaScript代码

不输出的代码

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

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

生成后

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

输出的代码

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

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

生成后


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

不转义的输出代码

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

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

生成后

​```xml

这段文字没有被转义!

这段文字没有被转义!

阅读更多

pug模板引擎(上)

安装

sudo npm install pug

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

sudo npm install pug-cli -g

查看版本

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

生成HTML

新建文件命名为index.pug

html
    head
        title dp2px
    body

在命令行输入

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

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

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

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

>>> $ pug index.pug -w

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

pug

阅读更多

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

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

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

 <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 节点中添加下面代码

{% 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> 标签。

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

阅读更多

Hexo Next博客配置和SEO优化

SEO优化

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

静态资源压缩

百度收录

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

生成站点地图

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

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

阅读更多

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

参考: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 文件:

阅读更多