Next主题添加背景图片

article/2025/11/11 5:21:56

文章目录

        • 操作步骤
        • 添加背景图片
        • 设置透明
        • 边框圆角

hexo 和 Next 的版本如下:

hexo: 5.2.0

NexT: 7.8.0


操作步骤

  • 进入 themes\next\source\css 目录中
  • 打开 main.styl 文件
  • 在末尾添加 css 代码即可

添加背景图片

值得注意的是,在 main.styl 文件末尾写的 css 样式,会覆盖主题之前的样式。

body 为例,我们要先找到该标签之前的样式,复制下来,然后再此基础上进行修改。先打开自己的博客,按下 F12 检测网页,找到 body 标签。

image-20201117170134558

在右侧样式预览中找到 body 标签对应的样式,点击右上角的 main.css:xxx 查看源码,将 body 标签对应的样式全部复制到

image-20201117170600248

body 标签对应的样式全部复制到 main.styl 文件末尾

image-20201117170805796

然后修改至代码如下:背景图片位于 themes\next\source\images 路径下

body {background: url(/images/background.jpg);  background-repeat: no-repeat;background-attachment: fixed;background-position: 50% 50%;color: var(--text-color);font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;font-size: 1em;line-height: 2;
}

设置透明

单单设置了背景图片还不是很完美,我们给所有的栏目设置一个小小的透明,会显得效果很好。

同样我们要找到对应标签的源样式,再其基础上进行修改,如果你的 Next 主题版本和我相同,则可以直接复制我的。

// 侧边标题栏
.header-inner {opacity: 0.85;
}// 侧边头像栏
.sidebar{transition-duration: 0.4s;  opacity: 0.85;  // 透明度
}// 中心文章栏
.content {padding-top: 15px;opacity: 0.9;
}

边框圆角

边框圆角看个人喜好,有的人喜欢方方正正的,有些则喜欢圆润点。在这里我给出了将侧边栏和中心文章栏的边框设置为圆角的方法,供大家参考

和之前一样,需要将源样式复制下来,如果你的 Next 主题版本和我相同,则可以直接复制我的。

// 侧边标题栏
.header-inner {border-radius: 20px 20px 20px 20px; //边框圆角opacity: 0.85;
}// 侧边头像栏
.sidebar{transition-duration: 0.4s;  opacity: 0.85;  // 透明度border-radius: 10px 10px 10px 10px; //边框圆角
}// 侧边头像框内部
.sidebar-inner {background: var(--content-bg-color);border-radius: 10px 10px 10px 10px; //边框圆角box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);box-sizing: border-box;color: var(--text-color);width: 240px;opacity: 0;
}//第一个文章
.post-block {background: var(--content-bg-color);border-radius: 10px 10px 10px 10px; //边框圆角box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);padding: 40px;
}//之后的所有文章
.post-block + .post-block {border-radius: 10px 10px 10px 10px; //边框圆角box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);margin-top: 12px;
}

感谢阅读!

个人博客:http://www.tonydon.club/


http://chatgpt.dhexx.cn/article/ayL78ODW.shtml

相关文章

Hexo-Next主题博客个性化配置

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 …

hexo下next主题的优化

1.站点信息的配置。 修改一些基本的配置,比如站点名、站点描述等等。 # Site title: halisi7 subtitle: 一个专注技术的组织 description: 涉猎的主要编程语言为 c语言、Java、mysql、linux、docker,领域涵盖算法、服务研发和对象存储等。 keywords: c…

Hexo博客-NexT主题自定义主页配置方法

Refrence https://zhuanlan.zhihu.com/p/366761432 问题 在使用Hexo博客框架的Next主题时,默认主页是数篇博客的摘要。想要修改主页(也即首页)的内容(例如给出网站的介绍等),需要进行自定义配置。 步骤 …

Hexo-Next主题搭建个人博客最新配置教程!

个人博客 网页预览:https://benn314.github.io/ Hexo-Next 是一款我很喜欢的主题,布局简约,很适合用于搭配 live-2d 和 网格动画,打造属于自己的个人博客。博客目前部署于 Github Pages 相关Github仓库 https://github.com/Ben…

NexT主题优化

