橘子的小站

豆瓣书单电影页面 首先需要检查 hexo 的版本，在博客的根目录下执行 hexo -v 命令就可以检查版本，这个豆瓣插件需要的版本 < 4.2.0，否则会出现 bug。解决办法为降低 hexo 的版本，先卸载当前 hexo 版本，再安装低于 4.2.0 的版本即可。 $ npm uninstall hexo$ npm install hexo@4.0.0 -g 首先在博客站点目录执行下面的命令安装豆瓣插件： $ npm install hexo-douban --save 接着在博客根目录的配置文件_config.yml下，添加如下配置： douban: user: 252345665 #这个需要修改为你个人的id builtin: false #如果想生成豆瓣页面，这个需要设置为true book: title: 'This is my book title' quote: 'This is my book quote' movie: title: ' ...

添加天气小插件     首先去和风天气官网，注册完成后，配置自己的插件，选择自定义插件 ——> 自定义样式 ——> 生成代码，然后会生成一段代码，复制粘贴到themes/matery/layout/layout.ejs即可。

鼠标点击文字特效     实现方法，引入 js 文件，在主题文件下的/source/js/下新建click_show_text.js，其代码如下： var a_idx = 0;jQuery(document).ready(function ($) { $("body").click(function (e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = ...

添加动态诗词     采用的是今日诗词，每次返回一句诗词，根据时间、地点、天气、事件智能推荐。官网有API 文档，可以去看一下，有多种安装方式，最简单的方式就是从官网获取代码，在/themes/matery/layout/_partial/head.ejs添加下面的一行代码： <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>     然后再将/themes/matery/layout/_partial/bg-cover-content.ejs中的<%= config.description %>修改为<span id="jinrishici-sentence">正在加载今日诗词....</span>' %>，这个使用前提是将主题配置文件的subtit ...

修改导航栏颜色以及透明效果     打开themes/matery/source/css/matery.css文件，大约在 250 行，有一个.bg-color属性，修改其属性值即可，代码如下： .bg-color { background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值 opacity: 0.8; //透明效果 值范围 0~1，看情况自己修改}

动态标题 效果图如下：     实现方法，引入 js 文件，在主题文件下的/source/js/下新建FunnyTitle.js，然后在添加到themes/matery/layout/layout.ejs或者添加到themes/matery/layout/_partial/head.ejs，其代码如下： <!--浏览器搞笑标题--> var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/f ...

写在最前面 本帖的主要目的是用最简单的语言描述博客美化的进程，同时在每个章节为可能涉及的知识点提供相应的工具网站以供读者学习。当然，最重要的是给我自己留个魔改的日记。这样升级主题玩崩了也能找到回家的路。 Matery 主题美化 主题美化会涉及到 js 文件和 css 文件等的修改，个人建议新增的 js 文件放在themes/matery/layout/layout.ejs这个文件下，这样会稍微加快博客访问的速度。不想花钱最好的方式是使用 cdn.jsdeliver。 动态标题 动态标题https://lavender-z.github.io/2020/12/28/Blog/32645/ 修改导航栏颜色以及透明效果 修改导航栏颜色以及透明效果https://lavender-z.github.io/2020/12/28/Blog/56936/ 添加动态诗词 添加动态诗词https://lavender-z.github.io/2020/12/28/Blog/7087/ 鼠标点击文字特效 添加动态诗词https://lavender-z.github.io/2020/1 ...

本篇文章仅介绍简单的使用，详情请参照官方文档 写在最前面 在利用 hexo 和 Github Page 搭建好博客后，会发现系统提供的主题都是一样的，看着感觉不太舒服，这时候我们可以选择自己利用 JavaScript、css 等对博客的板块进行设计（自己做别人眼中的大佬~），也可以在 Github上搜索一些大佬们设计的主题，然后 clone 下来进行使用。 下面就来介绍一下利用 Matery 主题来继续完成博客的搭建。 安装 点击 传送门 下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到你 Hexo 的 themes 文件夹中即可。 当然你也可以在你的站点目录文件夹下使用git clone命令来下载：直接在站点根目录下执行下面的命令，即可进行主题的下载，主题有两个版本，稳定版本和最新版本 (不定期更新优化)，自主选择版本。 git clone https://github.com/blinkfox/hexo-theme-matery themes/matery # 稳定版git clone -b devel ...

本篇文章仅介绍简单的使用，详情请参照官方文档 写在最前面 在利用 hexo 和 Github Page 搭建好博客后，会发现系统提供的主题都是一样的，看着感觉不太舒服，这时候我们可以选择自己利用 JavaScript、css 等对博客的板块进行设计（自己做别人眼中的大佬~），也可以在 Github上搜索一些大佬们设计的主题，然后 clone 下来进行使用。 下面就来介绍一下利用 Butterfly 主题来继续完成博客的搭建。 安装 Github安装Gitee安装npm安装稳定版【建议】 在博客根目录里 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly 测试版 测试版可能存在 Bugs 最新的内容可在这里下载 git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly 升级方法：在主题目录下，运行git pull 稳定版【建议】 ...

写在最前面 博客的搭建有很多种，可以利用第三方平台，也可以自建。比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、SegmentFault、简书、掘金、知乎专栏、Github Page 等等。 这次我要介绍的就是利用 Github Page 和 Hexo 搭建个人博客的方式。Github Page 是 Github 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源，这次我们的主角就是 Hexo 了，具体的内容下面在文章内介绍。下面就开始吧~ 准备工作 Node.js 和 Git 的安装是搭建个人博客的第一步。下面我会详细的介绍如何安装 Node.js 和 Git。 点击查看 Node.js安装与配置Git安装与配置Github注册以及Github Pages创建配置Git用户名和邮箱首先去Node.js官网，下载 node.js 的安装程序，根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤。 下载好与电脑系 ...