A Bit of Nonsense
Once again, I've procrastinated until the last day when I have to update. Last week actually had quite a bit of content, but I really didn't want to move. I encountered many problems with an Android mini-game, and after solving them, new problems appeared. In the process of fixing bugs, I discovered a magical thing: Mandelbrot Set (it turns out an old fellow on the other side of the ocean once had headaches over Android Canvas performance issues as well...)
There's a very beautiful GIF. I originally wanted to paste it here, but it's a bit too large (26MB). Entry point: http://7xl5fb.com1.z0.glb.clouddn.com/mandelbrot.gif
1. Solution Selection
Since the last update of the WeChat Public Platform editor (2015-11-20), its usability has vanished. If you want beautiful layout, it seems you must rely on third-party online editors. When I registered the subscription account, I considered doing automatic synchronization, but it seemed to fall through because personal accounts aren't allowed for verification and don't have open interfaces.
If you don't have interface permissions but still want convenience, there are 3 choices:
-
Hosting on a third-party platform
-
Using non-public interfaces (simulated login, then...)
-
Generating rich media messages based on blog posts (then manually copying and pasting)
Hosting is out of the question; no spare cash. I considered non-public interfaces for a long time—not to mention instability, there are very few usable resources, and implementation might take a long time (time is money, my friend). I gave up, but found several potentially useful things:
- WordPress plugin wechat_subscribers
Features: Auto-reply with latest articles, random articles, search results, etc. Permanently free.
Address: https://github.com/Soopro/wechat_subscribers
- WordPress plugin Wechat-Manager
Features: Keyword auto-reply with latest articles, most commented articles within a week/month/year, and article search results.
Address: https://github.com/9IPHP/Wechat-Manager
- Node-encapsulated Wechat API
Features: Usability should be better than the official API (after all, Jackson Tian 70.2%).
Address: https://github.com/node-webot/wechat-api
As for the first two WP plugins, although powerful, they don't solve the problem of editing rich media messages. wechat_subscribers might be able to, but I eventually found another plugin and gave up trying.
Highly recommended, a very obscure (the 1 star was just added by me) WP plugin:
- WP_wechat_text_generator
Introduction: A WordPress plugin that can generate WeChat official account articles.
Address: https://github.com/nervouna/WP_wechat_text_generator
2. DIY
I haven't written a WP plugin before. I was a bit slow while looking things up and modifying, but it was okay. The first thing I saw in the source code was the License:
* License: WTFPL
*
* DO WHATEVER THE FUCK YOU WANT, PUBLIC LICENSE
* TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
*
* 0. You just DO WHATEVER THE FUCK YOU WANT.
A very interesting author. If you are interested, you can check out his homepage: IGNORE THE BLUEPRINT
I won't say much about the specific modification process; after all, it's not a very glorious matter (the original author is a PM, which I actually discovered from the JS). I encountered two rather troublesome problems.
1. Markdown
After the plugin gets the post content, it explodes it into rows and outputs '<p>'.row.'</p>'. My blog content is in Markdown format and needs preprocessing, as follows:
// markdown transform
$wechat_item_content = apply_filters('the_content', $wechat_item_content);
The code above is universal, equivalent to event.emit('the_content') in Node. It calls relevant functions of all plugins that want to process blog content, such as the one in the Markdown plugin:
add_filter('the_content', 'Markdown', 6);
add_filter('the_content', 'balanceTags', 50);
2. Custom CSS
The style must be changed. The plugin's style is too simple and hasn't beautified programmer-specific tags like code and pre. The style modification part is implemented via JS, structured as follows:
function refineStyle() {
// h2~h5
var h2s = post.getElementsByTagName('h2');
for (var i = h2s.length - 1; i >= 0; i--) {
// .entry-content h2 { font-size: 18px; padding-left: 13px; margin: 20px 0; }
h2s[i].style.fontSize = '18px';
h2s[i].style.margin = '20px 0';
h2s[i].style.background = '#66b3ff';
h2s[i].style.padding = '4px 0';
h2s[i].style.paddingLeft = '13px';
h2s[i].removeAttribute('class');
};
// ...
}
document.addEventListener('DOMContentLoaded', function() {
refineStyle();
selectText('wechat-post');
});
That's the idea. Although the implementation is ugly (you can use cssText for a facelift), the method is clever. If I had to parse blog content and fill in inline styles using PHP... the thought is terrifying. After the facelift, it looks like this:
// table
var tables = post.getElementsByTagName('table');
for (var i = tables.length - 1; i >= 0; i--) {
// .entry-content table, .comment-content table { border-bottom: 1px solid #ededed; color: #757575; font-size: 12px; line-height: 2; margin: 0.8em; margin-top: 0; width: 100%; }
tables[i].style.cssText = 'border-bottom: 1px solid #ededed; color: #757575; font-size: 12px; line-height: 2; margin: 0.8em; margin-top: 0; width: 100%;';
tables[i].removeAttribute('class');
//!!! Note to remove w, h
tables[i].removeAttribute('width');
tables[i].removeAttribute('height');
};
Using cssText saves a lot of trouble and makes it easier to convert from CSS to inline styles.
3. Other Issues
There's an issue in Chrome. After generating the article, using selectText to select the whole article and then Ctrl+C to copy it to the WeChat editor results in style issues—many styles are lost (Note: The effect looks correct in the online preview, but many styles disappear when sent to a phone for preview). The specific implementation of selectText is as follows:
function selectText(containerid) {
var text = document.getElementById(containerid);
// IE
if (document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else {
// others
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
I searched around but found nothing. The selectText method doesn't seem to have any issues. So, I finally decided to suggest using FF (Firefox).
P.S. Actually, in Chrome, if you ignore the automatically selected content and manually select the whole text with the mouse, then copy it, the effect is correct. I don't know what the difference between the two is.
I also considered automatically copying to the clipboard, but compatibility seems difficult, especially for Chrome. Never mind.
No comments yet. Be the first to share your thoughts.