微信公众号排版

常见问题

有什么作用？

真正意义地，只专注写作，如何。

可以将Bitcron上某个网站内最近的文章，按照指定的风格样式布局，一键点击，获得富文本内容，然后再粘贴到微信公众号的后台就可以了。

支持图片吗？

支持。

怎么试用？

访问这个地址，选择一篇文章、一个样式，点击Copy to Clipboard ，然后再粘贴到微信公众号的后台，再在微信公众号进行效果的预览即可。

为什么粘贴无效？

需要比较高级的浏览器特性支持，建议使用Chrome。

为什么复制过来的样式有点奇怪？

可能存在浏览器兼容性问题，建议使用Chrome。

不希望文章提前在网站公开？

文章发布到Bitcron的时候，可以设定status
或者直接在网站设置的时候，为网站设定访问密码。

微信后台图片粘贴失败？

一般情况下，比如使用MarkEditor发布到Bitcron上的文章，可以直接拖动图片进行插入，Bitcron上能显示的图片，也是支持直接粘贴到微信公众号的后台的。
但是图片粘贴、并自动上传，这是微信公众号后台本身的支持，如果遇到粘贴图片失败的，一般可以重试几次即可。

图片的原图很大怎么办？

Bitcron默认支持最大20Mb的图片，粘贴到微信公众号后台则不会是原图显示，这个App本身会自动处理手机端需要的最大图片尺寸，并不会直接向微信公众号后台发送原始图片，所以不用担心。

支持代码高亮吗？

应该是支持的。

支持数学公式吗？

呃，原则上是支持的，但实际的效果因为微信浏览器上字体的问题，并不是太理想。

支持流程图吗？

好像也是支持的。

可以自定义样式吗？

可以的。

怎么自定义样式？不会怎么办？

请继续阅读本文档下面部分。
自定义样式，除了CSS的知识外，也同样需要HTML结构的知识，如果不会自定义样式，那么寻求朋友，或者搜索引擎、Github。
如果仍然愁眉不展，建议不要使用……

这个App收费吗？

App并不收费。但是Bitcron本身并不是免费的。

还是用不了，怎么办……

再自己想想办法？呃，实在不行，那就别用了……

不能注册Bitcron，怎么办？

请找有邀请资格的自己的朋友。这个App依赖于Bitcron彪悍的后台系统，但不代表Bitcron全部，我们不会因为一个App开放注册。

如何启用？

某个网站第一次启用

第一步，登录bitcron.com，并进入首页。
第二步，找到 Apps(or 应用), 点击进入。
第三步，注意页面右上角，选择自己需要应用这个App的网站
第四步，找到微信公众号排版, 选择 Apply, 然后就会进入网站Apps的管理界面，默认会赋予一个URL，/wechat
第五步，访问yourdomain.com/wechat即可。

注意，其中yourdomain.com 是自己网站的可访问域名

已经启用过的

访问yourdomain.com/wechat即可。

公众号文章的实时预览

这个App也同样支持文章的实时预览，但最终效果仍然以微信公众号自身的预览效果为准。

如何使用实时预览？

选择对应的文章、对应的样式后，在页面底部，有一个realtime preview on mobile，点击，会有一个二维码窗口弹出。
使用移动设备对其扫码，就能访问到页面了。(如果页面被转码，请在移动设备上的浏览器直接打开)
然后，如果使用MarkEditor进行文章的书写，保存并发布；或者直接通过Dropbox同步；那么在文章保存的时候，页面会自动刷新。

注意事项

如果实时预览的时候，有新增的图片插入，由于图片本身同步的速度会比文章慢一些，所以初期图片会无法显示，稍等片刻(视网络情况，一般几秒钟)后，刷新或者继续书写等下次自动刷新，图片就会出现。
实时预览的效果，接近微信公众号文章最终的效果，但仍以其最终的效果为准，文章发布之前，仍然建议使用微信公众号自己再发送、预览一遍。

如何定义自己的样式？

基本方法

在自己的网站下，创建_markdown这个目录，然后创建一个 nam.scss (支持的后缀为scss、sass、less、css)类似名称的样式文件，这个App的页面就会自动在样式列表中载入这个样式以供选择。
如果同时有同名的.txt文件，比如也是name.txt，则再按照里面的规则，重组内容的HTML结构。
比如一个scss的样式文件，一般自定义需要控制两个一级class即可: wechat_main & markdown:

.wechat_main{
    // 全局的样式，一般特别排版的时候，可以padding，这样实际内容左右可以产生空白
    padding: 0 15px;
    line-height: 1.5em;
}
.markdown{
    // xxxxxxx 具体的元素对应的样式
    code { color: #D23B2F; }
    strong{ color: #000; }
}

DOM元素替换

由于微信公众号对 section 这个DOM有比较多的支持，所以，有些时候在特定布局上，需要转换某些HTML的结构。
一行一条替换规则，key与rule使用空格隔开，比如 h2 <div>$</div>, 这条规则，就是指将<h2>$</h2> 替换为 <div>$</div>，

替代符:

$表示innerHTML的意思。
$$表示outerHTML的意思。

附注

默认style1, style2, style3的规则如下。

style1 & style2 对应的dom替换规则:
h2 <section class=t1><section class=t2><section class=t3>$</section></section></section>\n
h3 <section class=t1><section class=t2><section class=t3>$</section></section></section>\n

style3 对应的dom替换规则:
h2 <section class=t1><section class=t2><section class=t3>$</section></section></section>\n
h3 <section class=t1><section class=t2><section class=t3>$</section></section></section>\n
blockquote <section class=b1><section class=b2>$</section></section>\n
em <section class=caption>$$</section>

关于Bitcron Markdown解析结果

Bitcron 的 Markdown 解析引擎会在最终的HTML结构中，增加一些额外的信息，从而可以实现更多潜在的效果，比如一张图片以及图片后面的一个附注说明。
具体请参考API的说明文档 Bitcron Markdown 解析引擎

关于 style3 的一点说明

style3非常巧妙地，将blockquote(也就是> xx这个语法) 作为一个特殊的结构。
在这个blockquot内，em元素(也就是*xx*语法)会被处理为类似一个小标题。
如此，使用常规的 Markdown 语法，但最终又获得了纯是Markdown转成的HTML而无法实现的效果。当然，在正文中，则要避免使用 blockquote & em 标签对应的语法，以免造成混淆。

关于微信公众号样式的一些小Tips

1，微信公众号内的 CSS 规则，不是所有都兼容了，需要自定义的话，调试会花一些时间。
2，背景色如果要用全白，防止被过滤，使用#fefefe这个色值。
3，padding 多数时候比 margin 会更容易其作用，后者很容易被过滤掉。
4，section 这个标签的样式应用比较多，相对而言不怎么会被过滤掉。
5，以上是我们在调试过程中总结的小贴士，或许有更多微信公众号后台定义的隐藏 Tips 则要自己发现。而要完成一个排版模板，需要对 CSS 有一定的熟悉；如果实在不熟悉，让自己的朋友帮忙，拿到样式文件后，放置到自己的网站内的_markdown文件夹下即可。

常见问题
如何启用？
- 某个网站第一次启用
- 已经启用过的
公众号文章的实时预览
- 如何使用实时预览？
- 注意事项
如何定义自己的样式？
关于微信公众号样式的一些小Tips