Hexo基于Butterfly的修改公告栏文字样式
效果 教程如果你想要修改公告栏的文字样式，只需在主题配置文件_config.butterfly.yml 中写入如下配置： 1234aside: card_announcement: enable: true content: <center><b>--- 竹山一叶 ---<br><a href="https://blog.yazan.top/" title="这里可以显示超链接" class="anno_content"><font color="#5ea6e5">还可以控制链接的颜色</font></a><br><a href="https://blog.yazan.top/xxx.zip" title="点这里可以下载网站的资源" class="anno_content"><font...
网站恶搞标题
预览 教程1.新建文件source\js\title.js，写入以下内容： 1234567891011121314151617//动态标题var OriginTitile = document.title;var titleTime;document.addEventListener('visibilitychange', function () { if (document.hidden) { //离开当前页面时标签显示内容 document.title = '👀跑哪里去了~'; clearTimeout(titleTime); } else { //返回当前页面时标签显示内容 document.title = '🐖抓到你啦～'; //两秒后变回正常标题 titleTime = setTimeout(function () { document.title = OriginTitile; },...
Hexo博客添加自定义css和js文件
如果你还没阅读过官方文档强烈建议去过一遍官方文档，能解决很多别人看起来很弱智的问题。为别人好也为自己好。Butterfly 创建文件如果想魔改和美化，添加自定义文件是不可避免的。下面来详细说一下css和js文件的创建和引入，其他文件同理。 我们找到博客根目录下的source文件夹（主题的source虽然也可以，但是不推荐）在里面创建js和css文件夹，也可以创建其他文件夹，例如存放图片的img文件夹，存放字体的font文件夹等等。 引入文件一般来说，我们都是在主题配置文件（_config.butterfly.yml）里面的inject引入。（不知道这个文件的去看文档）css文件一般在head引入，js文件一般在bottom里引入，特殊情况除外。 例如引入css文件夹里面的style.css和js文件夹里面的script.js，可以这样写: 123456789101112inject: head: # 自定义css - <link rel="stylesheet" href="/css/style.css?1">...
hexo基于butterfly的图流背景与顶部图修改
前言之前使用过 hexo基于butterfly的页脚美化 的请注意侧边栏透明化。 操作1.设置图片这个是 Butterfly 自带的功能，修改主题的配置文件 _config.butterfly.yml. 编辑 index_img、background、footer_img 选项。设置网站背景，并将主页顶部图和页脚背景改为透明。(需要将以下示例地址替换为自己的图片地址。) 12345678910111213141516# Image (圖片設置)# --------------------------------------# The banner image of home pageindex_img: transparent# Beautify/Effect (美化/效果)# --------------------------------------# Website Background (設置網站背景)# can set it to color or image (可設置圖片 或者 顔色)# The formal of image:...
Hexo基于butterfly文章页透明效果
前言在不妨碍正常阅读的情况下想更好地展示背景或者一些效果，实现文章页透明是一种不错的选择。 操作1.在 \themes\butterfly\source\css 路径下创建一个 xxx.css 文件，在文件中添加如下代码： 123456789/* 首页文章栏背景透明 */#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post { background: var(--light_bg_color)}/* 侧边栏透明 */#aside-content .card-widget { background: var(--light_bg_color)} 2.然后将该文件引入到_config.butterfly.yml 文件中 inject 的 head 处： 1-...
hexo基于butterfly的页脚美化
操作1.在 \themes\butterfly\source\js 目录下创建一个 js 文件，将如下代码写入该文件: 12345678910111213141516171819202122232425262728// 动态心跳$(document).ready(function(e){ $('.copyright').html('©2024 - 2025 <i class="fa-fw fas fa-heartbeat fa-beat" style="color: #f92672;"></i> By 海伦泽');})$(document).ready(function(e){ show_date_time();})//本站运行时间function show_date_time(){$('.framework-info').html('本站已运行<span...
通过 bat 脚本实现 hexo 常用功能菜单
前言广大的 Hexo 用户：你是否面对每天重复且繁杂的 hexo new、hexo new page、hexo g、hexo cl 等等这些命令感到厌烦？ 重复的命令动作天天敲，而且有时候容易搞错混淆，我们是否可以通过脚本的方式实现它自动化？比如只需要写一个 Windows 的 bat 脚本，我们可以轻松实现只需要输入相应选项，即可自动进行这些命令操作。 功能介绍以及演示 创建新文章：提示用户输入文章名称，然后使用 Hexo 创建一篇新文章。 创建新页面：提示用户输入页面名称，然后使用 Hexo 创建一个新页面。 生成静态文件：使用 Hexo g 生成静态文件。 创建文章并自动打开 Typora 编辑器：提示用户输入文章名称，然后使用 Hexo new 创建一篇新文章，并自动打开 Typora 编辑器以便用户编辑（请确定 Typora 在系统的环境变量里面，不然无效，可以自己根据实际需求更改代码替换编辑器）。 本地运行网站并自动打开浏览器：启动 Hexo 本地服务器，并在本地服务器启动后 5s（这里等待 5s 是为了避免本地服务器未完全启动导致打开...
Hexo基于butterfly的侧边栏添加微博热搜
示例： 教程 1.在\themes\butterfly\layout\includes\widget目录下新建card_weibo.pug文件，并写入如下代码： 12345678if theme.aside.card_weibo.enable .card-widget.card-weibo .card-content .item-headline i.fab.fa-weibo span 微博热搜 #weibo-container .weibo-list 2.在\themes\butterfly\layout\includes\widget\index.pug文件中page项添加如下代码： 12!=partial('includes/widget/card_weibo', {}, {cache:...
