淘宝css代码 淘宝导航css代码编辑器 收藏 0

阿里巴巴店铺装修教程之代码绕过系统过滤

在进入正文之前有必要说明下：艺灵分享的教程主要以装修经验为主，是为了解决看官在实际装修中遇到的代码问题和突破思维瓶颈。至于店铺收益这个问题不在范围之内，谢谢理解。

今天这篇文章主要讲的是：装修阿里巴巴店铺时，如何绕过过滤机制，成功让css显示出来。

如果按正常流程来讲，这篇文章需要到一个月后才能发布。但由于某些原因，所以提前发布下，也希望看官在看完文章后能学到点什么。

相对于淘宝和天猫装修而言，折腾阿里巴巴店铺的看官非常少。

早在16年6月的时候，艺灵曾写过一篇有关阿里巴巴装修的教程文章–《帮您节省千元的阿里巴巴1688店铺装修教程》

文章主要介绍了：阿里巴巴的装修方法以及可以写自定义css的事情。

就在不久前，突然有不少小伙伴向艺灵反应代码失效的问题。经亲自验证后才发现：原来阿里巴巴店铺也开始走淘宝的老路了，什么绝对定位属性、自定义css啥的都已经被列到了装修黑名单中！

虽然现在的阿里巴巴在装修代码上已经做了过滤检测，但我们还是有办法绕过过滤的。

如果看官之前一直有看艺灵写的文章的话就会发现一个有趣的现象，那就是：“每次公布的破解方法很快就失效了……”这个确实有点尴尬，虽然本文是写阿里巴巴的方法，相信在很短的时间内，本文提供的方法也会被修复。所以呢，看官需要认真看下面的每一个字，因为，因为，内有乾坤！

对于我们这群码农来说，谁还不会个html转义字符和Unicode编码啊！想想之前玩淘宝的时候，很多大神都用这两把刷子得到了想要的结果！

咱们言归正传。对于html转义字符，看官只需要记住以下两个即可！和。

对应的是html代码中的，也就是左尖括号；

对应的是html代码中的，也就是右尖括号。

3.1、html转义字符

还是来举一个例子吧！代码如下：

<div class=\”box\” style=\”position:relative;color:#f00\”>这是一个div标签，文字是红色。</div>

下面我们将上面的代码保存到阿里巴巴店铺中来验证下吧。登录步骤就省略了，进入店铺后，鼠标放到任意一个自定义内容区的右上角，然后点击编辑，接着就直接把代码粘贴进来，然后点击确定即可。完整流程图：

在自定义内容区中直接粘贴代码

此时点击预览可以看到效果了，效果如图：

预览时代码没有过滤，效果显示正常

3.2、为什么不点击源码

如果看官习惯了其他平台的装修流程的话，肯定会问一个问题：“为什么不点击源码，然后在源码模式下粘贴代码”？

这么说吧，其实最早这个方法是可行了。就在艺灵写完本文开头提到的那篇文章后不久，就变成现在就这样了。在源代码模式下粘贴是没有多大作用的。

我不信！

不信？上图：

现在是源代码模式下粘贴代码

看官注意看我粘贴进去的代码。

粘贴后点击确定，然后在预览页面看下效果。效果如图：

预览时看似正常

哟，有效果，代码没有屏蔽，鉴定完毕！

看官确定？要不来看看源码？上图：

看源码时才发现部分css属性已被过滤掉了

怎么样，有没有发现相对定位的属性被过滤掉了？？

3.3、原来这么简单！

好吧！那我现在知道了：就是在编辑模式下将左右尖括号转义下，然后再粘贴代码就可以了，原来这么简单！

如果看官有这种想法的话，艺灵要恭喜看官了：你咋不上天呢！有本事你写个css内部样式表！

30秒后

不科学啊，怎么又被过滤了，这什么破原理……如图：

编辑模式下粘贴内联样式表会被直接过滤

怎么样，是不是有点懵？

3.4、html转十进制

其实绕过style样式表的方法有很多，艺灵就再介绍一种，算是抛砖引玉下吧。至于剩下的一些方法，此处不便直说。不要问为什么，因为你知道的太多了！会被……

刚我们将左右尖括号进行了字符转义，下面我们还可以转成十进制。

左尖括号转义后就是；

右尖括号转义后就是。

好，转义完成后的代码如下：

<style>.box{position:relative;background:#ccc}</style>

还是同样的操作，直接复制上面的代码，然后扔到自定义模块中即可。如图：

将左右尖括号转成十进制即可

怎么样，这回css样式表成功显示了吧！

为了安全起见，我们可以用十进制来修改我们的源码。至于上面的演示代码，艺灵已整理好，有兴趣的看官可以直接复制后放到店铺中看下效果。

<div class=\”box\” style=\”position:relative;color:#f00\”>这是一个div标签，文字是红色。</div>

<style>.box{position:relative;background:#ccc}</style>

上面的代码最终效果如图：

最终效果是灰色背景的盒子中显示红色字

下面艺灵就本文的方法录制了一个小视频，可以看下里面文字总结。由于系统在pc端对视频不友好，所以想看视频的看官用手机访问即可。

视频加载中…

淘宝装修教程

对于淘宝店铺来说，完成店铺的装修非常的重要，现在店铺装修分为了电脑端和手机端店铺的装修，在电脑上面操作会更加的方便一点。那么如何装修店铺?

1、确定风格

想要打造有质感的店铺，让买家感觉到我们的产品都是有质保的品牌货，绝不是三无。纯色比较简单，修图的时候易操作，而且旺铺版本身的配色就是纯色好匹配。

2、看别人的店铺装修

就是看看看，既可以看付费模板找灵感，也可以看别人店铺。这个过程中，找到了几个提供免费代码，甚至一些板块的图或代码在线生成的网站。找到了不错的模板素材，包括图和代码。可以自己上网搜，一下能出来。

3、画草图

4、做店招

定位可以是在网上找到的店招图片，复制一份留个底。如果这图本身就是纯色，需要做的就是抹掉不需要的文字，加上我们店铺的名称。

如果店招只有店名，直接添文字保存即可。如果店招有滚动通知、店铺收藏等部分，店招最好保持纯背景功能，店名单独存为png，防止网页在不同分辨率的显示屏上飘移错位。

5、换背景图

可以找模板比较完整的，包含了店招背景图和店铺背景图。都是纯色，直接替换了。

6、做全屏海报

网上能搜到很多全屏海报的代码。可以用旺铺自带的海报滚动模块，只是把海报背景做成店铺背景一样的。因为店铺背景是纯色的，所以更简单了，新建一张同色的画布，把海报产品抠出来放上就好了。

7、隐藏一切模块的名称

比如上新、热卖等字样，千万别用模块的显示名称，不然风格马上就回到解放前。可以自己做图放上去，也可以直接新建自定义模块写文本就行了。一切背景色都用同一个颜色的色块填充可填充的地方有：页头背景、页面背景，色块的尺寸比例：随意。纯色的怎么填充都是一样的其它的代码在网上有很多，随意组合搜索，比如“导航栏css代码”“收藏店铺的链接生成”等。要充分利用搜索引擎。

总而言之淘宝装修并不复杂，只是很多的操作比较繁琐，比较费时间，所以很多商家都不太愿意把时间花在这上面。但是其实如果店铺装修的好，对于商品的销量也是会起到很明显的作用的。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com