Come in and have a look. Maybe there’s something you need…

preface

I don’t need to say more about the benefits of Vuepress, which is too convenient for white piao like me. At the beginning of using Vuepress, I wanted to record the problems I encountered in daily work, because a good memory is better than bad writing, so I set up a simple blog with Vuepress. Later, I found that the theme provided by Vuepress was a little rough. Although I am a white whoring party, but also a little pursuit is not, so I began to look for a suitable theme on the Internet, around a big circle finally found this theme, vuepress-theme-reco, simple and beautiful, the following is some summary in the process of using.

Home page

It was like this before the transformation

  1. Transparent navigation bar + cancel top sucking

Create a style folder under the.vuepress file, then create an index.styl file, and write the corresponding style. Note that some styles may not be able to override the default style, you can customize the class name in the home file to increase the priority, see here for details

  1. Background full screen + arrow boot effect

I’ve seen several blogs use this effect, but I haven’t explained exactly how to do it. My method is to add JS and CSS to the bottom of the index.md file on the home page. The specific code is as follows:

<style> .anchor-down { display: block; margin: 12rem auto 0; bottom: 45px; width: 20px; height: 20px; font-size: 34px; text-align: center; animation: bounce-in 5s 3s infinite; position: absolute; left: 50%; bottom: 30%; margin-left: -10px; cursor: pointer; } @-webkit-keyframes bounce-in{ 0%{transform:translateY(0)} 20%{transform:translateY(0)} 50%{transform:translateY(-20px)} 80%{transform:translateY(0)} to{transform:translateY(0)} } .anchor-down::before { content: ""; width: 20px; height: 20px; display: block; border-right: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(135deg); position: absolute; bottom: 10px; } .anchor-down::after { content: ""; width: 20px; height: 20px; display: block; border-right: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(135deg); } </style> <script> export default { mounted () { const ifJanchor = document.getElementById("JanchorDown"); ifJanchor && ifJanchor.parentNode.removeChild(ifJanchor); let a = document.createElement('a'); a.id = 'JanchorDown'; a.className = 'anchor-down'; document.getElementsByClassName('hero')[0].append(a); let targetA = document.getElementById("JanchorDown"); Targeta.addeventlistener ('click', e => {// add the click event this.scrollFn(); }) }, methods: { scrollFn() { const windowH = document.getElementsByClassName('hero')[0].clientHeight; / / get the document window height. The documentElement. ScrollTop = windowH; // Scroll to the specified position}}} </script>Copy the code

This can achieve the effect of click scrolling, you can go to the home page to view the effect, through the above method can also be more processing of the page, we can explore according to need.

The plug-in

  1. kanbanniangKanban niang plug-in

Install the dependencies first, then configure the plug-in in config.js as follows

  module.exports = {
    themeConfig: {
      plugins: [["@vuepress-reco/vuepress-plugin-kan-ban-niang",
          {
              theme: ["miku"].clean: true.modelStyle: {
                position: "fixed".right: "65px".bottom: "0px".zIndex: 99999.pointerEvents: 'none'}}],]}}Copy the code

Results the following

There are several configuration options for theme, here I just choose one of them and hide all buttons to make it look cleaner, the specific configuration can be viewed here.

  1. valineComment on the plug-in

I’m using Valine. You need to register an account on LeanCloud and create an app. After obtaining the appId and appKey, you can configure it

  module.exports = {
    themeConfig: {
      plugins: [[..."@vuepress-reco/comments",
          {
            solution: 'valine'.options: {
              appId: 'Your own appId'.appKey: 'Your own appKey',}}]]}}Copy the code
  1. metingMusic plug-in

The meting plugin generates a player on the page, as shown below

Dependencies are installed first, then configured

  module.exports = {
    themeConfig: {...plugins: [[..."meting",
          {
            meting: {
              server: "netease".// Netease: netease, Tencent: QQ Music, Xiami music
              type: "playlist".mid: "Playlist or Music ID",},aplayer: {
              autoplay: true.mini: true.theme: '#282c34'
            },
            mobile: {
              cover: false.lrc: false}}]]}}Copy the code

component

Vuepress can write VUE in the MD file, so we can encapsulate some commonly used components and directly introduce them when needed, which is very convenient. I will also write some components to use in my blog later.

conclusion

Their transformation blog is also a very fun thing, now just on the style of modification, after taking time to see can be modified to the source code, some modifications need to be changed to the source code part, in the transformation process can also improve their technical level, writing articles also become a fun thing.

IO/github can not access the address: haveyuan.github