当前位置: 首页 > news >正文

【腾讯云 Cloud Studio 实战训练营】Hexo 框架 Butterfly 主题搭建个人博客

什么是Cloud Studio

Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能在线编程。

在这里插入图片描述

Hexo 博客成品展示

本人博客如下:haiyong.site

请在此添加图片描述

请在此添加图片描述

准备工作

首先打开Cloud Studio平台:https://cloudstudio.net/,需要注册登录,实名认证,然后我们进入模板页面

请在此添加图片描述

往下拉点击Hexo后进入,系统会自动部署所需要的所有环境

请在此添加图片描述

部署主题

选择主题,可以选择自己喜欢的主题。

主题链接:Themes | Hexo

我比较喜欢 Butterfly 主题,功能很全,样式也很好看

请在此添加图片描述

修改 Hexo 根目录下的_config.yml,把主题改为 butterfly:

theme: butterfly

请在此添加图片描述

安装插件

如果你没有 pug 以及 stylus 的渲染器,需要下载安装:

BASH

npm install hexo-renderer-pug hexo-renderer-stylus --save

请在此添加图片描述

cd ./ && set port=4000 && export PORT=4000 && yarn install && yarn run server --port=4000
yarn install v1.22.19

请在此添加图片描述

Hexo 基础修改

修改网站关键信息

Hexo 初始化后,博客网站有一些关键信息是默认的,需要修改为我们自己的信息。

网站资料

修改网站各种资料,例如标题、副标题和邮箱等个人资料,请修改博客根目录的站点配置文件 _config.yml:

# Site
title: 海拥
subtitle: '一枚乐于分享技术与快乐的博主'
description: ''
keywords:
author: haiyong
language: zh-CN
timezone: ''

保存后运行下段代码重新编译并部署即可看到站点标题

cd ./ && set port=4003 && export PORT=4003 && yarn install && yarn run server --port=4003

请在此添加图片描述

导航菜单

修改主题配置文件 themes/butterfly/_config.yml

menu:首页: https://haiyong.site/ || fas fas fa-home导航||fas fa-list:时间线: /archives/ || fas fa-archive标签: /tags/ || fas fa-tags摸鱼||fas fa-fish:游戏: /moyu/ || fas fa-gamepad工具: /tools/ || fas fa-tools动画: /demo/ || fas fa-anchor摸鱼大军: /chat/ || fas fa-place-of-worship友人帐: /link/ || fas fa-link关于我: /about/ || fas fa-heart

请在此添加图片描述

保存后运行下段代码重新编译并部署即可看到导航栏

cd ./ && set port=4004 && export PORT=4004 && yarn install && yarn run server --port=4004

请在此添加图片描述

背景图咱们也修改一下

修改主题配置文件 themes/butterfly/_config.yml

