CSDN花里胡哨的自定义模板

女爷i 2022-11-04 11:16 184阅读 0赞

大家好，我是小佑@小佐：[https://blog.csdn.net/Smell\_rookie][https_blog.csdn.net_Smell_rookie]，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。

一次偶然的机会让我获得了一个月的CSDN会员，从此我便发现了这个有趣的玩法！在内容管理模块里面的自定义模块  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70]  
只要你CSDN的会员你就有权限去设置这个东西，先来看看它张什么样子吧！

旧版时展示的样子：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70 1]

新版时展示的样子：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70 3]

总的来说就是博主的想给粉丝展示的东西，可以说是博主的一个变现手段，让粉丝最直观地发现博主展示的东西。那么上面的栏目内容应该如何设置才能展示出上面的东西呢？以下代码只供参考，修改的地方请自行更改！

<center><div style="color:#fff;background:#f7ba1a;line-height:38px;margin-bottom:20px;border-radius: 10px">天天外卖神券</div></center>
    <center><div><a href="https://dwz.cn/cuz0tw8r"><img src="https://img-blog.csdnimg.cn/20210209085455550.png" alt="牛转乾坤" /></a></div></center>
    
    <center><div style="color:#fff;background:#f7ba1a;line-height:38px;margin-top:10px;margin-bottom:20px;border-radius: 10px">小程序展示</div></center>
    
    <center><div><img src="https://img-blog.csdnimg.cn/20210113175344576.png" alt="高校二手交易" /></div></center>
    <center><div style="color:#fff;background:#f7ba1a;line-height:38px;margin-bottom:20px;border-radius: 10px">资源下载</div></center>
    
    <div style="margin-bottom:10px;"><a style="color:#fc5c3f;" href="https://download.csdn.net/download/Smell_rookie/15196123"><span style="color:#f7ba1a">[推荐] </span>程序员专属的代码拜年网页(纯Js+html)</a> </div>
    <div style="margin-bottom:10px;"><a style="color:#fc5c3f;" href="https://download.csdn.net/download/Smell_rookie/14120158">Vue搭建的服装类商城手机模板</a></div>
    <div style="margin-bottom:10px;"><a style="color:#fc5c3f;" href="https://download.csdn.net/download/Smell_rookie/14020383">python京东茅台脚本</a></div>
    <div style="margin-bottom:10px;"><a style="color:#fc5c3f;" href="https://download.csdn.net/download/Smell_rookie/14008563"><span style="color:#f7ba1a">[推荐] </span>新年烟花代码(纯Js和html)</a> </div>
    <div><a style="color:#fc5c3f;" href="https://download.csdn.net/download/Smell_rookie/12396095">直接安装的Vue-devtools调试工具</a></div>

需要注意的是以上的部分样式代码在你提交自定义模块时会被屏蔽掉，所以你需要在自己的草稿箱中备份一份，下次编辑自定义模块的时候直接拷贝草稿箱中的代码提交上去。

![在这里插入图片描述][20210118110131603.png_pic_center]

[https_blog.csdn.net_Smell_rookie]: https://blog.csdn.net/Smell_rookie
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70]: /images/20221023/5b6ede08d9404117a9cc65004b7b775a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/a4e72d244ee34db8a3027f19f4c94d86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70 1]: /images/20221023/a31540d4baa44c0aae178c3b04f0a1fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70 2]: /images/20221023/d3df8d454b6c40c1b3ef59e594c1a5a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70 3]: /images/20221023/3992a5677546401aa1e606b15481a06b.png
[20210118110131603.png_pic_center]: /images/20221023/2c02f87f2f2447558020ee91aab9ebb0.png