Hexo NexT主题自定义背景图片

已于 2022-05-27 11:46:19 修改
阅读量3.8k 收藏 21
点赞数 20
分类专栏： リテンセキＰ与Hexo 文章标签： hexo github css html
于 2020-10-31 21:20:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52116176/article/details/109406842
版权
本文介绍了如何在Hexo的NexT主题中自定义背景图片，包括尝试修改样式文件失败的经验，以及最终通过添加新CSS文件实现个性化背景的方法。
摘要由CSDN通过智能技术生成

文章目录

前言

初衷

Hexo是一个基于Node.js的静态网页生成器，我将它与Github Page搭配使用，创建我的个人博客网站。
但是相信大家绝对不会只用原版简陋的Landscape主题吧……
于是，我结合大佬们的建议、参阅了无数Hexo个人网站后 决定用NexT主题。我选的是Gemini:-)

个性化之路

虽说NexT很不错，但是依然达不到预期的效果。

  • 单调的灰白背景
  • 想要单击效果
  • 没有评论功能
  • ……

正文

方法1（失败）

单调的灰白背景谁也不喜欢。谁都想自己找张好看的图片放上去。
本着“Baidu is your friend”的原则，我找到了好多方法。
不过
这些教程清一色的让我们修改themes\next\source\css\ _custom\custom.styl这个文件。

“这个是Next故意留给用户自己个性化定制一些样式的文件”

我 怎 么 没 有 这 东 西
这是因为版本更新NexT改掉了一些文件

于是我自己偷偷新建了一个themes\next\source\css\ _custom\custom.styl……
仍 然 不 好 使（废话
另外，在themes\next\_config.yml中有一个方法

