关于给hexo文章分类页面按钮仿书本样式美化

最新推荐文章于 2023-04-08 23:44:26 发布
最新推荐文章于 2023-04-08 23:44:26 发布
阅读量786 收藏 2
点赞数 2
分类专栏： 关于hexo博客魔改美化教程系列 文章标签： hexo css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42529972/article/details/109411974
版权
本文介绍了如何使用HTML、CSS和JavaScript为Hexo文章分类页面的按钮创建书本样式的美化效果。通过引入特定的HTML代码并设置CSS样式，实现了简单易复制的美化方案，使分类按钮既美观又易于实现。
摘要由CSDN通过智能技术生成
前言：最近成迷于美化hexo博客样式，发现了这个超好看的样式，美化了一下，基于matery主题设置的，其他主题原理也一样可参考。

废话不多说，先上图：
在这里插入图片描述

hover前
hover后
效果网页：
hexo文章分类页面按钮仿书本样式美化

  • 特点: 都是div+css美化效果，所以没啥难度，可以直接复制我以下的代码，或者做修改都可。

引入html代码

  • 1、首先，找到位置为/layout/category-cloud.ejs的文件，后面的html和css代码都放在此category-cloud.ejs文件即可。
  • 2、然后，定位到href="<%- url_for(category.path
最低0.47元/天 解锁文章
hexo(sakura)——标签、分类页面美化
cloudYun的博客
04-25 2348
一、效果 首先来看一下标签、分类页面美化后的效果 标签页面美化???? 分类页面美化???? 二、标签页面 1. tags页面资源文件 首先要新建一个tags页面 hexo new page tags 编辑tags页面 打开站点文件夹下的source\tags\index.md，添加： --- title: tags + layout: tags-bubble date: 2020-4-25 2...
Hexo博客项目：页面美化
修行的凡人的博客
03-10 517
基于Hexo架构，快速搭建Hexo博客
【2】hexo博客美化网站汇总（亲测有效）
weixin_38468077的博客
11-21 1343
今天下午搞了一下自己的hexo博客主页，做了以下笔记： 1.next主题下载及添加页面访客统计功能 访客统计 2.hexo的Next创建categories分类 创建博客分类 3.hexo next主题解决无法显示数学公式 数学公式不显示解决 4.界面美化之–添加文本结束 添加阅读结束 5.看板娘设置 模型预览 仿照例子 6.next主题加头像 添加头像 7.成果 我的网址：https://kin...
Hexo持续优化-创建分类和标签页面
闰土CMS
08-29 1223
目录创建分类页面创建标签页面 昨天本地的博客文件被误删了，后来重新搭建起来，发现博客没有分类和标签页面了，原因是source目录下的categories 和 tags 目录被删除了，需要重新创建。然而只是创建个空目录是不行的，必须按照规范来。 之前搭建的时候，这里并没有记录，导致还浪费了一点时间，现在简单记录下。 创建分类页面 运行命令hexo new page categories 该命令会在s...
hexo(yilia)主题界面个性化美化——CSS更改
weixin_45924299的博客
09-19 682
title: Hexo主题界面美化 subtitle: yilia date: 2021-09-19 11:07:41 tags: [‘Hexo’,“yilia”] 开始 CSS更改 文件目录:myblog\themes\yilia\source\main.0cf68a.css 左边侧边栏 .left-col{ 侧边栏菜单 .left-col #header .profilepic(头像) .left-col #header .header-menu(主页菜单) .left-col #header .h.
关于给hexo博客增加随笔页面（并对页面仿信纸作业纸样式修饰）
itsNekoDeng的博客
11-03 782
前言: 这里是博主的vlog区，博主也是B站的一名普通up????，欢迎观看交流。本文基于matery主题，主要引入哔哩哔哩视频。 效果图： 新建视频页面 在source文件下新建一个video文件 在该文件里新建一个index.md文件，其中文件内容为： --- title: video type: "video" layout: "video" --- 在主题配置文件_config.yml下，增加音乐页面链接和标题 video: url: /video 新建video.ejs文件 在主
如何在Hexo中对文章md文件分类
热门推荐
一个码农的博客
12-23 1万+
Hexo是一个快速、简洁且高效的博客框架，常用在Github Page上部署个人博客。 起因 在默认配置下，我们使用hexo new post [title]会在source/_post/目录下生成对应的markdown文件，而使用hexo g生成的html文件路径是:year/:month/:day/:title.html。当我们写的博客越来越多的时候，会发现，所有文章都是在source/_po...
hexo置顶文章及样式美化
weixin_34128501的博客
05-14 697
问题描述 文章置顶功能实现, top值越高越在前。由于官方并未给出置顶功能, 所以要手动修改。 sticky: 显示图钉样式 top: 置顶功能实现 原理 在Hexo生成首页HTML时， top值越高越在前，达到文章置顶功能。 效果 置顶效果 修改 找到node_modules\hexo-generator-index\lib\generator.js文件。替换如下： 'use strict...
Hexo添加代码复制按钮修改文章内超链接样式3修改阅读全文按钮样式 修改主题页面布局为圆角 引用块样式修改 引用块设置换行 设置头像边框为圆形框&鼠标悬停
白马湖水怪的博客
06-01 630
????上次（2019年6月初）因为重装Windows系统的缘故，需要重新部署本地的环境并与Github的仓库进行连接，因为当时正处于期末复习阶段，于是为了省事直接选择备份博客文章后全部重新部署本地环境，而且更换了Hexo主题的版本，第一次（2019年4月底）安装Hexo的时候使用的貌似是5.X的版本，在当时魔改的过程中发现该版本无法完美添加代码复制的按钮，于是在第二次部署的时候特意更换了7.1.1版本的，测试代码复制按钮通过以后就开始魔改其他的配置了。直到前不久…我刚刚发现…一个问题…对于强迫症患者来说是
[转]【持续更新】最全Hexo个人博客搭建+主题优化+插件配置+错误分析
Ambrose_Ren的博客
11-06 853
前言 如果你和我一样是小白，那么恭喜你！看完这篇文章，你也可以拥有一个这样的博客啦！ 欢迎在文末留言，或者点击加入QQ群933583982互相交流。 本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处【持续更新】最全Hexo个人博客搭建+主题优化+插件配置！ Hexo博客搭建 准备环境 Node.js 下载并安装。 Git 下载并安装。 安装Hexo，在命令行（即Git Bash）运行以下命令： npm insta...
模仿书本翻页效果的FLASH+XML相册
06-09
带flash源代码，方便修改的焦点图翻书相册效果代码，翻页的时候带有声音
hexo-theme-yelee, 简而不减 Hexo 双栏博客主题; Another simple and elegant theme for Hexo..zip
09-17
hexo-theme-yelee, 简而不减 Hexo 双栏博客主题; Another simple and elegant theme for Hexo.
大学生阅读小说网页设计模板代码 小说书籍网页作业成品 学校书籍网页制作模板 学生简单书籍阅读网站设计成品
qq_38515380的博客
04-08 248
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
hexo博客matery主题的个性化配置
qq_41376237的博客
01-31 6364
文章目录前言一、matery主题的下载与安装二、基本配置1.根目录下的 `_config.yml`1.1. title1.2. deploy与theme2.themes目录下的`_config.yml`2.1. menu，icon，二级菜单2.2. dream【可选】2.3. music2.4. indexbtn2.5. sociallink2.6. 打赏功能2.7. 字数统计等2.8. featureimages2.9. 几何线条背景canvas_nest2.10. 分享链接share2.11. 副标题
2021 hexo matery主题个性魔改
Zz_cheng的博客
05-12 3854
hexo matery主题个性修改 一、雪花飘落 先来看看效果： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WjK4pw7m-1620819312244)(https://7.dusays.com/2021/05/12/34ef670a25f7f.gif)] 找到你的博客目录，在主题在/themes/matery/layout/layout.ejs 中 添加下列代码即可 <div> <canvas id="snow" style="positio
博客园排版样式CSS+HTML
SFC0511的博客
11-15 332
1.一些示例文字 第一段 <style><!-- body { padding-top: 2.5em; color: #333; background-color:#F5F5DC; font-size: 85%; font-family: "幼圆", "黑体"; } .title1...
Hexo 修改导航栏、标签、分类、归档图标，一分钟搞定
h_kaka的博客
08-12 2772
Hexo 修改导航栏图标 1分钟搞定！ 图标太丑想要改下 在主题配置文件_config.yml下 找到Menu配置 发现这是Font Awesome的图标库 选择一个好看的图标点击进去，然后复制名称 将原来的图标名称修改 然后就变好看，很过图标可以自己选（选择困难症慎用！！！！） ...
Hexo 高级设置
Yana's Blog
07-14 931
该篇旨在Hexo的高级设置，博客搭建请查看Hexo+GitHub搭建个人博客操作同上。
hexo的美化——拓展篇
Jeff_的博客
04-29 3899
基础知识 css样式 hexo/themes/next/source/css/: 是next主题的样式文件，决定主题的外观。 hexo/themes/next/source/css/main.styl：汇总css文件夹中所有的样式。 hexo/themes/next/source/css/ _custom/custom.styl：是空的，专门让开发者扩展。 修改css 进入网页,F12进...
hexo next怎么修改文章的链接样式？
最新发布
06-02
要修改 Hexo Next 主题中文章链接的样式，可以按照以下步骤进行： 1. 打开主题的配置文件`_config.yml`，找到`menu`选项，其中包含了`archive`、`categories`和`tags`三个链接，分别对应网站的归档、分类和标签页面...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值