Hexo博客NexT主题下添加文章边框阴影效果

最新推荐文章于 2024-08-20 08:54:38 发布
最新推荐文章于 2024-08-20 08:54:38 发布
阅读量3.5k 收藏 1
点赞数
分类专栏： 搭建博客 文章标签： Hexo NexT 搭建博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mqdxiaoxiao/article/details/93797964
版权

1.打开themes/next/source/css/_custom/custom.styl文件

2.在custom.styl文件中添加如下配置

.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

3.重新hexo d -g即可看到效果

野猿新一
关注
专栏目录
为 Hexo 文章块添加阴影
qq_43284098的博客
03-27 492
也可在我的个人博客里看 为 Hexo 文章块添加阴影 实现方式：利用 box-shadow 代码 在文章块的css部分（我的是在 .post-main,.post-entry 里）添加如下代码 box-shadow: 8px 5px 10px #696969; 其中，#696969 是一种灰色，如果想要将阴影换为其它颜色，可以在Encycolorpedia里选择你喜欢的颜色，而关于 box-sh...
hexoNext主题添加相册
silent_F的博客
06-10 401
最近将博客的主题换回了next主题。以前喜欢将自己的主题弄的花里胡哨的。现在反而更喜欢简单点的。改为next主题后，有些自己想要的功能没有，比如相册。在网上查了好多资料，也有人实现了，但是都比较麻烦，或者不是自己想要的效果。于是自己换了种思路，直接用html的方式实现，再加入到博客中。这样以后不管换什么主题，相册功能都可以直接移植，非常的方便。{% link 笔者效果,%}
Hexo博客NexT主题下添加文章边框阴影效果？
Mxeron的博客
08-01 588
找到主题下的这个文件themes\next\source\css_common\components\post\index.styl。
hexo-theme-Cxo: 一款精致的Hexo博客主题
最新发布
gitblog_01100的博客
08-20 292
hexo-theme-Cxo: 一款精致的Hexo博客主题 hexo-theme-CxoA cool ，simple & beautiful theme for Hexo. :mushroom:项目地址:https://gitcode.com/gh_mirrors/he/hexo-theme-Cxo 项目介绍 hexo-theme-Cxo 是一个专为 Hexo 博客平台设计的主题，由开发者 L...
主页文章添加背景图片后给文章添加阴影效果 - Hexo建站(六)
Clearlight's Blog
03-06 888
博客地址预览: http://www.clearlight.com.cn 打开博客主目录文件 -> themes -> next -> source -> css -> _custom -> custom.styl 里面填上如下代码: .post-block { background: rgba(255, 255, 255, 0.84); paddin...
hexo的next主题个性化教程：打造炫酷网站
热门推荐
距离的博客
05-24 5万+
看到有些next主题的网站很炫酷，那么是怎么配置的呢？接下来我会讲一讲如何实现一些炫酷的效果 主要有以下32种： 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景 实现点击出现桃心效果 修改文章内链接文本样式 修改文章底部的那个带#号的标签 在每篇文章末尾统一添加“本文结束”标记 修改作者头像并旋转 博文压缩 修改“代码块自定义样式 侧边栏社交小图标设置
Hexo博客的Next主题 7.5版本给首页文章添加阴影
qq_39119496的博客
12-03 1746
在next主题文件下找到\next\source\css_common\components\post下的post.styl文件 找到.post_block 添加阴影样式 // 主页文章添加阴影效果 .post_block { opacity: 0; margin-top: 60px; margin-bottom: 60px; padding: 25px; -we...
hexo主题优化详细配置
sunshine_lyn的博客
08-26 3648
可以参考：hexo的next主题个性化教程:打造炫酷网站 hexo官网 hexo插件 如何利用github打造博客专属域名 关于Hexo的一些网站导航 除了上述配置之外，还有如下比较好的设置：   目录 1、阅读量统计 2、页脚设置 3、文章目录设置 4、网易云音乐 5、动画背景设置 6、主页文章阴影即透明度设置 7、设置头部 8、hexo+next 解决首页文章间距...
Hexo博客搭建文件（next主题）
12-07
- 使用`hexo s`命令启动本地服务器，预览博客效果。 - 配置Git仓库以实现远程部署。首先，在GitHub或类似的托管服务上创建一个新的repository，然后在Hexo根目录下创建`.deploy_git`目录，配置`_config.yml`中的`...
hexo next主题
06-29
Next主题是Hexo的官方推荐主题之一，它提供了多种布局选择，包括个人博客、作品展示和文章列表。Next的特点包括： 1. **响应式设计**：无论在桌面、平板还是手机上，Next都能提供良好的阅读体验。 2. **多语言支持*...
hexo-next-coauthor:为NexT主题添加合著者文章meta
05-29
为NexT主题添加合著者文章meta 安装 npm install theme-next/hexo-next-coauthor 用于前台 title : Hello! NexT Test Site coauthor : Mr.J title : Hello! NexT Test Site coauthor : - Mr.J - Jone 配置 ...
Hexo-Next主题博客个性化配置
weixin_44245220的博客
05-23 1309
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博客的背景设置
Faith的博客
07-25 1万+
主要有以下30种： 在右上角或者左上角实现fork me on github添加RSS添加动态背景实现点击出现桃心效果修改文章内链接文本样式修改文章底部的那个带#号的标签在每篇文章末尾统一添加“本文结束”标记修改作者头像并旋转博文压缩修改“代码块自定义样式侧边栏社交小图标设置主页文章添加阴影效果在网站底部加上访问量添加热度网站底部字数统计添加 README.md 文件设置网站的图标Favic
最详细的Hexo Next主题配置教程
Web全栈笔记
12-24 1万+
配置环境安装Node（必须）作用：用来生成静态页面的到Node.js官网下载相应平台的最新版本，一路安装即可。安装Git（必须）作用：把本地的hexo内容提交到github上去.安装Xcode就自带有Git，我就不多说了。申请GitHub（必须）作用：是用来做博客的远程创库、域名、服务器之类的，怎么与本地hexo建立连接等下讲。安装hexoNode和Git都安装好后,首先创建一个文件夹,如blog,
hexo之next主题个性化配置详细教程
傻瓜的博客
06-28 1万+
hexo之next主题个性化配置详细教程1.在右上角或者左上角实现fork me on github实现的效果图 具体实现方法 点击传送门>> 挑选自己喜欢的样式，并复制代码。 例如，我是复制如下代码： 然后粘贴刚才复制的代码到 themes/next/layout/_layout.swig 文件中 <div class="headband"></div>的下面
next主题美化——背景图片、页面透明化、阴影、圆角、动画
Growing_potato的博客
02-22 3921
本文首发于我的个人博客 前言：NexT 主题本身是没有背景图片的，显得有点单调，博主觉得没有背景图片显得我的博客很丑，于是就想添加一个背景图片 next版本：8.2.1 添加背景图片 把想设置的背景放入./themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下新建文件夹_data与style文件source/_data/styles.styl，输入以下代码 body { background:url(/images/backgroun.
2018最新版Hexo博客Next主题6.0配置优化
请别抢我的狗熊
03-08 4万+
前言 或许是对默认的东西没有好感，总觉得默认的主题是很丑很丑的，完美控是接受不了这个东东的，还好hexo是可以修改主题的。这里首推NexT主题，精于心，简于形标语说的是真的不错。使用NexT主题的人比较多，这也说明这个主题确实很成熟了。优化，配置，扩展很多都集成了，比较简单。博文重质量，弄的太花哨确实没啥用。。。 读者可以在https://hexo.io/themes/可以查看...
Hexo NexT主题内给每篇文章后添加结束标语
非凡博客
01-28 1964
https://asdfv1929.github.io/2018/01/28/add-the-end/
hexo配置最新next主题美化
GMaya的博客
03-12 1848
前言 截止到写这博客的时间，花费了一天左右的时间，将next主题美化了一下，以此记录。 模板 我的博客使用next模板为Mist，打开主题配置文件 添加背景线条效果 我是参考canvas-nest官方网站 创建文件 在根目录的source 文件夹下创建_data文件夹，然后创建footer.swig 注意不要将位置创建到主题里面去，然后将代码拷贝进去即可 <script color="...
hexo next博客
05-25
Hexo Next 是一个非常受欢迎的 Hexo 主题，它具有许多功能和可定制选项，可以使您的博客看起来非常专业。 要使用 Hexo Next 主题，您需要先安装 Hexo。安装完成后，您可以按照以下步骤安装 Hexo Next 主题： 1. 在...
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值