最低0.47元/天 解锁文章
リテンセキＰ
关注
专栏目录
Hexo NexT 添加背景图片
Hoohoo的博客
03-04 3904
背景 Hexo和NexT的版本如下： Hexo: 5.4.0 NexT: 8.2.2 由于在配置博客中选择的Hexo的next主题，由于该主题较为单调，所以希望添加一张背景图片。 因为版本比较新，尝试了许多其他人的方法，发现并不可行，但在themes/next/_config.yml配置文件搜索custom时发现了以下代码： # Define custom file paths. # Create your custom files in site directory `source/_data` an
Hexo Next为每篇文章设置自定义的banner图片
左未的博客
07-23 4805
小试牛刀 想完成这样一个功能： 顶部banner默认读取images/background.jpg，当进入文章页面的时候，判断文件夹内是否存在header-banner.jpg图片存在，有就优先使用它。 之前改变banner图是直接在custom.styl里改变.header-inner里的background属性的。 现在当然要在javascript中改。 首先我找到了整个宏观布局定义的代码...
Hexo之静态+动态背景设置
计算机幻觉：）
11-20 6441
写在前面　　实现背景图更换及平铺，以及引入动态背景（可交互）
给hexo个人博客 next主题添加背景图片
W_C__L的博客
05-11 3万+
前几天没事自己通过hexo加github搭建了一个自己的个人博客，用的是next主题，发现挺好用，捣鼓了半天终于把全部全部配置完了，但是想改给自己的博客添加一张背景图片，在网上找了很久没找到相关的资料，就自己开始捣鼓，下面将修改方案贴出来。 首先找到一个背景图片放到 hexo（hexo工程文件）-> themes -> next -> source -> images 的路径下； hexo（hexo
Hexo+next的侧边栏背景与字体颜色设置方法
个人博客
08-17 3442
由于next主题经过了几次更新，查阅了许多资料都说要修改custom.styl这个配置文件，但是我的主题内没有此文件，经过翻阅大量的资料，终于找到了侧边栏的配置文件位置。
hexo中的背景设置
weixin_44018363的博客
04-06 2208
转载：https://blog.csdn.net/Com_ma/article/details/76039859
hexo博客的背景设置
Faith的博客
07-25 1万+
主要有以下30种： 在右上角或者左上角实现fork me on github添加RSS添加动态背景实现点击出现桃心效果修改文章内链接文本样式修改文章底部的那个带#号的标签在每篇文章末尾统一添加“本文结束”标记修改作者头像并旋转博文压缩修改“代码块自定义样式侧边栏社交小图标设置主页文章添加阴影效果在网站底部加上访问量添加热度网站底部字数统计添加 README.md 文件设置网站的图标Favic
Hexo-Next主题博客个性化配置
weixin_44245220的博客
05-23 1361
Hexo版本：6.2.0、NextT版本：7.8.0 一、主题安装 打开Git Bash，cd到站点根目录，输入 git clone https://github.com/theme-next/hexo-theme-next themes/next 打开站点根目录下的_config.yml文件，landscape修改为next ## Themes: https://hexo.io/themes/ theme: next 二、使用须知 Hexo根目录下的配置文件_config.yml，以下称作站点配.
Hexo博客优化之Next主题美化
热门推荐
huangpiao
01-26 5万+
前言 有了前面几篇博客的介绍，我们就可以很容易的搭建并编辑我们的博客了，不过既然是属于自己的博客网站，自然也就想让其更加美观，更有意思，所以呢我下面介绍一下Hexo博客的主题美化操作。 1. Next主题 Hexo博客支持很多主题风格，其中Next主题是Github上Star最多的主题，其一直在更新维护，支持非常多的外部插件和功能选项。我目前使用的是Next6.0版本，下面我会介绍基于Ne...
hexo自定义css样式
weixin_43827114的博客
02-18 5598
文章目录自定义CSS部分彩色标签心形转动分类底栏修改配置文件解释站点配置文件主题配置文件 个人博客https://www.renke666.top 尽管在配置文件中做了修改美化了博客，但原有样式还是比较简陋，修改的话就需要自定义CSS样式。这也算是美化博客的一大步进展吧，踩了很多坑。 这篇算是博客的美化部分暂时完结之作，花了很多的精力去美化，整体从十二月初断断续续的忙，寒假初期忙了会也算是忙了有两...
Hexo-inside主题-背景全透明
12-14
Hexo，inside主题，简体中文hans， 放在themes\inside\source目录下。 背景全透明
hexo-theme-random：具有随机全屏背景图像的hexo主题
02-20
六主题随机 具有随机全屏背景图像的十六进制主题。 演示版 如果你 倾向于使用全屏图片作为背景图片 不喜欢在帖子列表中显示文章摘要 不喜欢在帖子列表中使用分页 这个主题似乎很适合您。 截屏 安装 在博客根路径中执行以下命令： git clone https://github.com/stiekel/hexo-theme-random.git themes/random 修改hexo主配置文件_config.yml的theme设置，如下所示： theme : random 头像 您可以在hexo主配置文件或主题配置文件中配置头像，如下所示： avatar : http://7te9fe.com1.z0.glb.clouddn.com/default_avatar.jpg 导航链接配置 导航链接位于首页和其他页面顶部，您可以在主题配置文件theme/random/_config.yml
Hexo博客主题Next添加动态线条背景canvas_nest
river106的博客
09-14 1309
为了美化Hexo博客，可以给博客添加动态线条背景，这里使用canvas_nest，同样地，如果再添加第三方主题，也可以同样配置，比如我们点击时显示爱心。2、修改配置：themes/next/_config.yml。Hexo 版本：5.4.0。Next版本：8.7.1。
Hexo设置动态背景图的动态更新
最新发布
ordinary_brony的博客
02-04 894
在[这篇文章中](https://blog.csdn.net/ordinary_brony/article/details/136019684)，我们学习了如何设置固定数量的动态背景图。接下来，我们在这篇文章的基础上继续增加功能，让动态背景图的数量也不是固定的、图像也不是固定的。顺便一提，预览效果可以看这里(http://hexo.sakebow.cn)。
hexo实现背景花瓣飞舞效果
weixin_46382293的博客
01-16 296
在_config.butterfly.yml文件中找到inject，引入jquery和petal.js文件。在source目录下js文件中新增petal.js文件。
Hexo设置背景图片轮播效果
ordinary_brony的博客
08-15 1962
Next主题确实是好用，但是中间还是有太多太多的坑，差点没把自己摔死。这个博客记录了完成背景图片轮播的博客，喜欢折腾的同学可以看看，这方面对CSS3的要求略微有点高。Hexo的NexT主题非常简约，个性化调整也非常方便。在这里就给大家介绍Hexo的背景图片轮播的制作方法。
Hexo之更换背景及透明度
MoYu's Blog
02-11 7013
Hexo之更换背景及透明度 引入方式 首先，介绍一下引入方式，外部导入css文件，不影响内部配置。 1.创建css文件 创建一个css文件移动到\themes\butterfly\source\css目录下。 2.引入 inject在\source\_data的butterfly.yml中： （如果没有，可以创建一个_data文件夹，将\themes\butterfly中的_config.yml复制过去，重命名为butterfly.yml） 按以下方式引入css文件。 <link rel="styl
Hexo系列(四) NexT主题配置
半虹小站
08-07 3217
Hexo 框架允许我们更换合适的主题，以便于构建不同风格的网站，这里介绍目前最常使用的一款主题之一 —— NexT，整体效果演示请参照我的个人网站
Next主题添加背景图片
weixin_46106283的博客
11-20 2806
文章目录操作步骤添加背景图片设置透明边框圆角 hexo 和 Next 的版本如下： hexo: 5.2.0 NexT: 7.8.0 操作步骤 进入 themes\next\source\css 目录中 打开 main.styl 文件 在末尾添加 css 代码即可 添加背景图片 值得注意的是，在 main.styl 文件末尾写的 css 样式，会覆盖主题之前的样式。 以 body 为例，我们要先找到该标签之前的样式，复制下来，然后再此基础上进行修改。先打开自己的博客，按下 F12 检测网页，找到
hexo如何使用自定义页面
04-07
您可以通过在 Hexo 中创建新的页面来使用自定义页面。您可以按照以下步骤操作： 1. 在您的 Hexo 博客目录中，使用命令行工具创建一个新的页面，例如：hexo new page "custom-page"。 2. 打开新创建的页面文件，位于您的 Hexo 博客目录的 source/_pages/custom-page.md。 3. 在这个文件中，您可以使用 Markdown 语法添加自定义内容。 4. 保存这个文件后，您可以使用 Hexo 命令生成静态页面，例如：hexo generate。 5. 最后，您可以使用 Hexo 命令发布您的博客，例如：hexo deploy。 这样，您就可以在您的博客中使用自定义页面了。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值