This package has been deprecated

Author message:

WARNING: This project has been renamed to vuepress-theme-aurora. Install using npm i vuepress-theme-aurora instead.

vuepress-theme-ccds

1.2.10 • Public • Published

vuepress-theme-ccds

A vuepress-based animation blog theme, simple, beautiful, multi-color, multiple custom functions, providing article poster sharing, talk, photo album, comment and other features

一款基于vuepress的动漫类博客主题,简洁,漂亮,多色彩,多种自定义功能,提供文章海报分享,说说,相册,评论等特色功能

GitHub package.json versionnpmnpm bundle size

Feature

  • 简洁美观 细节精致,界面漂亮,毛玻璃效果
  • 高度自定义 提供多个组件和主题配置文件进行自定义
  • 功能繁多 文章海报分享,打赏,文章分类,友情链接,关于页面,说说,相册,广告,评论,图片懒加载...
  • 阅读体验 切换背景,修改字体,颜色,毛玻璃效果,圆角,透明度控制
  • 海报分享 自动为文章生成海报分享功能,支持自定义海报样式
  • 动漫背景 激活所有页面背景都使用动漫图片,也支持自定义
  • 图片懒加载 为文章图片加入懒加载效果,支持自定义占位符,大大提升页面加载效果
  • 说说 每天一个感悟,随时发布,在指定页面进行展示,并且支持生成海报分享,下载
  • 图片 支持图片动画展示,每日拍一张照,记录生活的美好
  • 搜索 支持文章搜索功能
  • SEO 默认对所有文章设置过SEO,提升搜索引擎优化
  • 广告 为文章页面加入广告配置,只需传入script便可直接显示,并支持自定义
  • 打赏 不一样的打赏功能,扫码,在线支付...
  • 随机一言打字机 首页或者其他位置,通过打字机效果展示随机一言或者自定义语句
  • 评论 使用Valine无后端评论框架,让你在使用vuepress的同时,也能为博客加入评论功能
  • 自适应 为手机端和PC端都做了适配
  • vuepress 依赖于vuepress,一个静态博客框架,支持几乎所有的vuepress特性

....

Demo

更多的体验效果,可以查看演示站点

或者我的博客站点

安装

详细安装可查看文档

运行环境需要依赖node,所以在安装之前,请确保操作系统已经安装了node,我运行时的版本为v14.17.3

初始化

  1. 创建一个文件夹blog-demo

  2. 进入此blog-demo文件夹内,使用npm init初始化

    npm init
  3. 将下面代码加入到package.json对应位置

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "vuepress dev docs",
        "build": "vuepress build docs",
        "deploy": "bash deploy.sh"
      }

依赖安装

运行下面命令安装vuepressccds主题

npm i vuepress@2.0.0-beta.25
npm i vuepress-theme-ccds

使用

1.新建readme.md文件

docs/下,新建readme.md主题配置文件,将readme.md中所有内容复制到docs/readme.md文件中,请全部复制

2.配置config.js

进入docs/.vuepress/config.js中,加入下面代码

module.exports = {
    theme: 'vuepress-theme-ccds',
    onPrepared: async (app) => {
        const myData = app.pages.map((page) => {
            return page
        })
        await app.writeTemp('my-data.js', `export default ${JSON.stringify(myData)}`)
    },
    themeConfig: {
        darkMode: false,
        navbar: [
            {
                text: '主题使用',
                children: [
                    {
                        text: '主题使用',
                        link: '/issue/'
                    },
                ]
            },
            {
            text: "关于",
            link: "/about"
            },
            {
                text: '友情链接',
                link: '/link'
            },
            {
                text: '标签',
                link: '/tag'
            },
            {
                text: '心情',
                link: '/mood'
            },
            {
                text: "相册",
                link: '/photo'
            }
        ]
    }
}

3使用

在cmd中,进入创建的blog-demo文件夹内,运行npm run dev便可使用该主题

如果在使用或者安装过程中,遇到任何问题,可以在此站点下留言

文档

theme-ccds主题已提供完整文档供使用,点击进入文档页面

Package Sidebar

Install

npm i vuepress-theme-ccds

Weekly Downloads

6

Version

1.2.10

License

ISC

Unpacked Size

1 MB

Total Files

143

Last publish

Collaborators

  • qsyyke