vuepress-theme-ting

    2.0.2 • Public • Published

    vuepress-theme-ting

    github项目

    这是一个vuepress主题,主要功能有博客归档分类,以及留言,个人展示等;主题追求极简,根据 vuepress 的默认主题修改而成,官方的主题配置仍然适用; 这是一个看板娘小清新vuepress主题,主要功能有博客归档分类,以及留言,个人展示等;主题追求极简,根据 vuepress 的默认主题修改而成,官方的主题配置仍然适用;

    预览地址

    预览地址

    在这里插入图片描述

    版本

    第一版1.4.5

    看板娘需在配置目录下设置路径。

    • 在这里插入图片描述

    • 如果你喜欢最初风格的版本:为1.4.5

    npm i vuepress-theme-ting@1.4.5
    

    第二版2.x.x

    • 支持默认换装看板娘
    • 图灵对话机器人 在这里插入图片描述
    npm i vuepress-theme-ting
    

    UI风格我个人感觉还有待改进,我个人不是很喜欢哈哈哈~

    最近在致力于编写一个小清新风格的ui组件库要运用到本主题中,所以进度会比较慢。

    新增功能

    默认换装看板娘2.x.x

    自动换装88套衣服,琳琅满目~,截图不过来了。

    • 在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

    自定义看板娘

    • 本主题支持看板娘,由于live2d读取模型文件,你可以选择自己喜欢的看板娘,在配置时填写路径就可以了。 如果你不喜欢默认的看板娘模型,可以在config.js里增加看板娘路径。
    module.exports = {
        ……
        head: [
        ……
        ],
        themeConfig: {
     		……
            live2dModel: '/live2d/model/poi/poi.model.json', //live2d模型路径
            ……
        }
    }
    
    • 其他待补充

    图灵对话机器人2.x.x

    可以与机器人聊天,并且播放语音;

    • 在这里插入图片描述

    鸣谢

    支持者 支持内容
    mumudadi 提供图灵机器人后台技术支持。

    导语

    你是否喜欢这个vuepress主题呢?按照步骤来,你也可以使用这样的主题哦。以下是具体的配置使用过程。


    前期工作

    新建项目project,在project下新建一个docs文件夹和一个package.json文件

    • 文件目录
    project
    │
    ├─── docs
    │
    └─── package.json
    
    • package.json内容
    {
      "name": "demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "directories": {
        "doc": "docs"
      },
      "scripts": {
        "dev": "vuepress dev docs",
        "build": "vuepress build docs"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

    下载主题

    npm i vuepress-theme-ting
    npm i
    • 目录结构
    project
    │ 
    ├─ docs
    │
    ├─ package.json
    │
    └─  node_modules
    

    配置

    在docs目录下新建README.md、catalog.md、.vuepress文件夹;在.vuepress文件下新建config.js文件;

    project
    │ 
    ├─ docs
    │   │
    │   ├─ README.md
    │   │
    │   ├─ catalog.md
    │   │
    │   └─.vuepress
    │       │
    │       └─config.js
    │
    ├─ package.json
    │
    └─  node_modules
    
    • config.js内容
    module.exports = {
        title: 'YATING',//网站名称
        description: '用心写代码,不辜负程序员之名',//网站描述
        themeConfig: {
            nav: [//导航栏
                { text: '主页', link: '/' },
                { text: '目录',link:'/catalog'}
            ],
            catalogUrl:'/catalog',//必填 目录路径
            lastUpdated: 'Last Updated',//必填:文章显示最新修改时间
        },
        theme:'ting'//必填:使用vuepress-theme-ting 主题
    }
    • README.md
    ---
    layout: index
    title: Home
    showMessage: false
    ---
     
    # vuepress-theme-ting 
     
    > 如果你喜欢这个主题可以给我一个start,谢谢
     
    ## 欢迎使用 
    • catalog.md
    ---
    layout: catalog
    ---
    layout:表示当前使用catalog页面;
    title:md文件标题,注意:命名为Home本主题均自动忽略;
     

    指令操作

    • 本地预览
    npm run dev
    

    最终效果图如下:

    • 在这里插入图片描述在这里插入图片描述

    • 打包

    npm run build
    

    预览地址

    预览地址

    在这里插入图片描述

    文档设置

    md文档抬头以下列格式为例:

    ---
    layout: index
    title: Home
    showMessage: false
    ---

    layout:默认值为空,为文章内容页

    catalog:表示当前页为目录页面;
    index:表示为主页;
    layout:默认文章内容(无需设置)

    当前文章属性

    ---
    img:url
    title:文章标题
    showMessage:是否显示留言栏,侧边栏;默认为true
    ---

    注意:文章的图片若保存在.vuepress/public/img/hello.jpg路径下,对应图片将在目录中展示; 则相应的,请将img的值设置为:/img/hello.jpg

    对应图片效果为:

    • 在这里插入图片描述

    注意

    例如以下目录结构:

    project
    │ 
    ├─ docs
    │   │
    │   ├─ README.md
    │   │
    │   ├─ catalog.md
    │   │
    │   └─.vuepress
    │   │   │
    │   │   └─config.js
    │   └─ 你的文档
    │
    ├─ package.json
    │
    └─  node_modules
    

    效果图

    主页

    在这里插入图片描述

    目录

    在这里插入图片描述

    内容

    在这里插入图片描述

    其他

    在这里插入图片描述

    手机端预览效果

    • 在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

    全部配置

    // .vuepress/config.js
    module.exports = {
     title: 'YATING',//网站名称
        description: '用心写代码,不辜负程序员之名',//网站描述
        //head标签
        head: [
            ['link', { rel: 'stylesheet', href: '/img/logo.ico' }],//注意"/"就是public资源目录。标签的logo
            ['script', { src: 'https://cdn.bootcss.com/jquery/3.4.1/jquery.js' }]
        ],
        themeConfig: {
            author:'tinger',
            headImg:'https://yating.online/res/img/yating.jpg',//选填:头像
            //导航栏
            nav: [
                { text: '主页', link: '/' },
                { text: '目录',link:'/config/catalog'},
                { text: '项目列表', link: '/config/about' },
                { text: 'Github',type:'url', link: 'https://github.com/Chenyating' },
            ],
            catalogUrl:'/catalog',//必填 目录路径
            lastUpdated: 'Last Updated',//必填:文章显示最新修改时间
            smoothScroll: true,//选填
            //选填/live2d模型路径
            live2dModel:'/live2d/model/poi/poi.model.json',
            pageNum:5,//选填:目录每页显示条数
            gitalk:{//选填:gitalk留言设置
                clientID: '5b8613cfe15e02db85b7',
                clientSecret: 'd4129094c33b8da73e873470fb89aea53dfaf396',
                repo: 'Chenyating.github.io',
                owner: 'chenyating',
                admin: ['Chenyating'],
                distractionFreeMode: false // Facebook-like distraction free mode
            },
            footer:'粤ICP备案号:18150247号'//选填
        },
        theme:'ting'//必填:使用vuepress-theme-ting 主题
    }

    感谢阅读

    如果你喜欢这个主题,请给我一个start,给予我一个鼓励吧~蟹蟹~ github项目

    其他

    如果你在使用过程中遇到什么问题,可以与我联系,记得给我个start哟~

    Install

    npm i vuepress-theme-ting

    DownloadsWeekly Downloads

    50

    Version

    2.0.2

    License

    ISC

    Unpacked Size

    749 kB

    Total Files

    43

    Last publish

    Collaborators

    • chenyating