I do not follow,i lives is always all you wantAurora
快速开始
  • 问题及必读

    • Aurora主题问题解决
  • 所有配置

    • 所有配置
  • 主题样式配置

    • /style/code-style.md
    • 自定义图标
    • /style/live2d.md
    • 更改图标以及覆盖主题样式
    • 注册组件
  • 静态文件

    • /base/public.md
  • 插件使用

    • /base/plugin.md
  • docs目录结构

    • /base/docs.md
  • cmd管理员权限

    • /base/admin.md
  • npm常见命令

    • /base/command.md
  • node安装教程

    • /node.md
  • bug

    • Aurora主题bug记录和优化
  • 更新日志

    • 1.0.0 (2021-11-27)
  • 运行常见错误

    • /issue/common.md
  • home

    • 部署
  • 其他配置

    • 评论
    • 页面配置
  • webpack和vite切换

    • /base/vite-webpack.md
  • 时间轴

    • vuepress-plugin-archive
  • 浪漫气泡

    • vuepress-plugin-bubble
  • 说说

    • Vuepress-plugin-coze
  • 音乐播放器

    • vuepress-plugin-player
  • 看板娘

    • /style/live2d.md
  • 我?

    • Me
  • 说说

    • 说说1
    • 说说2
  • 相册

    • photo
  • 标签

    • tag
  • 时间轴

    • archive
友情链接
案例
Aurora

 
 
  • 程
  • 程
  • 程
  • 程
  • 程
  • 程
  • 程
  • 程
  • 圆角
    10
    透明度
    1
      总字数0
      时长0
      评论数
      总阅读数

    生成海报3 

    # 赞赏

    该组件 是一个全局组件,位置docs/.vuepress/theme/lib/client/components/global/Donate.vue

    image-20210831164021528

    image-20210831164036678

    # 配置

    # 扫码支付

    module.exports = {
    
        themeConfig: {
            donate: {
                donateImg: [
                    "https://ooszy.cco.vin/img/blog-public/wxpay.png",
                    "https://ooszy.cco.vin/img/blog-public/zfbpay.jpg",
                ],
            }
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    推荐传入两张二维码图片,支付宝或者位置

    # 商品

    image-20210831164526261
    module.exports = {
    
        themeConfig: {
            donate: {
                donateProduct: [
                    {
                        //名字
                        name: "奶茶",
    
                        //图片地址
                        img: "https://ooszy.cco.vin/img/blog-public/nc.jpeg",
    
                        //价格
                        price: 18,
    
                        //前缀
                        prefix: "quot;,
                    },
                    {
                        name: "全味奶茶",
                        img: "https://ooszy.cco.vin/img/blog-note/image-20210911233612031.png?",
                        price: 11,
                        prefix: "¥",
                    },
                ],
            }
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    # 赞赏列表

    image-20210831164718349
    module.exports = {
    
        themeConfig: {
            donate: {
                //用户赞赏列表数组
                donateList: [
                    {
                        //用户名
                        name: "qsyyke",
    
                        //赞赏信息
                        msg: "文章写的非常好",
    
                        //用户头像
                        img: "https://ooszy.cco.vin/img/blog-public/nc.jpeg",
    
                        //打赏金额
                        price: 11,
    
                        //金额前缀
                        prefix: "¥",
                    },
                    {
                        name: "初尘",
                        msg: "主题太棒了",
                        img: "https://ooszy.cco.vin/img/blog-public/nc.jpeg",
                        price: 7,
                        prefix: "¥",
                    },
                ],
            }
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33

    # 在线支付

    image-20210831164942581

    module.exports = {
    
        themeConfig: {
            donate: {
                onlineList: true
            }
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8

    对于在线支付,请自行写支付接口,我并没有提供,只是提供一个布局,组件位置docs/.vuepress/theme/lib/client/components/global/Donate.vue

    <form action="https://pay.cco.vin/pay/" method="post">
    
    1

    # 全部配置

    module.exports = {
    
        themeConfig: {
            donate: {
    
                //赞赏页面,支付二维码,推荐放置两张图片链接
                donateImg: [
                    "https://ooszy.cco.vin/img/blog-public/wxpay.png",
                    "https://ooszy.cco.vin/img/blog-public/zfbpay.jpg",
                ],
    
                //是否在文章页面显示赞赏 默认显示
                articlePage: true,
    
                //是否在关于页面显示 默认显示
                aboutPage: true,
    
                //显示在赞赏页面的信息
                donateProduct: [
                    {
                        //名字
                        name: "奶茶",
    
                        //图片地址
                        img: "https://ooszy.cco.vin/img/blog-public/nc.jpeg",
    
                        //价格
                        price: 18,
    
                        //前缀
                        prefix: "quot;,
                    },
                    {
                        name: "全味奶茶",
                        img: "https://ooszy.cco.vin/img/blog-note/image-20210911233612031.png?",
                        price: 11,
                        prefix: "¥",
                    },
                ],
    
                //是否显示在线支付的订单信息,如果需要开启,请自己写支付接口,自己修改源码,默认关闭
                onlineList: true,
    
                //用户赞赏列表数组
                donateList: [
                    {
                        //用户名
                        name: "qsyyke",
    
                        //赞赏信息
                        msg: "文章写的非常好",
    
                        //用户头像
                        img: "https://ooszy.cco.vin/img/blog-public/nc.jpeg",
    
                        //打赏金额
                        price: 11,
    
                        //金额前缀
                        prefix: "¥",
                    },
                    {
                        name: "初尘",
                        msg: "主题太棒了",
                        img: "https://ooszy.cco.vin/img/blog-public/nc.jpeg",
                        price: 7,
                        prefix: "¥",
                    },
                ],
            },
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72

    # 组件代码

    https://github.com/vuepress-aurora/vuepress-theme-aurora/blob/master/Aurora-theme/lib/client/components/global/Donate.vue

    # 组件使用

    此组件是一个全局组件,可以直接使用

    <Donate/>
    
    1

    # 顶部图片配置

    顶部图片配置

  • 奶茶
    $ 18
    全味奶茶
    ¥ 11
    初尘
    主题太棒了
    ¥ 7

    推荐阅读

    点击评论
    喜欢动漫,Coding目前是一名大三学生,CS专业,坐标西南边陲
    文章
    41
    标签
    31
    类别
    3
    Github
    文章目录
    最新文章
    公告
  • 该博客主题为Aurora,vuepress-theme-Aurora
  • 主题交流群: 681602026,欢迎各位大佬进群交流
  • 标签
    类别
    demo类别
    plugin
    Copyright © by qsyyke All Rights Reserved.

    滇公网安备 53060202000142号

    theme Aurora by qsyyke
    小破站已运行357天4小时27分25秒
    Your browser does not support this audio format.