Next主题美化 黑暗主题配置

最新推荐文章于 2024-08-31 09:00:00 发布
最新推荐文章于 2024-08-31 09:00:00 发布
阅读量954 收藏 3
点赞数
文章标签： hexo windows javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44186188/article/details/114290994
版权

今天发现了一个Next黑夜主题优化，代码非常简单，几分钟就可以配置好，但是这个代码和在Next中插入背景图片和透明化冲突，谨慎使用。

注：目前我使用的是最新版 NEXT
现在是 2021年3月2日，注意官网next更新

Next引入 Darkmode.js 快速支持黑暗模式

打开Blog\themes\next\layout_scripts文件夹内的vendors.njk文件，在末尾添加以下代码

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
  function addDarkmodeWidget(
最低0.47元/天 解锁文章
「已注销」
关注
Hexo博客优化之Next主题美化
huangpiao
01-26 5万+
前言 有了前面几篇博客的介绍，我们就可以很容易的搭建并编辑我们的博客了，不过既然是属于自己的博客网站，自然也就想让其更加美观，更有意思，所以呢我下面介绍一下Hexo博客的主题美化操作。 1. Next主题 Hexo博客支持很多主题风格，其中Next主题是Github上Star最多的主题，其一直在更新维护，支持非常多的外部插件和功能选项。我目前使用的是Next6.0版本，下面我会介绍基于Ne...
NexT主题升级以及hexo4.2.0 NexT7.7.2主题美化
z714977076的博客
03-29 1709
NexT主题升级以及hexo4.2.0 NexT7.7.2主题美化 本文主要介绍如何对NexT7.7.2版本的一些主题美化操作 点击我的博客可以查看一下我的样式。 NexT主题升级 我觉得太痛苦了，原来用的NexT5.1.x版本，发现很多网上的东西不能用，然后就在从v5.1.x升级这个介绍进行了升级。直接升级到v7 在blog根目录下输入： git clone https://github.co...
Next 主题添加可切换的暗黑模式
03-23 1674
NexT 主题添加可切换的暗黑模式
next-themes:两行代码完美实现Next.js黑暗模式。 支持系统偏好设置和任何其他主题，且不闪烁
03-11
下一个主题 Next.js应用程序中主题的抽象。 :check_mark_button: 两行代码完美的黑暗模式 :check_mark_button: 系统设置为“ prefers-color-scheme” :check_mark_button: 加载时无闪存（SSR和SSG均可用） :check_mark_button: 在标签和窗口之间同步主题 :check_mark_button: 更改主题时禁用闪烁 :check_mark_button: 强制页面进入特定主题 :check_mark_button: 类或数据属性选择器 :check_mark_button: useTheme挂钩 查看，亲自尝试一下。 安装 $ npm install next-themes # or $ yarn add next-themes 使用 您需要一个才能使用下一个主题。 最简单的_app看起来像这样： // pages/_app.js function MyApp ( { Component , pageProps } ) { return < Component {
【Hexo系列】【6】NexT主题使用
最新发布
2301_76884890的博客
08-31 741
NexT是Hexo的知名第三方主题，黑白极简风格四合一，有相当多的使用者，维护也相当给力，数年来一直都在频繁更新。Next主题官网：https://github.com/next-theme/hexo-theme-next。
两行代码完美实现Next.js黑暗模式。 支持系统偏好设置和任何其他主题，且不闪烁-React开发
05-27
两行代码完美实现Next.js黑暗模式。 支持系统首选项和任何其他主题，且不闪烁下一主题。Next.js应用程序中主题的抽象。 2两行代码中完美的暗模式:check_mark_button:具有首选颜色模式的系统设置load加载时不带闪光灯（SSR和SSG都可以）tab在选项卡和窗口之间同步主题changing更改主题时禁用闪烁:check_mark_button:将页面强制为特定主题:check_mark_button:类或数据属性选择器:check_mark_button:useTheme挂钩请查看“实时示例”，自己尝试一下。 安装$ npm安装next-themes＃或$ yarn添加next-themes使用
Next 主题配置
CarpeDiem
06-08 1781
本篇继续上一篇的个人博客的搭建，选用Next主题，设置菜单、建站时间、头像、图标设置、动态背景、侧边栏、显示文章字数和阅读时长、添加社交链接、添加评论……
hexo next主题
06-29
hexo搭建博客的next主题下载，赶紧下载吧，积分已经设最低了
next主题美化——背景图片、页面透明化、阴影、圆角、动画
Growing_potato的博客
02-22 4121
本文首发于我的个人博客 前言：NexT 主题本身是没有背景图片的，显得有点单调，博主觉得没有背景图片显得我的博客很丑，于是就想添加一个背景图片 next版本：8.2.1 添加背景图片 把想设置的背景放入./themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下新建文件夹_data与style文件source/_data/styles.styl，输入以下代码 body { background:url(/images/backgroun.
Hexo博客主题安装及Next主题个性化修改
weixin_43998150的博客
12-06 7034
原文链接https://www.lixint.me/hexo-theme-diy.html 欢迎加入博客搭建交流群（QQ群号60429576）&amp;gt;点击加入&amp;lt; 写在最前面： 1.在修改时请注意博客配置文件与主题配置文件的区别：博客配置文件是指博客根目录下的_config.yml文件， 主题配置文件是指/themes/主题名/路径下的_config.yml文件，例如我使用的主题为next主题...
Github部署+Hexo搭建免费博客 next主题美化
易慕晓生的博客
07-29 2314
前言 工作学习中难免会遇到一些问题,有些问题比较复杂,第一遇到了百度许久,第二次遇到了还是要百度许久!想想 倒不如遇到问题记下来写在博客上!以后好查阅.在CSDN上面看到hexo+github可以免费搭建博客,于是就自己 动手搭建了一下,写下来跟大家分享下!本机默认windows系统下 准备工作 安装git **关于Git:**Git(读音为/gɪt/。)是一个开源的分布式版本...
小程序：基于wepy的小程序换肤功能
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-02 322
主要代码在三个文件中 1、该文件重要配置主题色 // config/theme.js // 睿肤识别（skin）主题 // 慧捷肌肤（dermoscopy）主题 const themeData = { skinStyle: ` --themeColor: #fff; --themeBgColor: blue; `, dermoscopyStyle: ` --themeColor: #fff; --themeBgColor: red; `, } export default
Next主题美化
qq_34003239的博客
09-16 3707
写作目的 网上关于Hexo的主题美化的博客已经很多也很全面了，但是在作者去一一尝试的时候，却发现有很多博客中提供的方法现在已经不支持或者过时了，为了避免大家和作者一样花费大量时间去一一尝试，所以作者考虑再三，决定将自己尝试过可靠的方法记录下来，与大家一起学习进步。 一、Next主题美化 Hexo支持很多主题风格，Hexo博客支持很多主题风格，其中Next主题是Github上Star最多的...
Ant Design 暗色主题教程
gitblog_00708的博客
08-07 1062
Ant Design 暗色主题教程 项目地址:https://gitcode.com/gh_mirrors/an/ant-design-dark-theme 项目介绍 Ant Design 是一个广泛使用的企业级 UI 设计语言和 React UI 库。Ant Design 暗色主题（Ant Design Dark Theme）是 Ant Design 官方提供的一个主题包，允许开发者轻松地将应用...
2024年HarmonyOS鸿蒙最新Hexo博客优化之Next主题美化_hexo next(2)，2024年最新华为面试考试
2401_84851126的博客
05-14 839
有了前面几篇博客的介绍，我们就可以很容易的搭建并编辑我们的博客了，不过既然是属于自己的博客网站，自然也就想让其更加美观，更有意思，所以呢我下面介绍一下Hexo博客的主题美化操作。
next.js实现根据设备切换暗黑模式的两种方式
Dahui_program的博客
06-27 848
之后在js中通过window.matchMedia查询prefers-color-scheme: dark并监听属性变化，如果命中则为暗黑模式。样式的改变通过styled-components的theme实现，具体看styled-components的官方文档。引入next-theme，包裹一层插件提供的provider，在组件中使用useTheme获取当前模式。组件库使用的是styled-components。首先要声明支持light和dark两种模式。
next主题配置文件解读
tiantianzs的博客
01-30 1727
title: next主题配置文件解读 tags: HEXO category: 个人博客 首发网址：https://tiansztiansz.github.io/2022/01/29/next主题配置文件解读/ 打开blog\themes\next\_config.yml文件 网站背景图片、内容透明化、代码样式 # Define custom file paths. # Create your custom files in site directory `source/_data` and uncom.
hexo下next主题的优化
qq_42912469的博客
01-07 618
1.站点信息的配置。 修改一些基本的配置，比如站点名、站点描述等等。 # Site title: halisi7 subtitle: '一个专注技术的组织' description: '涉猎的主要编程语言为 c语言、Java、mysql、linux、docker，领域涵盖算法、服务研发和对象存储等。' keywords: c语言、Java、mysql、linux。 author: halisi7 language: zh-CN timezone: '' 修改位置为根目录下的_config.yml文件。
next主题配置文件配置项介绍
z7sz的博客
06-21 1602
hexo+next主题配置文件配置项介绍
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值