ImWiki

# Install

$ yarn add vuepress-theme-yur

Use theme

module.exports = {
    theme: 'yur'
}

# Basic Information

module.exports = {
    themeConfig: {
        lang: 'zh-CN',
        logo: '/logo.png',
        author: 'cnguu',
        authorLink: 'https://github.com/cnguu/',
        locales: {
            title: 'Stars so bright',
            description: 'Writing life with you'
        }
    }
}
Parameter Description
lang Default language
Optional: en zh-CN
logo Website logo link
author Webmaster name
authorLink Webmaster name off-site jump link
locales Language localization
See details: Multilingual file (opens new window)

# New category

create a new file: /docs/programe/index.md

---

title: Program

meta:
  - name: description
    content: Program
  - name: keywords
    content: programming,technology

---

Change config

module.exports = {
    themeConfig: {
        navs: [
            {text: 'Program', link: '/program/'}
        ]
    }
}
Parameter Description
text Category Name
link Categories

# Open timeline

Create a new file：/docs/timeline.md

---

title: Timeline

meta:
  - name: description
    content: timeline
  - name: keywords
    content: timeline

---

Change config

module.exports = {
    themeConfig: {
        timeline: true
    }
}

Create a new file: /docs/links.md

---

title: Links

meta:
  - name: description
    content: links
  - name: keywords
    content: links

---

Change config

module.exports = {
    themeConfig: {
        links: [
            {
                name: 'Blog',
                lists: [
                    {
                        title: 'Stars so bright',
                        subtitle: 'Writing life with you',
                        link: 'https://blog.cnguu.cn/',
                        logo: 'https://static.xmt.cn/cc50c217cbe342ce951324583f2c6139.png',
                        color: '#9a69ec'
                    }
                ]
            }
        ]
    }
}
Parameter Description
name Classification name
lists Lists
lists.title Site name
lists.subtitle Site description
lists.link Site url
lists.logo Site logo link
lists.color Site theme

# Add about page

Create a new file: /docs/about.md

---

title: About

meta:
  - name: description
    content: about
  - name: keywords
    content: about

---

---

## Self introduction

Ten thousand words are omitted here ...

---

Change config

module.exports = {
    themeConfig: {
        about: true,
        avatar: 'https://static.xmt.cn/cc50c217cbe342ce951324583f2c6139.png'
    }
}
Parameter Description
avatar Profile picture link

Add social

module.exports = {
    themeConfig: {
        social: {
            github: 'https://github.com/cnguu/',
            facebook: 'https://www.facebook.com/profile.php?id=100031941487870',
            twitter: 'https://twitter.com/cnguu_cn'
        }
    }
}

Type as icon name: Icon (opens new window)

module.exports = {
    themeConfig: {
        footer: {
            icon: '/footer.jpg',
            one: [
                {
                    title: 'Yur',
                    subtitle: 'VuePress Theme',
                    link: 'https://github.com/cnguu/vuepress-theme-yur'
                }
            ],
            two: [
                {
                    title: 'Hosted On GitHub',
                    link: 'https://www.github.com/',
                    type: 'cloud',
                    theme: 'filled'
                }
            ],
            three: [
                {
                    title: 'Gitter',
                    link: 'https://gitter.im/vuepress-theme/yur?utm_source=share-link&utm_medium=link&utm_campaign=share-link',
                    type: 'message',
                    theme: 'outlined'
                }
            ]
        }
    }
}
Parameter Description
icon Icon
one First column
one.title Title
one.subtitle Description
one.link Off-site jump link
two The second column
two.title Title
two.link Off-site jump link
two.type Icon name
two.theme Icon type
Default: outlined
Optional: filled twoTone
three Third column
Parameters are the same as in the second column

# Homepage

# Cover picture

1:1 images are recommended, at least 500x500 pixels

module.exports = {
    themeConfig: {
        banner: '/banner.png'
    }
}

# Button group

module.exports = {
    themeConfig: {
        buttons: [
            {text: 'Read', link: '/posts/', type: 'primary'},
            {text: 'About', link: '/about.html', type: 'default'}
        ]
    }
}
Parameter Description
text Text
link Jump link within the station
type Button type
Optional: default primary dashed danger link

# Site description effects

