当前分类 / 优化 / 总共10篇

想继续使用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 来实现数据的插入和查询,然后展现到我们的博客,这样我们就很透彻的理解了它们之间的关系了,接下来进入我们今天的正题。

阅读更多

使用 Hugo + Algolia 进行静态站点搜索 [译]

本文翻译自:Static site search with Hugo + Algolia 原作者:Chris Macrae

我们将介绍如何使用搜索服务提供商 Algolia 为你的 Hugo 网站设置快如闪电的搜索服务,Algolia 自称它们是 “建立搜索业务的最可靠平台”,我们将使用 Hugo 的自定义输出格式为我们的静态站点生成 JSON 搜索索引。然后我们将在 Algolia 上进行必要的配置,并使用 npmatomic-algolia 将新索引发送给 Algolia。最后使用 Serverless 简化更新搜索索引。

为什么选择 Algolia

有很多静态网站的搜索解决方案。您可以使用前端 Javascript 和 Lunr.jsFuse.js 等工具滚动自己的搜索,使用 ElasticSearchAmazon CloudSearch 建立强大的开源搜索技术,或者像 Algolia 这样的 SaaS 解决方案。所以问题是,是什么让 Algolia 如此出色?答案归结为两个因素:

阅读更多

百度站内搜索的坑

使用 Hugo 之后默认支持的是 Google 站内搜索,但是考虑到国内很多用户无法访问 Google 计划添加百度的站内搜索功能,但是遇到了一些坑,幸运的是最后还是巧妙的解决了问题。

生成百度站内搜索代码

进入官网:https://zn.baidu.com/cse/home/index?back=1&sid=16079160899252056172

新增一个站内搜索框:

百度站内搜索创建

创建过程中要注意了,这里有很多样式可选,当然你也可以不使用官方样式,而是使用你自己的搜索框样式:

创建自有样式搜索

如上图建议你点击 查看帮助 阅读一下内容,然后我们给博客的搜索框 <input> 添加 id="bdcsMain",我的搜索代码如下:

阅读更多

Python脚本实现的百度熊掌号链接提交

我们为了提高网站的收录量,最好通过API主动提交给搜索引擎,之前在 Hexo 中有比较好用的 hexo-baidu-url-submit 插件,而使用 hugo 后没找到比较合适方便的,于是便想到使用 python 提交到百度服务器,根据官方文档和示例,使用 http.client 实现的 POST 提交。

http.client 模块定义实现了 HTTP 和 HTTPS 协议的客户端类,API 如下:

class http.client.HTTPConnection(host, port=None, [timeout, ]source_address=None, blocksize=8192)

HTTPConnection 的实例代表与 HTTP 的一个连接事务。 它的实例化应当传入一个主机和可选的端口号。 如果没有传入端口号,如果主机字符串的形式为 主机:端口 则会从中提取端口,否则将使用默认的 HTTP 端口(80)。 如果给出了可选的 timeout 参数,则阻塞操作(例如连接尝试)将在指定的秒数之后超时(如果未给出,则使用全局默认超时设置)。 可选的 source_address 参数可以为一个 (主机, 端口) 元组,用作进行 HTTP 连接的源地址。 可选的 blocksize 参数可以字节为单位设置缓冲区的大小,用来发送文件类消息体。

举个例子,以下调用都是创建连接到同一主机和端口的服务器的实例:

>>> h1 = http.client.HTTPConnection('www.python.org')
>>> h2 = http.client.HTTPConnection('www.python.org:80')
>>> h3 = http.client.HTTPConnection('www.python.org', 80)
>>> h4 = http.client.HTTPConnection('www.python.org', 80, timeout=10)

此模块中定义的常量为:

http.client.HTTP_PORT HTTP 协议默认的端口号 (总是 80)。

http.client.HTTPS_PORT HTTPS 协议默认的端口号 (总是 443)。

阅读更多

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

前言

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

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

Python SDK

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

安装Python SDK

pip install qiniu

整个同步过程如下:

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

阅读更多

Hexo博客七牛图床最优做法

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

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

七牛免费配额

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

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

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

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

阅读更多

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

阅读更多

使用GitHub/GitLab/码云搭建个人博客

我为什么要搭建个人博客

前段时间我在用印象笔记做一些整理和知识归纳,感觉很不舒服,后来装了一个马克飞象花了了70多人名币用来作为印象笔记的markdown编辑器,这样确实舒服了不少。

但是紧接着我就想既然总结了一些东西干嘛不发布到我的博客上去呢(当时我的博客在CSDN),我只能从马克飞象中复制黏贴到博客上去,感觉又重复写了一遍,瞬间有了一键部署博客的想法。

hexo install

后来我结合我之前在github上搭建的个人博客,百度了一下看有没有GitLab和码云上面的类似博客系统,结果还真让我给找到了,不但找到了而且个人感觉非常棒,接下来来看看我是怎么做的。

阅读更多