hexo-theme-cosy

2.1.2 • Public • Published

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

Dark Mode

Light Mode

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 -->
  1. index.ts
import './index.less'

// your script here
  1. 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

Readme

Keywords

Package Sidebar

Install

npm i hexo-theme-cosy

Weekly Downloads

4

Version

2.1.2

License

LGPL-3.0-or-later

Unpacked Size

1.1 MB

Total Files

149

Last publish

Collaborators

  • 17px