前言 这算是各种文章的集合了,如果你有耐心就看完吧(T▽T) 如果是明确想要哪一种功能的童鞋,那就直接查找吧( • ̀ω•́ )✧ 本篇文章是在已经搭建好gitpagehexo的博客的前提下(不懂怎么搭建的可以参考我的另一篇…

Hexo+next主题美化静态博客

前言 需要在Hexo下配置next主题 Hexo配置next主题教程:点我跳转 更改配置以后使用素质三连:hexo clean && hexo g && hexo s即可本地看到效果。 hexo clean && hexo g && hexo s注:部分参考自互联网&…

Next主题美化

写作目的 网上关于Hexo的主题美化的博客已经很多也很全面了,但是在作者去一一尝试的时候,却发现有很多博客中提供的方法现在已经不支持或者过时了,为了避免大家和作者一样花费大量时间去一一尝试,所以作者考虑再三,决定…

Hexo博客优化之Next主题美化

前言 有了前面几篇博客的介绍,我们就可以很容易的搭建并编辑我们的博客了,不过既然是属于自己的博客网站,自然也就想让其更加美观,更有意思,所以呢我下面介绍一下Hexo博客的主题美化操作。 1. Next主题 Hexo博客支持很多主题风格,其中Next主题是Github上Star最多的主题,…

Django CBV ( 类视图函数 )

Django 类视图函数 写在前面1、先创建一个新的应用2、写一个类视图函数3、post访问试试4、再创建一个类视图函数5、as_view()里面可以传参6、TemplateView6.1、template_name写到路由里6.2、template_name写到视图里 7、ListView8、DetailView8.1、DetailView还可以不指定templ…

详解Django中FBV开发模式与CBV开发模式的区别.

你可能会好奇为什么在这里我们又要介绍CBV开发模式, 在前面的文章中, 我们调用视图函数都是使用 FBV 开发模式, 用的好好的为什么又要换呢? 其实不然,这是一个循序渐进的过程, 就像编程基础 和 框架开发&am…

什么是ccv

ccv是一个以不成熟的openframeworks为基础作的一个开源的软件。注意它并不是一个库。并且她早就不再更新了。现在openframeworks已经很成熟了,openframeworks提供的函数完全可以替代ccv,所以想继续使用ccv的同学们,赶紧回头是岸,使…

Django----FBV 与 CBV 介绍、CBV源码分析

文章目录 一、CBV和FBV二、CBV 源码分析 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应。 响应可以是一张网页的HTML内容,一个重定向&#…

FBV和CBV

一、FBV FBV(function base views) 就是在视图里使用函数处理请求。 看代码: urls.py from django.conf.urls import url, include # from django.contrib import admin from mytest import viewsurlpatterns [# url(r‘^admin/‘, admin.s…

CBV

一、CBV与FBV #Class Base View(基于类的视图) #Function Base View(基于函数的视图) 二、CBV的用法及源码分析 1、用法 #视图层 # 1 先导入View(继承它) from django.views import View # 写一个类继承它, class Test(View):#request必须传,后面的可传可不传(有可能有名,无名分…

FBV与CBV

FBV与CBV 视图函数并不只是指函数也可以是类。FBV(基于函数的视图) 面向函数式编程。CBV(基于类的视图) 面向对象式编程 问题:基于CBV的视图函数,get请求来就会走类里面get方法,post请求来就会走类里面post方法 为什么??? urls.py中 url(r^login/,views.MyLogin.…

CBV与FBV的区别/CBV源码剖析

FBV与CBV # 针对于视图函数(views.py)&#xff0c;视图函数编写逻辑既可以使用函数(FBV)也可以使用类(CBV)来编写。 区别展示&#xff1a; login.html <h1>GET请求</h1><form action"" method"post" enctype"multipart/form-data"…

FBV与CBV, CBV源码剖析

目录 FBV和VBC CBV和FBV CBV源码分析 CBV源码简述 FBV和VBC 一个视图函数(类),简称视图, 是一个简单的python函数(类),他接受web请求并且返回web响应. 响应可以是一张网页的HTML内容, 一个重定向, 一个404错误, 一个xml文档或者一张图片. 无论视图本身包含什么逻辑, 都要…

Django的CBV方式讲解

CBV使用配置 路径url的配置 cbv 顾名知义就是通过类的方法来调用&#xff0c;我们在url中配置为如下路径 url(r^cbv.html/, views.Cbv.as_view()), 这里的Cbv是一个class 类&#xff0c;要想使用cbv方法&#xff0c;这个路径后面还得必须有一个as_view()这个是必须的固定格式 v…

CBV之详解

一&#xff0c;CBV&#xff0c;基于反射实现根据请求方式不同&#xff0c;执行不同的方法。 1. 开发模式- 普通开发方式&#xff08;前后端放在一起写&#xff09;- 前后端分离2. 后端开发为前端提供URL&#xff08;API/接口的开发&#xff09;注&#xff1a;永远返回HttpRespo…

邮件协议分析

一、邮箱分类 邮件发送与接受主要存在两种形式&#xff1a;网页和客户端两种。网页形式主要是通过web页面登陆邮箱完成邮件的收发&#xff0c;如mail.139.com、mail.163.com和mail.google.com等&#xff1b;客户端是指在PC上安装第三方软件实现对邮件的收发&#xff0c;如outl…