background: url(https://haiyong.site/img/bizhi/bg.jpg)

请在此添加图片描述

保存后运行下段代码重新编译并部署即可看到背景

cd ./ && set port=4006 && export PORT=4006 && yarn install && yarn run server --port=4006

请在此添加图片描述

Butterfly 主题优化

生成文章唯一链接

Hexo的默认文章链接格式是年,月,日,标题这种格式来生成的。如果你的标题是中文的话,那你的URL链接就会包含中文,

复制后的URL路径就是把中文变成了一大堆字符串编码,如果你在其他地方用这边文章的url链接,偶然你又修改了改文章的标题,那这个URL链接就会失效。为了给每一篇文章来上一个属于自己的链接,写下此教程,利用 hexo-abbrlink 插件,A Hexo plugin to generate static post link based on post titles ,来解决这个问题。 参考github官方: hexo-abbrlink 按照此教程配置完之后如下:

1、安装插件,在博客根目录 [Blogroot] 下打开终端,运行以下指令:

npm install hexo-abbrlink --save

2、插件安装成功后,在根目录 [Blogroot] 的配置文件 _config.yml 找到 permalink:

- permalink: :year/:month/:day/:title/
#修改为
+	permalink: post/:abbrlink.html # post为自定义前缀
+ abbrlink:
+	    alg: crc32   #算法: crc16(default) and crc32
+	    rep: hex     #进制: dec(default) and hex

请在此添加图片描述

鼠标点击效果

zIndex建议只在-19999上选
-1 代表烟火效果在底部
9999 代表烟火效果在前面

修改主题配置文件 themes/butterfly/_config.yml

fireworks:enable: truezIndex: 9999 # -1 or 9999mobile: false

请在此添加图片描述

完成后重新编译并部署

请在此添加图片描述

网站副标题

可设置主页中展示的网站副标题或者自己喜欢的座右铭

修改主题配置文件 themes/butterfly/_config.yml

# Site
title: Hexo
subtitle:enable: true# Typewriter Effect (打字效果)effect: true# loop (循环打字)loop: true# 如果关闭打字效果,subtitle 只会显示 sub 的第一行文字sub:- 但承青莲有侠志,莫道红尘无剑仙。- 一生疏狂尽余欢,半剖肝胆入剑寒。- 昨日前事皆可弃,明月松风抱剑来。- 扶摇直上九万里,万里写入胸怀间。- 剑至高危入蜀道,生逢穷途行路难。- 江湖风雨染白衫,黑云万里不见天。- 席卷英豪天下来,千古化境一念同。- 欲买桂花同载酒,终不似,少年游。- 温水煮了将军梦,现实压垮少年肩- 时人不识凌云木,直待凌云始道高	- 骏马自知前程远,不必扬鞭自奋蹄。

请在此添加图片描述

完成后重新编译并部署

cd ./&&set port=4006&&exportPORT=4006&& yarn install && yarn run server --port=4006

请在此添加图片描述

说了这么多,那么怎么发布文章呢,让我们先在/hexo-demo/source/_posts/下新建一个 .md 文件,支持 Markdown 格式。

请在此添加图片描述

写完后重新编译并部署,现在可以看到我们的文章了。

在这里插入图片描述

到这里我们的博客也算基本完成了,当然还有更多的美化需要花更多时间的,另外,有什么问题都可以在评论区告诉我,看到了我都会第一时间为大家解答。

相关文章:

【腾讯云 Cloud Studio 实战训练营】Hexo 框架 Butterfly 主题搭建个人博客

什么是Cloud Studio Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能在线编程。 ​ Hexo 博客成品展示 本人博客如下&…...

搭建Excel服务器

1、下载Excel服务器 下载地址 2、解压文件 3、打开服务器 4、服务器运行信息 5、连接测试 打开客户端 6、登录到服务器 默认账号 密码 admin 3 修改文件保存路径(服务器端点击配置) 7、客户端整体界面 8、配置权限 9、设计模板 10、其他用户登录就可以填写信息 11、用户&#…...

渗透测试成功的8个关键

渗透测试 (penetration test)并没有一个标准的定义,国外一些安全组织达成共识的通用说法是:渗透测试是通过模拟恶意黑客的攻击方法,来评估计算机网络系统安全的一种评估方法。这个过程包括对系统的任何弱点、技术缺陷或漏洞的主动分析&#x…...

【leetcode】链表part2

24. 两两交换链表中的节点 迭代方法 public static ListNode swapPairs(ListNode head) {// 输入:head [1,2,3,4]// 输出:[2,1,4,3]ListNode dummy new ListNode(0);dummy.next head;ListNode cur dummy;while (cur.next ! null && cur.ne…...

C#数据类型转换

目录 1.常用的数据类型: ​编辑1.1别名概念例子: 输出结果: 2.数值类型之间的相互转换: 2.1举例: ​编辑输出结果: 1.常用的数据类型: 1.1别名概念例子: 输出结果: 用GetType来获取数据类型的时候,就是指向System.Byte和System.Char这个…...

mybatis-plus逻辑删除的坑

一旦在逻辑字段上加了TableLogic逻辑删除的配置,并且使用mybatis-plus自带的方法时(如果自己用xml写SQL不会出现下面的情况) 查询、修改时会自动排除逻辑删除的数据 当使用mybatis-plus自带的查询方法时,就不用每次查询的时候跟…...

SQL Server基础之游标

一:认识游标 游标是SQL Server的一种数据访问机制,它允许用户访问单独的数据行。用户可以对每一行进行单独的处理,从而降低系统开销和潜在的阻隔情况,用户也可以使用这些数据生成的SQL代码并立即执行或输出。 1.游标的概念 游标是…...

(二)结构型模式:4、组合模式(Composite Pattern)(C++实例)

目录 1、组合模式(Composite Pattern)含义 2、组合模式应用场景 3、组合模式的优缺点 4、组合模式的UML图学习 5、C实现组合模式的简单示例(公司的OA系统) 1、组合模式(Composite Pattern)含义 组合模…...

flask接口请求频率限制

pip install Flask-Limiter Flask-Limiter官方文档 基本使用 默认是用IP作为key进行计数的,你也可以自定义key,具体看官网 from flask import Flask from flask_limiter import Limiter from flask_limiter.util import get_remote_addressapp Flas…...

javaweb监听器和juery技术

监听servlet创建 package com.hspedu.listener;import javax.servlet.ServletContext; import javax.servlet.ServletContextEvent; import javax.servlet.ServletContextListener;/*** 老韩解读* 1. 当一个类实现了 ServletContextListener* 2. 该类就是一个监听器* 3. 该类可…...

C++并发多线程--std::unique_lock的使用

目录 1--std::unique_lock的使用 1-1--std::adopt_lock参数 1-2--std::try_to_lock参数 1-3--std::defer_lock参数 1-4--互斥量所有权转移 1--std::unique_lock的使用 常用成员函数: ① lock(): 加锁; ② unlock(): 解锁; ③ try_lock()…...

【ChatGLM】ChatGLM-6B模型Win+4GB显卡本地部署笔记

ChatGLM-6B是清华大学知识工程和数据挖掘小组发布的一个类似ChatGPT的开源对话机器人,由于该模型是经过约1T标识符的中英文训练,且大部分都是中文,因此十分适合国内使用。 预期环境 本机电脑备注: Win10专业版 32G内存256固态系统…...

青翼科技自研2路250MSPS DA回放FMC子卡模块

FMC150_V30是一款基于VITA57.1规范的2路125MSPS采样率16位分辨率AD采集、2路250MSPS采样率16位分辨率DA回放FMC子卡模块。该模块遵循VITA57.1规范,可直接与符合VITA57.1规范的FPGA载卡配合使用,板卡ADC器件采用ADI公司的AD9268芯片,板卡DAC器…...

硬件产品经理:从入门到精通(新书发布)

目录 简介 新书 框架内容 相关课程 简介 在完成多款硬件产品从设计到推向市场的过程后。 笔者于2020年开始在产品领域平台输出硬件相关的内容。 在这个过程中经常会收到很多读者的留言,希望能推荐一些硬件相关的书籍或资料。 其实,笔者刚开始做硬…...

Opencv-C++笔记 (17) : 模板匹配

文章目录 1--概念2-- 方法3 结果3.1 ROI区域的获取使用自适应目标匹配 1–概念 opencv 提供了一个专门用于模板匹配的函数 cv::matchTemplate();其调用方式如下: void cv::matchTemplate(cv::InputArray image, // 用于搜索的输入图像, 8U 或 32F, 大小 W-Hcv::Inpu…...

Maven(四)常用命令大全

目录 一、mvn 命令参数二、mvn 插件命令1.介绍2.查看插件的使用文档3.常用的插件命令 官网地址: https://maven.apache.org/官方插件清单: https://maven.apache.org/plugins/index.html Maven 是一个强大的构建工具,它提供了许多命令来进行项…...

13.3 目标检测和边界框

锚框的计算公式 假设原图的高为H,宽为W 详细公式推导 以同一个像素点为锚框,可以生成 (n个缩放 m个宽高比 -1 )个锚框 锚框的作用: 不用直接去预测真实框的四个坐标,而是: 1.先生成多个锚框。 2.预测每个锚框里是否含有要预测…...

TCP/IP网络江湖初探:物理层的奥秘与传承(物理层上篇-基础与本质)

〇、引言 在这个数字时代,计算机网络如同广袤的江湖,数据在其中畅游,信息传递成为了生活的常态。然而,在这个充满虚拟奇观的网络江湖中,隐藏着一个不容忽视的存在,那就是物理层,这个江湖的基石。就如同江湖中的土地一样,物理层作为计算机网络的基础,承载着数据的最初转…...

计算机视觉五大核心研究任务全解:分类识别、检测分割、人体分析、三维视觉、视频分析

目录 一、引言1.1 计算机视觉的定义1.1.1 核心技术1.1.2 应用场景 1.2 历史背景及发展1.2.1 1960s-1980s: 初期阶段1.2.2 1990s-2000s: 机器学习时代1.2.3 2010s-现在: 深度学习的革命 1.3 应用领域概览1.3.1 工业自动化1.3.2 医疗图像分析1.3.3 自动驾驶1.3.4 虚拟现实与增强现…...

linux -- centos -- cmake 留坑

安装Cmake 在Linux一个目录下: touch poj.cpp touch CMakeLists.txtpoj.cpp的内容:随便输出一点东西啦 CMakeLists.txt的内容: cmake_minimum_required(VERSION 3.6) project(Test) add_executable(Test test.cpp)cmake_minimum_required:c…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...