Numerous Philanthropic Misanthropes

    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主题已提供完整文档供使用,点击进入文档页面

    Install

    npm i vuepress-theme-ccds

    DownloadsWeekly Downloads

    12

    Version

    1.2.10

    License

    ISC

    Unpacked Size

    1 MB

    Total Files

    143

    Last publish

    Collaborators

    • qsyyke