Often browse articles on the network partners may encounter some such articles, when we are looking at the time, the rest of the content is hidden, need to specify the public number to reply keywords unlock.

These two days I also add my blog, because stepped on some pits, so record, hope to help more people. Let’s take a look at how to configure it.

OpenWrite

OpenWrite is a mass Posting software, blog guide public account – reading full text tool, media publishing platform, blog group Posting platform, advertorials promotion platform, advertorials promotion and publishing, blog release official website drainage technology gadget, wechat official account Markdown editor, multi-platform free map bed configuration, Markdown The editor is free and concise and smooth, and the articles are sent in groups with one key.

Here we use the blog guide public account provided by OpenWrite

Fill out the form below to generate your blogId

Go back to the list of blogs to see the blogId you just generated. Next, you can start the configuration.

Public Account Configuration

Log in to the public account background to configure automatic keyword reply

The automatic reply is as follows

<a href="https://readmore.openwrite.cn/code/generate?blogId=yourBlogId">Click the link to obtain the blog unlock verification code</a>
Copy the code

VuePress configuration

The OpenWrite tutorial is described below

  1. Add readmore. Openwrite. Cn/js/readmore…

This is easier to handle, just add one more data to the docs/.vuepress/config.js head

// docs/.vuepress/config.js
head: [...'script', { charset: 'utf-8'.src: 'https://readmore.openwrite.cn/js/readmore.js'}]]Copy the code
  1. Add a script

Mainly in this step to step on a few holes. I hope I can help you after reading my solution.

  • initIn the methodid

This ID must be the ID of the container, and VuePress’s content container does not have an ID attribute. Then you can only add the ID through js as follows

const container = document.querySelector('.theme-reco-content.content__default');
container.setAttribute('id'.'container');
Copy the code
  • To load the js

At first I imported the same js file in docs/.vuepress/config.js head, but I got an error saying I couldn’t find the container.

To solve this problem, I added the window.onload event, and then another error: BTW is not defined. Readmore. js uses the global BTW object directly.

So I added BTW to the window, and this time I looked at it, and it seemed to work.

window.onload = () = > {
  const container = document.querySelector('.theme-reco-content.content__default');
  container.setAttribute('id'.'container');
  window.btw = new BTWPlugin();
  window.btw.init({
    id: 'container'.blogId: 'xxx'.name: 'front develop'.qrcode: 'xxx'.keyword: 'Captcha'}); }Copy the code

After testing, this method only works the first time you enter the page. Because VuePress is also a one-page application, the onload event only fires once, so this method still doesn’t work.

Final plan

Finally, use the Vue global Mixin as follows:

// docs/.vuepress/enhanceApp.js
// Using asynchronous functions is also possible
export default ({
  Vue, // VuePress is using the Vue constructor
  options, // Some options to attach to the root instance
  router, // Route instance of the current application
  siteData, // Site metadata
  isServer, // The current application configuration is either server rendering or client
}) => {
  Vue.mixin({
    // Mix injection, load the global file
    mounted() {
      const container = document.querySelector('.theme-reco-content.content__default');
      if(! container)return;
      container.setAttribute('id'.'container');
      window.btw = new BTWPlugin();
      window.btw.init({
        id: 'container'.blogId: 'xxx'.name: 'front develop'.qrcode: 'xxx'.keyword: 'Captcha'}); }}); };Copy the code

Advantages and disadvantages of the OpenWrite tool

First, the disadvantages

  1. OpenWrite hide the content of the article through CSS style, so a little bit of front-end students, you can directly change the CSS view the full text. The main styles are as follows:
position: relative;
height: 350px;
overflow: hidden;
Copy the code

  1. The content of the public, keywords reply to readmore openwrite. Cn/code/genera… If the user knows the blogId, he can open the link directly to get the captcha.

  2. There are browser plugins that can turn off OpenWrite’s hiding features.

The advantage is no server, no development, and that’s enough for me.

The above is all the content of this article, I hope to help you, if you have any questions, please leave a comment in the comment section or you can go to my official account to get wechat contact me.

This article is published by OpenWrite!