Overview:

The Luogu Blog Frontend is the theme repository for the Luogu Blog. The theme is open source under the AGPL license and welcomes contributions. The theme can be previewed by accessing http://localhost:/<YOUR_THEME_NAME>/ after starting the API Mock debugging server. Prior to this, running THEME=<YOUR_THEME_NAME> yarn build is necessary to generate the corresponding JS and CSS files. It is important to note that in the Windows environment, predefining the THEME environment variable does not work, but the following code can be used in PowerShell as an alternative.

Features:

• Open Source: The Luogu Blog Frontend is open source under the AGPL license.
• API Mock Debugging: The theme includes a feature to start an API Mock debugging server for testing and development.
• Preview Functionality: The theme allows for previewing the blog theme by accessing a specific URL after starting the debugging server.

Installation:

To install the Luogu Blog Frontend theme, follow these steps:

1. Start by cloning the repository:

   git clone <repository_url>
   

2. Navigate to the cloned directory:

   cd <repository_directory>
   

3. Install the required dependencies:

   yarn install
   

4. Build the JS and CSS files:

   THEME=<YOUR_THEME_NAME> yarn build
   

5. Start the API Mock debugging server:

   yarn start
   

6. Access the theme preview by visiting the following URL:

   http://localhost:<PORT>/<YOUR_THEME_NAME>/
   

Note: In Windows environment, the THEME environment variable may not work as expected. Instead, you can use the following code in PowerShell:

$env:THEME="<YOUR_THEME_NAME>"

Summary:

The Luogu Blog Frontend is an open source theme for the Luogu Blog. It allows for API Mock debugging and provides the functionality to preview the theme. The theme has specific installation instructions and follows certain standards for contributions. It uses a mixed rendering architecture with server-side rendering using Handlebars for the overall framework and blog post content, and client-side rendering with Vue for dynamic rendering of certain page structures.