【经验】秀米排版指南|特殊布局(如文字环绕图片等无法使用秀米基本布局组合出来的布局)

  总是看到别人模板里花里胡哨的,既实用稳定又美观,能兼容各种设备(电脑、手机、平板)。

  但凡阅读过秀米官方给出的排版教程,都会明白,这离不开“布局”二字。同时,但凡学过一点HTML网页设计,都会了然所谓“布局”只不过是fixed、relative、absolute、left、right等代码的抽象说法。

  总之,稍微了解一下排版基础知识,一定不会只晓得利用调整像素值或者打800个空格的方式去调整页面元素的位置。

  只可惜,为了降低学习成本,秀米将最基础的代码封装成为了所谓“基础布局”(如下图所示),这一举措降低了布局的灵活性。对于一位码农来说,HTML基础对于秀米,正像C语言对于Python。何况这个“Python”不比真实的Python,它是具有设计缺陷的,无法实现所有的“C语言”的功能。

【经验】秀米排版指南|特殊布局(如文字环绕图片等无法使用秀米基本布局组合出来的布局)_第1张图片

  在目前无法实现的布局中,最典型的就是文字环绕之类的固定布局了。

  对于我这种把秀米每一个现有的按键都琢磨透了、把它发布的每一篇排版基础文章都阅读完了的人,如果做不到模板里的效果,真相只有一个——工具本身做不到。
在这里插入图片描述

  工具有局限性,但是又喜欢模板里的效果,怎么办?显然,直接用模板就是绝大多数人的选择。
  但我们是有一定计算机基础的,所以,完全可以直接阅读模板的代码,从根源解决问题。

  以文字环绕为例。

方法一:借不算偷

  即使我已经知道模板的原理,最常用的解决办法也是直接用别人的——除非我真的搜不到想要的了。

  所以在这里我会也以文字环绕图片的模板,来简单介绍一下我搜索模板的思路

  1. 搜索“环绕”。
  2. 点击任意现有的模板。
  3. 删除不需要的组件,提取原始布局。

(如下图所示)

【经验】秀米排版指南|特殊布局(如文字环绕图片等无法使用秀米基本布局组合出来的布局)_第2张图片

方法二:自强不息

  虽然我们已经通过方法一拿到模板了,但是如果能知道它是怎么做出来的,便可以接触一种我们未知的设计过程了。多接触陌生的设计过程,才能积累足够的设计思路和方法,才能充分发挥自己的设计理念。

  想法很美好,我一直以来也都是这样做的。

  以前不屑于做固定布局,所以一直以来都没有出现问题,终于,我在文字环绕图片这一看似极其简单且菜的效果上翻车了

  首先,翻遍了所有的“基础布局”,都没有找到一模一样的布局框——我以为是有我没有注意到的参数设置。

  于是,我灵机一动,鼠标选择做不出来的布局框,然后点击“向右应用格式”,结果居然报错了!(如下图所示):

【经验】秀米排版指南|特殊布局(如文字环绕图片等无法使用秀米基本布局组合出来的布局)_第3张图片
  这说明什么?说明只靠调整秀米提供的基础布局的参数,是无法调整出想要的布局的。

  那就只能上f12了(开发者工具)。

  选中想做出来的布局、某个最接近的基础布局(这里选择列布局),以及完全没有样式的普通布局,分别查看元素代码,分析三个布局框(如下图所示):

【经验】秀米排版指南|特殊布局(如文字环绕图片等无法使用秀米基本布局组合出来的布局)_第4张图片

  可以看到,它们三个只有style是不一样的。其中我们需要的布局,style中有关键的float:right,而且去掉了display:inline-block

  既然只要添加float:right便可以与目标代码一模一样,干脆直接C-V关键代码,删掉display:inline-block加上float:right
  令人意外的是,点击保存、预览后,会发现,还真修改成功了!并且,扫码后在手机上看也是对的!

  但是,退出网页后重新进入,会发现又回到了原来的样子(说明直接修改的网页代码并不会同步保存到秀米后台)。而且,点击“复制”,会发现复制到的还是没修改过的组件(说明直接修改的网页代码甚至没有修改组件的属性)。

  泪目了。

【经验】秀米排版指南|特殊布局(如文字环绕图片等无法使用秀米基本布局组合出来的布局)_第5张图片

  所以亲爱的秀米模板是怎么制作出来的呢?我求助了亲爱的必应搜索,搜索秀米能直接修改代码吗,顺藤摸瓜找到了能够编辑代码的135编辑器

  找办法的过程中的百转千回就不多说了,总之,在秀米中不能直接修改代码,但在135编辑器中可以。不过,135编辑器的内容不能直接同步到秀米。所以还需要借助微信公众号后台作为中转。

  具体步骤如下:

  1. 使用秀米——导出——“继续使用复制粘贴”,将内容复制粘贴到135编辑器内。
  2. 在135编辑器中,用f12编辑代码,然后用一个微信公众号草稿箱作为中转站,135编辑器——135编辑器“微信复制”——复制到微信公众号图文素材。
  3. 秀米授权公众号——秀米“导入公众号图文”。

尾声

  只要大家会亿点html的基本语法,就可以突破秀米的修改局限性啦!(突破局限性的成果,如下面这个又菜又看不出名堂的图片所示)

在这里插入图片描述

  既然能修改HTML代码,并直接嵌入微信和秀米,这让我不由自主、情不自禁、顺其自然、理所当然地想到了——我能不能嵌入一段恶意JS代码啊……(bushi)

【经验】秀米排版指南|特殊布局(如文字环绕图片等无法使用秀米基本布局组合出来的布局)_第6张图片

  关注我,没准哪天我就会发一篇《如何在微信公众号文章中内嵌一段恶意JS代码窃取用户信息》呢~
【经验】秀米排版指南|特殊布局(如文字环绕图片等无法使用秀米基本布局组合出来的布局)_第7张图片

本账号所有文章均为原创,欢迎转载,请注明文章出处:https://blog.csdn.net/qq_46106285/article/details/124350701。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

你可能感兴趣的:(科普,#,琐碎小记录,html,前端,秀米,排版,微信)