module.exports = {
    themeConfig: {
        ityped: {
            typeSpeed: 300,
            backSpeed: 100,
            startDelay: 300,
            backDelay: 1300,
            loop: true,
            showCursor: true,
            placeholder: false,
            disableBackTyping: false,
            cursorChar: '丨'
        }
    }
}
Parameter Description
typeSpeed Normal speed
backSpeed Reverse speed
startDelay Start delay (ms)
backDelay Reverse delay (ms)
loop Loop
showCursor Show pointer
placeholder Placeholder
disableBackTyping Disable reverse input
cursorChar Pointer character

# Number of tags

module.exports = {
    themeConfig: {
        tagSize: 100 // Default: 100
    }
}

# Article Information

# Bubble effects

module.exports = {
    themeConfig: {
        post: {
        	bubbles: {
				color: 'random',
				radius: 15,
				density: 0.3,
				clearOffset: 0.2
			}
        }
    }
}
Parameter Description
color Bubble color
default random
radius Bubble radius
default: 15
density Bubble density
the higher the value, the denser the bubble (recommended <= 1)
default: 0.3
clearOffset Bubble disappearing distance [0-1]
the larger the value, the later it disappears
default: 0.2

# Random cover

Theme comes with 49 images

module.exports = {
    themeConfig: {
        post: {
            cover: [
                '/post/1.jpg',
                '/post/2.jpg',
                'https://xxx.com/3.jpg',
                'https://xxx.com/4.jpg'
            ]
        }
    }
}

# Pagination

module.exports = {
    themeConfig: {
        post: {
            pageSize: 12,
            pageSizeOptions: ['12', '24', '48', '96']
        }
    }
}
Parameter Description
pageSize Articles per page
Default: 12
pageSizeOptions Paging filters
Default: ['12', '24', '48', '96']

# Front Matter

---

title: Welcome to my blog

meta:
  - name: description
    content: Welcome to my blog
  - name: keywords
    content: Welcome,visit,blog

created: 2020/02/08

updated: 2020/02/08

tags:
  - Blog
  - VuePress

banner: /banner.jpg

password: true

discuss: false

copyright: Reprinting is allowed, the original link must be retained, and the copyright belongs to the blogger

---

## title

48,000 words omitted from the text ...
Parameter Description
title Article title
meta Increase SEO
description: page description
keywords: page keywords
created Article creation time
Required
updated Article update time
tags Article tags
The first one is the main tag
banner Article cover
Default: random
password Article access password
Default password: 52yur
discuss Comment switch
copyright Copyright statement

# Reward

module.exports = {
    themeConfig: {
        reward: [
            'https://static.xmt.cn/ca717dde8ae14ea7ab3c8c74b8711414.png',
            'https://static.xmt.cn/acc7d3d02b0c4a35a3735268cbb2cce0.png'
        ]
    }
}

# Nameplate

module.exports = {
    themeConfig: {
        nameplate: {
            title: 'Yur',
            width: '42px',
            height: '32px',
            text: [
                {
                    fontSize: '20',
                    textAnchor: 'middle',
                    x: '50%',
                    y: '50%',
                    textTransform: 'uppercase',
                    fill: 'none',
                    stroke: '#3498db',
                    textShadow: '0 0 1px #3498db',
                    strokeWidth: '1px',
                    strokeDasharray: '90 310',
                    animate: {
                        attributeName: 'stroke-dashoffset',
                        begin: '-1.5s',
                        dur: '6s',
                        from: '0',
                        to: '-400',
                        repeatCount: 'indefinite'
                    }
                },
                {
                    fontSize: '20',
                    textAnchor: 'middle',
                    x: '50%',
                    y: '50%',
                    textTransform: 'uppercase',
                    fill: 'none',
                    stroke: '#f39c12',
                    textShadow: '0 0 1px #f39c12',
                    strokeWidth: '1px',
                    strokeDasharray: '90 310',
                    animate: {
                        attributeName: 'stroke-dashoffset',
                        begin: '-3s',
                        dur: '6s',
                        from: '0',
                        to: '-400',
                        repeatCount: 'indefinite'
                    }
                },
                {
                    fontSize: '20',
                    textAnchor: 'middle',
                    x: '50%',
                    y: '50%',
                    textTransform: 'uppercase',
                    fill: 'none',
                    stroke: '#e74c3c',
                    textShadow: '0 0 1px #e74c3c',
                    strokeWidth: '1px',
                    strokeDasharray: '90 310',
                    animate: {
                        attributeName: 'stroke-dashoffset',
                        begin: '-4.5s',
                        dur: '6s',
                        from: '0',
                        to: '-400',
                        repeatCount: 'indefinite'
                    }
                },
                {
                    fontSize: '20',
                    textAnchor: 'middle',
                    x: '50%',
                    y: '50%',
                    textTransform: 'uppercase',
                    fill: 'none',
                    stroke: '#9b59b6',
                    textShadow: '0 0 1px #9b59b6',
                    strokeWidth: '1px',
                    strokeDasharray: '90 310',
                    animate: {
                        attributeName: 'stroke-dashoffset',
                        begin: '-6s',
                        dur: '6s',
                        from: '0',
                        to: '-400',
                        repeatCount: 'indefinite'
                    }
                }
            ]
        }
    }
}

