From a890df7a0e81c6d8c4bc191e08b0d28731660d0c Mon Sep 17 00:00:00 2001 From: penghh <602646761@qq.com> Date: Wed, 17 Jan 2024 00:41:53 +0800 Subject: [PATCH] update_210518_article_pic --- source/_posts/2021-5-18-blogupdate.md | 46 +++++++++++++-------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/source/_posts/2021-5-18-blogupdate.md b/source/_posts/2021-5-18-blogupdate.md index 93fbf7c..c04574f 100644 --- a/source/_posts/2021-5-18-blogupdate.md +++ b/source/_posts/2021-5-18-blogupdate.md @@ -14,15 +14,15 @@ Hello 大家好，我是安哥。 * [hexo-theme-next](https://github.com/iissnan/hexo-theme-next) 主题 -![hexo-theme-next](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/PicGo/image-20210514211522989.png) +![hexo-theme-next](https://img.penghh.fun/PicGo/image-20210514211522989.png) * [hexo-theme-matery](https://github.com/blinkfox/hexo-theme-matery)：最近刚看到博客主题，页面左下角带有播放音乐的控件 -![image-20210514215136167](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/PicGo/image-20210514215136167.png) +![image-20210514215136167](https://img.penghh.fun/PicGo/image-20210514215136167.png) * [hexo-theme-fluid](https://github.com/fluid-dev/hexo-theme-fluid)：我的博客目前正在使用的 Hexo 主题 -![image-20210514215958123](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/PicGo/image-20210514215958123.png) +![image-20210514215958123](https://img.penghh.fun/PicGo/image-20210514215958123.png) ## 如何为 Hexo 博客换上不同的主题？ @@ -30,11 +30,11 @@ Hello 大家好，我是安哥。 点击绿色的「Code」按钮，选择「Download ZIP」，下载整个项目的源文件。 -![-w1520](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212610267455.jpg) +![-w1520](https://img.penghh.fun/2021/05/18/16212610267455.jpg) 将下载的 ZIP 文件解压，将解压后的整个文件放进 Hexo 博客的 themes 文件夹中。 -![-w1112](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212615371840.jpg) +![-w1112](https://img.penghh.fun/2021/05/18/16212615371840.jpg) 下载下来的主题一般都会带有主题作者的信息，在应用到自己的博客之前，需要先进行修改。 @@ -42,7 +42,7 @@ Hello 大家好，我是安哥。 以我在用的 Hexo 主题「hexo-theme-fluid」为例，主题的作者写了一份详细的「配置指南」，给初次使用第三方主题的人提供了非常详细的指导。 -![-w1520](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212648922137.jpg) +![-w1520](https://img.penghh.fun/2021/05/18/16212648922137.jpg) Hexo 主题「hexo-theme-fluid」配置文档： *https://hexo.fluid-dev.com/docs/guide/* @@ -57,7 +57,7 @@ Hexo 主题「hexo-theme-fluid」配置文档： 为博客添加 RSS 订阅链接，需要安装一个插件「hexo-generator-feed」，具体可以参照 GitHub 上的一个项目「hexo-generator-feed」。 -![-w1520](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212660487438.jpg) +![-w1520](https://img.penghh.fun/2021/05/18/16212660487438.jpg) hexo-generator-feed 项目地址： *https://github.com/hexojs/hexo-generator-feed* @@ -71,7 +71,7 @@ hexo-generator-feed 项目地址： cd workspace/hexo_blog ``` -![-w1152](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212663991058.jpg) +![-w1152](https://img.penghh.fun/2021/05/18/16212663991058.jpg) 进入 Hexo 博客项目文件所在的位置后，输入下方的命令安装「hexo-generator-feed」插件： @@ -81,13 +81,13 @@ npm install hexo-generator-feed --save 安装了插件后，我们还需要对插件进行配置，插件项目的说明文档也对配置进行了说明： -![-w1520](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212667655383.jpg) +![-w1520](https://img.penghh.fun/2021/05/18/16212667655383.jpg) 说明文档中配置的参数比较多，但其实我们可以偷懒，不需要配置那么多参数。 打开博客项目文件夹中的配置文件 `_config.yml`，可以用记事本打开，也可以用代码编辑器，例如微软推出的 VS Code 打开。 -![-w1112](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212673979375.jpg) +![-w1112](https://img.penghh.fun/2021/05/18/16212673979375.jpg) 打开配置文件，滑动到文件的最底部，在最底部加上下方的内容： @@ -99,7 +99,7 @@ feed: limit: false ``` -![-w1066](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212674929381.jpg) +![-w1066](https://img.penghh.fun/2021/05/18/16212674929381.jpg) 修改好 `_config.yml` 文件后，按下快捷键 Ctrl + S 保存我们的修改。 @@ -107,7 +107,7 @@ feed: 以下图为例，我进入了我使用的 Hexo 主题「fluid」的文件夹中，其中也有一个名为 `_config.yml` 的配置文件，同样使用记事本或者代码编辑器打开它。 -![-w1112](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212677314446.jpg) +![-w1112](https://img.penghh.fun/2021/05/18/16212677314446.jpg) 同样滑动到配置文件的末尾，在空白处加上下面的一行内容： @@ -115,7 +115,7 @@ feed: rss: /atom.xml ``` -![-w1066](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212680030990.jpg) +![-w1066](https://img.penghh.fun/2021/05/18/16212680030990.jpg) 加入上面的一行代码之后，同样 Ctrl + S 保存文件。 @@ -125,11 +125,11 @@ rss: /atom.xml 如果你有使用 RSS 阅读器来获取信息的习惯，可以将我博客的 RSS 链接添加到你的 RSS 阅读器中： -![-w1400](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212686091065.jpg) +![-w1400](https://img.penghh.fun/2021/05/18/16212686091065.jpg) 这部分给 Hexo 博客生成 RSS 订阅链接的内容，参考了网友 @千古壹号 写的内容，原文如下，可扫码阅读： -![QRcode_A — a1](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/qrcodea--a1.png) +![QRcode_A — a1](https://img.penghh.fun/2021/05/18/qrcodea--a1.png) ## 添加单篇博客阅读量统计 @@ -143,7 +143,7 @@ rss: /atom.xml * views * leancloud -![-w1066](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212694034937.jpg) +![-w1066](https://img.penghh.fun/2021/05/18/16212694034937.jpg) 譬如，我使用的 Hexo 主题「fluid」就写好了统计阅读量的代码，只是缺少相应的配置，默认就无法统计单篇文章的阅读量。 @@ -151,29 +151,29 @@ rss: /atom.xml 首先需要打开 Leancloud 的官网，注册一个账号，注册好账号之后，点击左上角的按钮，创建一个应用。 -![-w1520](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212698785178.jpg) +![-w1520](https://img.penghh.fun/2021/05/18/16212698785178.jpg) 创建时「应用名称」可以随你自由命名，下方的「应用计价方案」选择「**开发版**」就好，不需要花钱，接着点击右下角的蓝色按钮「创建」。 -![-w1520](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212699186782.jpg) +![-w1520](https://img.penghh.fun/2021/05/18/16212699186782.jpg) 创建好应用之后，打开应用的「设置 >> 应用 Keys」，页面中有两个参数，一个是 **AppID**，一个是 **AppKey**。 这两个参数下方的值等会要用到，暂时不要把网页关掉。 -![-w1520](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212701931820.jpg) +![-w1520](https://img.penghh.fun/2021/05/18/16212701931820.jpg) 回到博客主题的配置文件中，搜索 Leancloud，如下图所示，可以看到 leancloud 下方有两个需要配置的参数，一个是 **app_id**，一个是 **app_key**，这两个参数的值就分别对应上面说到的 **AppID** 和 **AppKey**。 -![-w1066](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212704379312.jpg) +![-w1066](https://img.penghh.fun/2021/05/18/16212704379312.jpg) 接着我们还要开启每篇博客的数据统计的功能，在博客主题配置文件中搜索关键字 view。 每篇博客的数据统计 views 下方有两个参数，一个是 enable，将其设置为 enable 或 true 都可以；一个是统计的来源 source，设置为 leancloud。 -![-w1066](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212718906462.jpg) +![-w1066](https://img.penghh.fun/2021/05/18/16212718906462.jpg) 完成以上配置之后，将所有变更 Push 到服务器，稍等一小会，刷新自己的博客，一般情况下，就可以在每篇博客的顶部看到阅读量的统计数据了。 -![-w1742](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212721365539.jpg) +![-w1742](https://img.penghh.fun/2021/05/18/16212721365539.jpg) ## 交换博客「友情链接」 @@ -185,7 +185,7 @@ rss: /atom.xml 你的博客链接的位置，我已经留好了。 -![-w1742](https://article-picbed-1302715071.cos.ap-guangzhou.myqcloud.com/2021/05/18/16212724879342.jpg) +![-w1742](https://img.penghh.fun/2021/05/18/16212724879342.jpg) 以上，希望有帮助。