Blog support

  • Article classification function
  • Exceptional module
  • According to the years archive
  • The article set-top
  • Article creation time support
  • Article reading statistics and comments
  • Better reading effect on mobile
  • RSS feeds
  • Article setting password

The development environment

  • VuePress 1.x
  • Node. Js v10.8.0

Open source address of this blog

  • Github

Results the preview

  • The online address of the blog is blog.iizhi.cn

start

Specific development details have been very detailed on the official website, and the code has been open source, so here is not to say specific details, mainly enumerates some problems encountered in the development process.

How do I add classified routes

Just get the Vue and Router objects in enhanceapp.js and add the normal route to the application as you develop the Vue project.

The code is as follows:

const CategoryLayout = (a)= > import('@theme/layouts/CategoryLayout')

const CATEGORYPATH = '/category/'

const install = (Vue, { router }) = > {
  let routes = []
  routes.push({
    path: `${CATEGORYPATH}:category? `.component: CategoryLayout,
    meta: { tag: true }
  })
  router.addRoutes(routes)
}

export default { install }
Copy the code

Article creation time support

By default, VuePress does not have the creation time field. In fact, it is relatively easy to implement this function through the Plugin provided by VuePress.

Remember that the plugin in Vuepress runs in a Node environment. So just use the Fs.statsync API provided by Node.

The specific code is as follows:

const fs = require('fs')

module.exports = (options = {}, context) = > ({
  extendPageData ($page) {
    $page.publishDate = getFilePublishDate($page._filePath)
  }
})

function getFilePublishDate (filePath) {
  let publishDate
  try {
    publishDate = fs.statSync(filePath).birthtime
  } catch (e) { /* do not handle for now */ }
  return publishDate
}
Copy the code

Simply load the plugin in the config.js of vuepress.

... the plugins:require('./plugins/page-publish-date.js')],...Copy the code

Article reading statistics and comments

Valine library is used for reading and statistics functions of articles. This seems to be the only library that can do both, so I chose this one.

It is also relatively simple to implement, but there are two problems.

1. Vuepress fails to be compiled

window.AV = require('leancloud-storage')
const Valine = require('valine')

new Valine({
    el:'#comment'. })Copy the code

The local dev will pass if you initialize the comment component as follows but NPM run build will be prompted as Window is not unas This problem occurs even with the identifier of ClientOnly provided by VuePress on the comment component.

The final solution is to introduce leanCloud-storage and Valine libraries as script tags. And poll in the comment component to check whether the two libraries are loaded, and initialize the comment component after the loading is completed. The code is as follows:

<script> let valine = null const checkValine = () => { if (window.Valine) { valine = new Valine({ appId: '* * * * * *, appKey:' * * * * * *, el: '# comment, placeholder:' comments in the 'avatar:' monsterid 'path: window.location.pathname, recordIP: true, visitor: true }) } else { setTimeout(checkValine, 50) } } export default { props: ['show'], watch: { '$route': 'refresh' }, mounted () { checkValine() }, methods: { refresh () { checkValine() } } } </script>Copy the code

2. After configuration according to the tutorial, it was found that the comment content was not switched when the article was switched

This is mainly due to the fact that the Valine library caches the path of the current page if the path attribute is not passed when the global object is initialized. The solution is as simple as passing a path with the specified value, which is window.location.pathname in the code above 👆.

Some other questions

In fact, there are some other problems in the development process, such as the classification of the route through the home page can be directly accessed, but if you directly enter the address in the browser address bar, Nginx will not index the corresponding file, prompting a 404 error.

For this problem, simply add the following 👇 configuration to the nginx configuration

location / {
  try_files $uri $uri/ /index.html /404.html;
}
Copy the code

Other problems

I set up a wechat group to communicate with specific questions