Hexo博客的Next主题 7.5版本给首页文章添加阴影

最新推荐文章于 2024-06-10 14:10:50 发布

link1121

最新推荐文章于 2024-06-10 14:10:50 发布

阅读量1.7k

点赞数 6

分类专栏： Hexo 文章标签： Hexo NexT

本文链接：https://blog.csdn.net/qq_39119496/article/details/103372437

版权

Hexo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在next主题文件下找到\next\source\css_common\components\post下的post.styl文件

找到.post_block
在这里插入图片描述
添加阴影样式

// 主页文章添加阴影效果
 .post_block {
   opacity: 0;
   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);
  }

示例如下：
在这里插入图片描述
重启服务即可看到效果。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

link1121

关注关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
6
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

hexo笔记九：next主题设置首页和归档页的分页数量

Awt_FuDongLai的博客

07-18

2633

要美观一点的话，首页的分页数要设置得短一些，归档页的分页数要长一些。 # 安装相应的插件 npm install --save hexo-generator-index npm install --save hexo-generator-archive # 更改站点的配置文件 cd 博客目录 vim _config.yml # 这一段默认就有的 index_generator: path: '' per_page: 5 order_by: -date # 归档页面 archive_gene

为 Hexo 文章块添加阴影

qq_43284098的博客

03-27

492

也可在我的个人博客里看为 Hexo 文章块添加阴影实现方式：利用 box-shadow 代码在文章块的css部分（我的是在 .post-main,.post-entry 里）添加如下代码 box-shadow: 8px 5px 10px #696969; 其中，#696969 是一种灰色，如果想要将阴影换为其它颜色，可以在Encycolorpedia里选择你喜欢的颜色，而关于 box-sh...

6 条评论您还未登录，请先登录后发表或查看评论

主页文章添加背景图片后给文章添加阴影效果 - Hexo建站(六)

Clearlight's Blog

03-06

887

博客地址预览: http://www.clearlight.com.cn 打开博客主目录文件 -> themes -> next -> source -> css -> _custom -> custom.styl 里面填上如下代码: .post-block { background: rgba(255, 255, 255, 0.84); paddin...

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

野猿新一

06-26

3568

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...

hexo的next主题个性化教程：打造炫酷网站

最新发布

silent_F的博客

06-10

400

最近将博客的主题换回了next主题。以前喜欢将自己的主题弄的花里胡哨的。现在反而更喜欢简单点的。改为next主题后，有些自己想要的功能没有，比如相册。在网上查了好多资料，也有人实现了，但是都比较麻烦，或者不是自己想要的效果。于是自己换了种思路，直接用html的方式实现，再加入到博客中。这样以后不管换什么主题，相册功能都可以直接移植，非常的方便。{% link 笔者效果,%}

hexo之next主题个性化配置详细教程

傻瓜的博客

06-28

1万+

hexo之next主题个性化配置详细教程1.在右上角或者左上角实现fork me on github实现的效果图具体实现方法点击传送门>> 挑选自己喜欢的样式，并复制代码。例如，我是复制如下代码：然后粘贴刚才复制的代码到 themes/next/layout/_layout.swig 文件中 <div class="headband"></div>的下面

2018最新版Hexo博客Next主题6.0配置优化

请别抢我的狗熊

03-08

4万+

前言或许是对默认的东西没有好感，总觉得默认的主题是很丑很丑的，完美控是接受不了这个东东的，还好hexo是可以修改主题的。这里首推NexT主题，精于心，简于形标语说的是真的不错。使用NexT主题的人比较多，这也说明这个主题确实很成熟了。优化，配置，扩展很多都集成了，比较简单。博文重质量，弄的太花哨确实没啥用。。。读者可以在https://hexo.io/themes/可以查看...

Hexo框架下用NexT(v7.0+)主题美化博客

对方北方

03-19

2万+

前言博主自己的博客：https://hunter1023.github.io/；按照本篇博客美化而成。 NexT主题的安装　　顾名思义，所谓主题就是界面的展示样式。Hexo安装主题，只需要将主题文件拷贝至博客所在目录的themes目录下，修改相关配置文件即可生效。　　NexT的安装通过定位到博客目录，再通过　　Git clone https://github.com/theme-...

Hexo-Next 主题博客个性化配置超详细，超全面(两万字)

Z小旋

03-10

4万+

隐藏网页底部 powered By Hexo / 强力驱动打开 themes/next/layout/_partials/footer.swig 找到： {% if theme.footer.powered.enable %} <div class="powered-by">{# #}{{ __('footer.powered', '<a class="theme-link" ...

next主题美化——背景图片、页面透明化、阴影、圆角、动画

Growing_potato的博客

02-22

3903

本文首发于我的个人博客前言：NexT 主题本身是没有背景图片的，显得有点单调，博主觉得没有背景图片显得我的博客很丑，于是就想添加一个背景图片 next版本：8.2.1 添加背景图片把想设置的背景放入./themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下新建文件夹_data与style文件source/_data/styles.styl，输入以下代码 body { background:url(/images/backgroun.

给一个div加上黑色遮罩

姑娘这鸡汤有毒-的波克

01-19

8285

接着整理这个是之前写过的一个页面现在整理一下发出来就是给页面加个黑色的遮罩设置透明度我在实际中写的是给段视频加上遮罩放置视频太亮导致视觉效果不好好了下面简述下原理在一个div下添加背景为黑的另一个div 设置透明度（注意兼容性）然后设置定位 position：absolute ；就是让它定在那上面不然正常文档流下肯定就跑到下面去

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

Mxeron的博客

08-01

588

找到主题下的这个文件themes\next\source\css_common\components\post\index.styl。

hexo博客的背景设置

Faith的博客

07-25

1万+

主要有以下30种：在右上角或者左上角实现fork me on github添加RSS添加动态背景实现点击出现桃心效果修改文章内链接文本样式修改文章底部的那个带#号的标签在每篇文章末尾统一添加“本文结束”标记修改作者头像并旋转博文压缩修改“代码块自定义样式侧边栏社交小图标设置主页文章添加阴影效果在网站底部加上访问量添加热度网站底部字数统计添加 README.md 文件设置网站的图标Favic

hexo next博客

05-25

Hexo Next 是一个非常受欢迎的 Hexo 主题，它具有许多功能和可定制选项，可以使您的博客看起来非常专业。要使用 Hexo Next 主题，您需要先安装 Hexo。安装完成后，您可以按照以下步骤安装 Hexo Next 主题： 1. 在终端中进入 Hexo 博客的根目录，例如：`cd ~/myblog` 2. 使用以下命令安装 Hexo Next 主题： ``` git clone https://github.com/theme-next/hexo-theme-next themes/next ``` 3. 修改 Hexo 的配置文件 `_config.yml`，将 `theme` 的值改为 `next`： ``` theme: next ``` 4. 运行 `hexo clean` 清除缓存，然后再运行 `hexo server` 启动本地服务器，预览您的新主题！如果您需要自定义 Hexo Next 主题，请查看官方文档，其中包含了详细的配置选项和示例。