vuepress-theme-ccds-test
v1.2.4
Published
This is an anime blog theme based on vuepress, the theme is simple, colorful, versatile, and supports customization, providing multiple components to set the theme
Downloads
108
Maintainers
Readme
vuepress-theme-ccds
一款功能强大的vuepress主题,能满足你写博客的所有需要
Feature
- 简洁美观 细节精致,界面漂亮,毛玻璃效果
- 高度自定义 提供多个组件和主题配置文件进行自定义
- 功能繁多 文章海报分享,打赏,文章分类,友情链接,关于页面,说说,相册,广告,评论,图片懒加载...
- 阅读体验 切换背景,修改字体,颜色,毛玻璃效果,圆角,透明度控制
- 海报分享 自动为文章生成海报分享功能,支持自定义海报样式
- 动漫背景 激活所有页面背景都使用动漫图片,也支持自定义
- 图片懒加载 为文章图片加入懒加载效果,支持自定义占位符,大大提升页面加载效果
- 说说 每天一个感悟,随时发布,在指定页面进行展示,并且支持生成海报分享,下载
- 图片 支持图片动画展示,每日拍一张照,记录生活的美好
- 搜索 支持文章搜索功能
- SEO 默认对所有文章设置过SEO,提升搜索引擎优化
- 广告 为文章页面加入广告配置,只需传入script便可直接显示,并支持自定义
- 打赏 不一样的打赏功能,扫码,在线支付...
- 随机一言打字机 首页或者其他位置,通过打字机效果展示随机一言或者自定义语句
- 评论 使用Valine无后端评论框架,让你在使用vuepress的同时,也能为博客加入评论功能
- 自适应 为手机端和PC端都做了适配
- vuepress 依赖于vuepress,一个静态博客框架,支持几乎所有的vuepress特性
....
Demo
更多的体验效果,可以查看演示站点
或者我的博客站点
安装
详细安装可查看文档
运行环境需要依赖node
,所以在安装之前,请确保操作系统已经安装了node,我运行时的版本为v14.17.3
初始化
创建一个文件夹
blog-demo
进入此
blog-demo
文件夹内,使用npm init
初始化npm init
将下面代码加入到
package.json
对应位置"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "vuepress dev docs", "build": "vuepress build docs", "deploy": "bash deploy.sh" }
依赖安装
npm i [email protected]
npm i vuepress-theme-ccds
npm i jquery
npm i [email protected]
npm i [email protected]
npm i [email protected]
npm install valine --save
npm i [email protected]
npm i [email protected]
npm i vue-fucking-gallery
npm i @vuepress/[email protected]
使用
安装完上述依赖之后,就可以直接使用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主题已提供完整文档供使用,点击进入文档页面