Introduce

Demo

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的动漫类博客主题，简洁，漂亮，多色彩，多种自定义功能，提供文章海报分享，说说，相册，评论，侧边栏，自动生成文章侧边栏等特色功能

如果你之前没有使用过vuepress，那么安装过程，可以查看官方教程或者本主题详细安装教程

主题使用文档地址为 click me

Demo

Feature

• 简洁美观 细节精致，界面简约漂亮，毛玻璃效果
• 开箱即用 下载便可直接使用
• 自动生成文章侧边栏 自动为文章所在目录下的所有md文件生成侧边栏文章目录 ，不用在为文章侧边栏而烦恼
• 图片懒加载 为文章所有图片，首页文章列表加入懒加载效果，支持自定义占位符，大大提升页面加载速度
• 海报分享 自动为文章生成海报分享功能，支持自定义海报样式
• SEO 自定义keyword，description或者主题自动生成keyword，description，提升搜索引擎收录
• 多种功能 文章海报分享，赞赏，文章分类，友情链接，心情说说，相册，评论，图片懒加载，自动生成文章目录...
• 高度自定义 提供多个组件和主题配置文件进行自定义，除了部分页面布局文字之外，页面都是可定制的
• 自定义页脚 支持自定义页脚
• 文章置顶 首页文章置顶功能
• 移除默认主题的侧边栏 移除默认主题侧边栏，新侧边栏更加美观，并且在侧边栏上加入多个模块，如文章信息，最新文章，友情链接等等
• 社交图标 全部采用阿里图标，所有图标都是经过精心挑选，并且图标修改非常简单
• 阅读体验 切换背景，修改字体，颜色，毛玻璃效果，圆角，透明度控制
• 动漫背景 所有页面背景都使用动漫图片，同样也可以使用自己的背景图
• 说说 每天一个感悟，随时发布，美好的一天从发布说说开始...
• 图片 支持图片动画展示，每日拍一张照，记录生活的美好
• 搜索 文章搜索功能
• 打赏 不一样的打赏功能，扫码，在线支付...
• 随机一言打字机 首页或者其他位置，通过打字机效果展示随机一言或者自定义语句
• 评论 使用Waline无后端评论框架，让你在使用vuepress的同时，也能为博客加入评论功能
• 自适应 为手机端和PC端都做了适配
• vuepress 依赖于vuepress，一个静态博客框架，支持几乎所有的vuepress特性

....

安装

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

安装node可查看node 安装

• 创建新文件夹blog-demo,在此文件夹进入cmd，使用npm init命令初始化，你会得到一个package.json文件

• 安装依赖

npm i [email protected]
npm i vuepress-theme-aurora

• 将下面内容复制替换package.json中的scripts项

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

使用主题

1.配置config.js

在docs/.vuepress/config.js下，添加下面内容

module.exports = {
    //设置head 一定要加入<script src="https://at.alicdn.com/t/font_2849934_v6y652peian.js"></script>项配置，否则一些图标不能正常显示
    head: [
        [
            "script",
            {
                src: "https://at.alicdn.com/t/font_2849934_v6y652peian.js",
            },
        ]
    ],
    theme: 'aurora',
    themeConfig: {
        darkMode: false,
    }
};

2.使用

运行

npm run dev

你将会看到下图

恭喜你，到这里，你已经安装成功了，接下来便可以尽情书写博客和修改配置(上图展示出来的效果是默认配置，你可以更改)

主题配置修改，请参考此config.js文件

联系我

如果你在使用该主题的过程中，有任何的问题，都可以通过以下方式联系我

QQ	主题交流群	微信

渲染

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

或者我的博客站点

首页配置

首页