# Dark mode

module.exports = {
    themeConfig: {
    	dark: true,
    }
}

# First load page

module.exports = {
    themeConfig: {
        curtain: {
            tip: 'Loading...',
            textShadow: '#e91e63'
        }
    }
}
Parameter Description
tip Prompt text
textShadow Text shadow color

# Customer chat

# crisp

Register account, add site, get assigned ID: Crisp (opens new window)

module.exports = {
    themeConfig: {
        crisp: 'xxx'
    }
}

# Add comment

Supported comments:

module.exports = {
    themeConfig: {
        discuss: 'vssue'
    }
}

# Vssue

Install the plugin

$ yarn add @vssue/vuepress-plugin-vssue
$ yarn add @vssue/api-github-v3

Change config

module.exports = {
    plugins: [
        ['@vssue/vuepress-plugin-vssue', {
            platform: 'github',
            owner: 'cnguu',
            repo: 'blog-vssue',
            clientId: '',
            clientSecret: ''
        }]
    ]
}

# Valine

module.exports = {
    themeConfig: {
        valine: {
            appId: '',
            appKey: '',
            placeholder: 'Write your message here 丨 Support MarkDown syntax',
            notify: false,
            verify: true,
            avatar: 'mp',
            pageSize: 8,
            recordIP: true,
            lang: 'en'
        }
    }
}

# Icons

  1. Register IconFont (opens new window)
  2. Create a new project and add your favorite icons
  3. Introduced Symbol's CDN link (can also be downloaded for local use)
module.exports = {
    head: [
        ['script', {src: '//at.alicdn.com/t/font_xxx.js'}]
    ]
}
  1. Use in MarkDown
<Icon name="github" />

<Icon name="man" color="#39c5bb" />

<Icon name="woman" size="2em" />
Parameter Description
name Icon name
color Icon color
size Icon size (recommended unit: em)

# Theme style

create a new file: /docs/.vuepress/styles/variable.less

@primary-color: #9a69ec;
@link-color: #9a69ec;
@tip-color: #3c67bd;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #f5222d;

@codeLang: bash, c, css, cpp, cmake, coffeescript, coffee, d, dart, docker, dockerfile, ejs, erlang, git, go, graphql, html, http, ini, java, javascript, jq, js, json, jsonp, json5, jsx, kotlin, latex, tex, context, less, lua, makefile, markdown, md, matlab, nginx, objectivec, perl, php, phpdoc, plsql, powershell, pug, python, py, q, r, regex, ruby, rb, rust, sass, scss, scala, shell, smarty, sql, stylus, svg, swift, toml, ts, tsx, twig, typescript, vim, visual-basic, vb, wiki, xml, yaml, yml;
Parameter Description
@primary-color Theme color
@link-color Link color
@tip-color Hint color
@success-color Success color
@warning-color Warning color
@error-color Wrong color
@codeLang Code language

Languages supported: PrismJs (opens new window)

# CDN

module.exports = {
    themeConfig: {
        cdn: 'https://cdn.jsdelivr.net/gh/cnguu/cnguu.github.io@master/'
    }
}

# Upgrade

$ yarn upgrade vuepress-theme-yur@1.4.3

// OR
$ yarn upgrade-interactive --latest

# FAQ

  1. After upgrading 2.x version, the display is still 1.x version?

    A: The 1.x version uses the pwa plugin by default, and the 2.x version is no longer built-in, which causes the cache to be manually cleared by the user to display the latest.

    S: Install the pwa extension. If you do not continue to use pwa, you need to write your own js script to automatically clear the old cache.

  2. Missing index.html after building?

    S: Create a new file /docs/index.md.

  3. Abnormal layout of article list?

    S: Install dependencies yarn add ant-design-vue@1.4.11.