Obsidian WeChat Official Account Article Formatting and Publishing, with CSS Style Template
Recently, I’ve been trying to improve the automation of some work operations. I learned about a plugin called wechat-public-platform for Obsidian, which allows editing in Obsidian, bringing up commands with cmd+p, and directly formatting and storing articles to the WeChat Official Account draft box or directly mass-sending them. It also has the function of downloading others’ WeChat Official Account articles and converting them into md format to Obsidian. This article mainly introduces how to edit, format, and store articles in Obsidian to the WeChat Official Account draft box.
Open Obsidian, go to Settings → Plugins → Community Plugins → Browse community plugins. Search for wechat-public-platform and install it.
Configure the AppID, Secret, and IP whitelist of your WeChat Official Account. After configuring, you can click CONNECT to test.
The Download folder below is used when you need to download articles from the WeChat Official Account; fill in the local save address. It’s not needed for publishing.
The last thing to note is Custom CSS. Clicking the folder image will bring up a directory. Paste your desired WeChat Official Account layout CSS style file into this folder. It must be renamed to custom.css. After changing the CSS file, exit Obsidian and reopen it. A CSS activation prompt will pop up, indicating that the CSS is taking effect. I will explain in detail later where to download CSS styles and my own modified CSS styles.
The AppID and Secret are set in the API management section under “Settings and Development” in the WeChat Official Account backend. Setting the Secret requires scanning a QR code generated by the registered WeChat Official Account account. Accounts bound to long-term operators do not have permission to generate it, and it’s only done once; the newly generated Secret will change.
For those who have never set the IP whitelist (third row), this interface will not be displayed. You need to go to the left sidebar’s security center to add the network IP. It supports dynamic IPs like 182.198.0.0/16 and fixed IPs like 182.244.84.29.
After successfully configuring these three parameters, clicking CONNECT on the wechat public platform will establish a connection. It will also load automatically when you log back into Obsidian.
After writing the article, you need to add document properties; the shortcut key is cmd+;
author corresponds to the author of the WeChat Official Account, banner is the image link of the article cover, digest is the article summary, and open_comment being 1 means allowing comments, and 0 means prohibiting comments. I haven't seen parameter configurations for originality, appreciation, and tags yet, so they need to be done manually. Therefore, I suggest using this plugin to save to the draft box and preview and check it yourself.
Press cmd+p to bring up the command search bar. I usually use “add draft to wechat platform”. After bringing it up, it will upload the current interface to the WeChat Official Account draft box. It takes about 4 seconds, and a pop-up window will show whether the image upload was successful. The last pop-up window displays success new draft media_id in the upper right corner (as shown in the image above).
Without CSS settings, the default template is quite ugly. To get a nicer WeChat Official Account CSS style, download it from the online Markdown editor https://markdown.com.cn/editor/. If you want to customize it, you can also debug your own CSS style on this platform.
Get Joyce Birkins’s stories in your inbox
Join Medium for free to get updates from this writer.
Click the layout theme in the top left menu bar to see various themes. You can download CSS and also have custom CSS options.
The screenshot shows my customized CSS style effect on iOS; I like to use green. PingFang font is set for iOS, and it’s the default font on Android. Overall, the supported styles for fonts are quite limited. I recommend a font size of 15px for the main text; 14px is too small.
The headings are from h2 to h4. Whether I’m writing Markdown or in Feishu, I like to start with h2 headings, leaving room for later embedding into larger documents.
Below is my CSS style template. Copy it to the plugin folder, and be sure to rename it to custom.css; otherwise, it won’t work.
/*Joyce Birkins Personal css template*/
#nice {
line-height: 1.8;
letter-spacing: .041em;
color: rgb(63, 63, 63);
font-size: 16px;
word-break:all;
}
#nice p {
padding-top: 1em;
font-size:15px;
font-weight:light;
font-family:PingFangSC-Light,simsun,serif;
color: rgb(74,74,74);
line-height: 1.95em;
margin-left:0.6em;
margin-right:0.6em;
}
/ 二级标题 /
#nice h2 {
color:#38c76e;
display:block;
text-align:center;
margin-top: 1em;
margin-bottom: 10px;
}
/二级标题伪元素/
#nice h2:before {
}
/ 二级标题内容 /
#nice h2 .content {
text-align:center;
display: inline-block;
height: 38px;
line-height: 42px;
color: #38c76e;
margin-top: 38px;
font-size:18px;
font-family:serif,PingFangSC;
margin-bottom: 10px;
}
/ 三级标题 /
#nice h3:before {
content: "";
display: inline-block;
width: 16px;
height: 15px;
line-height:15px;
margin-bottom:1px;
}
#nice h3 {
color:#38c76e;
margin-top:1.2em;
}
#nice h4 {
margin-top: 30px;
}
/ 三级标题内容 /
#nice h3 .content {
font-size:16px;
font-weight:750;
font-family:PingFangSC-Light,serif,sans-serif;
display:inline-block;
margin-left:-7px;
color:#38c76e;
}
/ 三级标题修饰 请参考有实例的主题 /
#nice h3:after {
}
/ 四级标题 /
#nice h4:before {
color:#38c76e;
content: "";
display: inline-block;
width: 16px;
height: 15px;
line-height:15px;
margin-bottom:1px;
}
#nice h4 {
}
/ 四级标题内容 /
#nice h4 .content {
color:#38c76e;
font-size:15px;
font-weight:550;
font-family:PingFangSC-Light,"simsun",serif,sans-serif;
display:inline-block;
margin-left:-7px;
color:#38c76e;
}
/ 列表内容 /
#nice li {
}
/* 引用
左边缘颜色 border-left-color:black;
背景色 background:gray;
*/
#nice blockquote {
padding: 15px 20px;
line-height: 29px;
border-left:4px solid #38c76e;
display:block;
}
/ 引用文字 /
#nice blockquote p {
padding: 0px;
font-size:13px;
color:rgb(89,89,89);
}
/ 链接 /
#nice a {
color: #38c76e;
text-decoration:none;
font-size:14px;
border-bottom: 0.8px solid #38c76e;
}
/ 加粗 /
#nice strong {
font-weight:700;
font-size: 15px;
line-height: 1.95em;
color: #38c76e;
}
/ 斜体 /
#nice em {
padding: 0px;
font-size:15px;
color:#38c76e;
}
/ 加粗斜体 /
#nice em strong {
font-size:15px;
color:#38c76e;
letter-spacing:0.2em;
}
/ 删除线 /
#nice del {
}
/ 分割线 /
#nice hr {
height:1px;
padding:0;
border:none;
text-align:center;
background-image:linear-gradient(to right,rgba(93, 186, 133,0),rgba(93, 186, 133,0.75),rgba(93, 186, 133,0));
}
/ 图片 /
#nice img {
border-radius:4px;
padding-left:10px;
padding-right:10px;
margin-bottom:
As for image hosting, the commonly used method is to combine PicGo with GitHub. Many tutorials are available online, so I won’t elaborate here.
In the future, publishing articles to the WeChat Official Account will no longer require switching to a dedicated formatting software. You can format directly in Obsidian and send it to the Official Account’s draft box.
Currently, the wechat-public-platform plugin only supports publishing to one WeChat Official Account. For managing multiple accounts, there’s another Obsidian plugin called NoteToMP, but it requires a subscription fee of 10 yuan per month. I won’t list it here.
If you need to copy as HTML to paste into websites like Zhihu, Substack, or Medium, Obsidian has a “copy as HTML” plugin. Select the entire article, press cmd+p to bring up the “copy as html” command, and you can copy the HTML formatted file to the clipboard.
Chinese Version AI Articles on WeChat : pamperherself
