preview

(Picture above shows article editing)

preface

“Beam is deskmate Blog” it is a pursuit “acme contracted” product, show the aesthetic feeling of text with contracted method. “Address: http://www.liangtongzhuo.com”

function

  • Online representation Markdowm
  • Code block highlight
  • Adaptive layout

Technology dependence

  • Native JavaScript, ES6 syntax
  • Third Party Framework
    • LeanCloud Storage framework
    • Marked transformation Markdown
    • Highlight code block highlighting

The technology principle

Static Pages are hosted to GitHub and generated Pages, and then accessed to the database through the REST interface packaged by LeanCloud. Generally, blog visits are not large, 30,000 / day API free amount is enough. It is highly recommended that you use LeanCloud. The REST API is easy to understand. I an imitated LeanCloud REST framework at https://github.com/liangtongzhuo/ltz-rest

How to use it?

1. Fork and clone to the local computer

https://github.com/liangtongzhuo/blog in click on the Fork, and then their clone local warehouse.

git cloneThe warehouse addressCopy the code

2. Registered LeanCloud

  • Address: https://leancloud.cn/
  • After successful registration, create the App -> Click Settings -> Click Apply Key -> fill the App ID and App Key into the blog file js/config.js.
const APP_ID = '2MY9AH1hE38iVn6cfSMeVXW8-gzGzoHsz';
const APP_KEY = 'rhmGmvC4cz4qohsQlpmP0KV0'; window.AV.init({ appId: APP_ID, appKey: APP_KEY }); // Tag const tagStr ='homepage, non-technical articles, Node, Web, iOS, making, anime, tools, programming, games, translation, algorithm, Swift, directing, Vue, HTML, JavaScript, books, I';
Copy the code
  • At this point you are finished configuring.

3. Writing an article

  • Open index. HTML. For simplicity of the interface, there is no button. Clicking a unique title will jump to the login interface.
  • Enter the first time, just need to enter the password and click register, then will jump to the home page.
  • Click on the title again to enter the post page.
  • To modify the article, click into the preview article interface, and then click the title of the article can be modified as the article.
  • 10 seconds to automatically save data, so there is no save button.

At the end

Okay, we did have a little trouble. Making address: https://github.com/liangtongzhuo/blog