Building a Mini Program Version of Typecho

Foreword

Recently I've seen quite a few bloggers publish WeChat Mini Program versions of Typecho, but the quality varies. Some open-source ones have unattractive interfaces, and the attractive ones charge fees. Being frugal, after trying many projects on GitHub, I finally found one that actually runs. Setting aside what the interface looks like, at least it runs. Other projects had more or less problems with my theme, though that may have been debugging issues on my side. After all, it was my first time touching WeChat Mini Programs, and at first I wasn't very familiar with how the project is built. Only after spending more time did I gradually figure out the specific steps. Precisely because the open-source program's interface isn't very attractive, and because it's difficult for them to work with the handsome theme (for example, the loss of header images and post excerpts), I chose to modify the front-end pages on top of a version that runs.

Project Address

WeChat-Typecho

Please, dear experts, give it a Star, I'm humbly begging

Scan to Preview

Special Thanks

I put acknowledgements at the very beginning because I'm also a coder humble programmer myself, so I deeply understand how hard writing code is, and I would like to express special thanks here

WeTypecho——Expert from Chengdu, the "Seventh Handsome," author of the blog-side plugin

Pisces-Mini-Program——Modified by the author based on WeTypecho

ColorUI——CSS library for Mini Programs

Notes

Why didn't I choose other authors' projects on GitHub?

Because I want my WeChat Mini Program to not only allow browsing but also interaction, so users can use the Mini Program to comment and express their views and thoughts on articles. If in the future I have the ability to write back-end JS, I will improve the projects on GitHub that I think look good.

For example, WxappForTypecho

The letter-based function naming in the project was not written by me!!!

Mini Program Publishing Requirements

1. Domain name has been registered with ICP filing
2. Domain name has HTTPS enabled
3. Be an adult, or have a WeChat payment-linked account for users 18 and over

Add your domain to it. If your image and other resources are stored at an address that is not the domain you set above,

you also need to add your image resource domain, otherwise the Mini Program may be unable to display resources.

Features

The currently supported basic features are as follows:

1. Browse articles by category directory
2. Display of the About personal page
3. Homepage article carousel
4. Comment on articles
5. Automatically fetch article header images
6. Display of images and videos
7. Support for Markdown and HTML parsing
8. Recommended reading articles
9. Search articles
10. Custom character display of different card styles

Custom Characters

style (display style of homepage articles, default value is 3, I haven't tested the others)

1. Large image card form for code
2. Small image card display form for representative
3. Background card form for representative

isPay (whether the article requires an ad launch, default is 0) 1: Yes 0: No

thumb (article thumbnail)

Tutorial

On line 236 of /common/vendor.js, modify your information. I didn't write this function naming convention, so don't hit me.

When debugging in the WeChat Developer Tools, you need to check the options in Details: "Do not validate legal domains" and "web-view", otherwise articles won't display during debugging.

Modify r and i and make them correspond with the back-end Mini Program

On line 6 and line 8 of /pages/about/home/home.wxml, modify your blog name and description.

On the third line of /pages/index/index.wxml, modify the name at the very top of the Mini Program.

On line 57 of /pages/index/index.js, modify the author information under each article.

On line 16 of /app.json, modify your blog name.

On line 2 of /pages/about/home/home.wxss, modify the avatar address on the About page.

On line 4 of /pages/about/home/home.wxml, modify the avatar address.

On /pages/about/home/home.js第73 and line 74, modify the image address of the WeChat reward code.

On line 157 of /pages/details/details.wxml, modify the image that appears after you like something; anyway, modify it yourself.

Typecho Plugin Side

Copy WeTypecho to the plugin directory, then activate and configure it in the backend. The name must be correct, otherwise an error will occur.

• APISEC
• Blog author name
• Blog URL

These three items are required; the rest is optional (I guess).

It must be consistent with the API_SECRET field in the Mini Program side config.js, otherwise data cannot be read from the server.

Code Explanation

app.js is the initial entry file. wxss is equivalent to CSS in an HTML project. If you add new code in js, you need to declare it in the json file.

static is where resource files are placed. You can modify the materials yourself, but it seems not all of them are referenced, so look around on your own.

pages contains all the pages, which can be referenced and navigated to. For example, to jump to the About page, the address is pages/about/home/home about under the home directory's home method, roughly speaking. I'm also touching WeChat Mini Programs for the first time..

This project introduces Color UI. You can download the demo and copy write your own.

Below line 26 of /pages/index/index.js is where you modify the two jump buttons on the homepage.

	categories: [{
		cuIcon: "write",//这个是图标，可以自己去color ui的小程序找名称修改
		color: "white",//这个是文字颜色
		bg_color: "bg-gradual-green",//这个是背景颜色，可自行修改
		badge: 1,//小红点文章个数，填1就是一个小红点，大于1就是显示数字，大于99显示99+
		mid: "24",//这个是分类id
		title: "随笔",
		name: "Essay"
	}，

You can add parameters yourself. The calling method is as follows {{item.title}}. You must declare wx:for="{{categories}}" before use.

Please reward me