zoukankan      html  css  js  c++  java
  • 用 webpack 搭了一个写博客园皮肤的架子

    GZ/awescnb

    简介

    干巴巴写一个博客园皮肤不是一件容易的事. 因为你无法像用前端框架写代码那样在本地调试你的 js, 所以我用空闲时间写了这个小项目.

    1. 你可以使用它创建自己的博客园皮肤.最后打包生成的的 js 文件,供你自己使用.

    2. 你可以安装这个项目中的皮肤在你的博客园.这不是一个简单的博客园皮肤,而是一个合集.安装之后,你可以快速切换其他皮肤.

    3. 你可以使用它创建一个博客园皮肤.并将它贡献给项目,园友就能够切换到你的皮肤了.

    目录

    这里只简单的罗列基本的项目目录,让你清楚它是怎么运行的.如果你有问题或建议欢迎交流.

    ├─config  webpack配置
    └─src
        │  main.js 项目入口
        ├─assets 静态文件
        ├─constants 常量
        │      default.js  默认配置
        │      elements.js 博客园常用标签classid
        │      env.js 环境变量
        │
        ├─plugins 公共插件
        │
        ├─templates 博客园的html
        │
        └─themes
            ├─awescnb 其他皮肤继承的 class
            │  │  index.js
            │
            └─reacg 新增的皮肤
                │  index.js
    

    创建新的皮肤

    首先你需要将项目 clone 到本地 git clone https://gitee.com/guangzan/awescnb2.0.git.

    1.在 themes 文件夹下创建一个新文件夹,例如 demo.
    2.在 demo 文件夹中创建 index.js.
    3.在 demo 文件夹中创建 index.css. 皮肤样式
    4.在 demo/index.js 中粘贴以下代码.

    import "./index.css"; // 引入创建好的 样式文件
    import AwesCnb from "@/themes/awescnb"; // 引入公共的类
    
    class Demo extends AwesCnb {
      constructor() {
        super();
        super.init(); // 初始化父类的插件
        this.init();
      }
    
      init() {
        this.hideLoading();
      }
      // to do something
    }
    
    new Demo();
    

      用它来创建一个博客园主题,只需要继承 class(awescnb). 就可以继承包括但不限于下面这些插件.或者不继承单独使用你需要的插件.即使你继承了所有插件, 它们也能在博客园设置页面快速开启和关闭.

    • 头部进度条
    • 看板娘(3D 模型)
    • 音乐播放器
    • 主题色
    • 自定义背景图片或颜色
    • 华丽的点击特效
    • 自定义网站图标和标题
    • ...

    5.打开config / webpack.base.js并进行以下更改:

    entry:{
        index: './src/main.js',
        reacg: './src/themes/reacg/index.js',
    +   demo: './src/themes/reacg/demo.js',
    },
    

    6.运行命令

    • npm i 安装项目依赖
    • npm start 进行本地开发

    templates 文件夹用于存储博客园的 HTML,使用 HtmlWebpackPlugin 将指定的 html 注入 index.html。
    运行npm start将在本地启动博客园首页。如果您想启动其他页面,请更改 config/webpack.dev.js.

    new HtmlWebpackPlugin({
        filename: 'index.html',
    -   template: 'src/templates/index.html',
    +   template: 'src/templates/post.html', // Or other pages
        inject: 'body',
    }),
    
    • npm run build 打包

    项目打包会生成两个 js 文件在 dist 文件夹下.

    • theme.js 主题js.
    • index.js 加载主题js和提供配置文件.

    在博客园安装这个皮肤

    在使用 webpack 构建这个项目之前, 上个版本使用 gulp 构建. 因为这个版本的皮肤正在从上个版本迁移.
    所以如果你想安装皮肤, 请先使用上个版本的.跳转以安装.

    上个版本的皮肤提供了大量的可选配置,安装后你可以在博客园->设置页面自定义你的博客.

    {
        theme: {
            name: 'reacg',
            color: '#FFB3CC',
            qrcode: '',
            title: '',
            favicon: 'https://guangzan.gitee.io/awescnb/assets/images/favicon.png',
            avatar: '//pic.cnblogs.com/avatar/1501373/20200119190802.png',
            headerBackground: 'https://guangzan.gitee.io/awescnb/assets/images/acg/22.jpg',
        },
        bodyBackground: {
            enable: false,
            type: 'color',
            value: '#ffb3cc',
            opacity: 1,
            repeat: false,
        },
        imagebox: {
            enable: false,
        },
        barrage: {
            enable: false,
            opacity: 0.5,
            colors: [
                '#FE0302',
                '#FF7204',
                '#FFAA02',
                '#FFD302',
                '#FFFF00',
                '#A0EE00',
                '#00CD00',
                '#019899',
                '#4266BE',
                '#89D5FF',
                '#CC0273',
                '#CC0273',
            ],
            barrages: [],
            indexBarrages: [],
            postPageBarrages: [],
        },
        back2top: {
            enable: true,
        },
        live2d: {
            enable: true,
            page: 'all',
            agent: 'pc',
            model: 'random',
             150,
            height: 200,
            position: 'right',
        },
        github: {
            enable: true,
            color: '#ffb3cc',
            url: 'https://gitee.com/guangzan/awescnb',
        },
        click: {
            enable: true,
            page: 'all',
            agent: 'pc',
            auto: false,
            colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
        },
        lineNumbers: {
            enable: true,
        },
        catalog: {
            enable: true,
            position: 'left',
        },
        musicPlayer: {
            enable: false,
            page: 'all',
            agent: 'pc',
            autoplay: false,
            audio: [
                {
                    name: '红色高跟鞋',
                    artist: '李瑨瑶',
                    url: `https://guangzan.gitee.io/awescnb/assets/music/红色高跟鞋.mp3`,
                    cover:
                        '//p2.music.126.net/ww7gcJ_erzPa8jgZesmTOA==/109951163271403502.jpg?param=90y90',
                },
            ],
        },
        topProgress: {
            enable: false,
            page: 'all',
            agent: 'pc',
            background: '#FFB3CC',
            height: '5px',
        },
        postSignature: {
            enable: false,
            content: ['转载请附上原文链接,谢谢!'],
        },
        highLight: {
            type: 'atomOneDark',
        },
        links: [
            {
                name: 'awesCnb',
                link: 'https://gitee.com/guangzan/awescnb',
            },
        ],
    }
    

    具体可以参考文档

    贡献

    如果你像我一样是一个前端小白, 不妨拿它来练练手, 又可以美化你的博客, 一举两得.

    1. fork 这个仓库.
    2. git checkout -b your-new-feature 创建您的功能分支.
    3. git commit -m 'Add some featureCommit 提交您的代码.
    4. git push origin your-new-feature 推送到分支.
    5. 提交一个 pull request.

    To do

    调整

    • merge.js √
    • 在入口引入 merge √
    • themejs 从 mergejs 导入用户选项 x
    • 调整目录 √
    • Window.useroptions √
    • 调整 plugins 位置 √
    • 根据 env 加载 http 文件 x
    • eslint √
    • prettier √
    • stylelint x
    • babel √
    • autoprefixer √
    • postcss-import √
    • cssnano √

    class awescnb

    • NProgress √
    • 组织常用 css √
    • live2d √
    • 点击特效 √
    • 背景包括颜色和图像 √
    • 主题颜色 √
    • favicon 和网站标题 √
    • 音乐播放器 √
    • 隐藏 loading √
    • 在开发环境中导入 cnblog.common.css √
    • 图片灯箱

    ...

    联系

    • QQ:923665892
    • QQ 群:541802647 (活跃)
    • 微信:wx923665892

    请优先加群.

    项目地址

    点我跳转到 1.0
    点我跳转到 2.0

  • 相关阅读:
    mysql报错:java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone.
    MD5登陆密码的生成
    15. 3Sum、16. 3Sum Closest和18. 4Sum
    11. Container With Most Water
    8. String to Integer (atoi)
    6. ZigZag Conversion
    5. Longest Palindromic Substring
    几种非线性激活函数介绍
    AI初探1
    AI初探
  • 原文地址:https://www.cnblogs.com/guangzan/p/12489147.html
Copyright © 2011-2022 走看看