V2.0 version update content

• Developed based on hexo7.0, the configuration file for hexo is different from the 6.3 configuration file
• Improve the level of engineering and use the monorepo structure of the pnpm workspace to better layer the project
• Optimize the development phase experience, webpack dev server listens to the public directory of hexo, and implements hot updates during the development phase`
• Use Web Component to separate project UI components, with a Linear Design style
• Add Preferences to custom pages
• Add Tags to customize the page
• add shortcut key system
• Global theme colors are controlled by the color attribute in the theme configuration file

Cosy

The hexo theme of document oriented and pursuing ultimate loading speed, with a JS size of gzip compressed, only 52.2 KB

中文文档

For more configuration information on theme usage or installation, please refer to the "Cosy Starter Guide"

Preview

Features

Feature	Disable Option
Theme Switching
Prism Syntax Highlighting
Algolia Search
Global Theme Color Configuration
HeFeng Weather Widget	✅
Katex Formulae	✅
Mermaid Flowcharts	✅
Valine Comments	✅
Twikoo Comments	✅

DIY 主题

Installation dependencies

pnpm install

Create a new terminal and execute

# If the @ cosy/util module is updated, remember to perform packaging
pnpm build:util
# webpack
pnpm dev
# Hot update hexo test. If the UI style is incorrect, execute the command again and refresh the browser
pnpm dev:hexo
# ui package
pnpm dev:ui

Browser open localhost:12004

litElement & web-component

All Cosy Web Components inherit the CosyElement base class

import { LitElement } from "lit";
import { globalEventBus, EventBus } from "@cosy/util";

export class CosyElement extends LitElement {
  eventBus: EventBus;
  constructor() {
    super();
    this.eventBus = globalEventBus;
  }
}

Therefore, in any web component that inherits from CosyElement, publishing custom events can be used

this.eventBus.emit(eventType, payload);

And listening to custom events

this.eventBus.on(eventType,callback);

And for external communication needs

import { globalEventBus } from "@cosy/util";

globalEventBus.on("eventType", (event) => {
  console.log("Received：", event.detail);
  globalEventBus.emit("response", "payload");
});

Due to the underlying foundation being based on CustomEvent, a uid attribute has been injected into the CosyElement base class to address the uniqueness issue caused by web component reuse. Taking cosy-drag-box as an example, it is necessary to add a 'uid' attribute

<cosy-drag-box uid="left-aside"><cosy-drag-box/>

Create a new module

Create a folder with module names under apps/theme cost/src/modules, using your Module as an example

├── ...
├── ...
├── yourModule
│   ├── index.ejs
│   ├── index.ts
└── └── index.less

1. index.ejs

<!-- inject:css -->: CSS injection marker points separated from webpack

<!-- inject:js -->: JS injection marker points separated from webpack

<!-- inject:css -->

<div>your module content here</div>

<!-- inject:js -->

2. index.ts

import './index.less'

// your script here

3. index.less

// your stylesheet here

When adding a new module, please rerun the following command

# 重启启动webpack
pnpm dev

Using new modules

<%- partial('yourModule') %>
<!-- or -->
<%- include('yourModule') %>

Building hexo themes

Build Command

pnpm build

After the construction is completed, the complete hexo theme resources are output to the theme-cosy/build directory