]]>如何解决您的AutoCAD许可证无效Nonvalid software detected license is not validhttps://litos.vercel.app//posts/license-is-no-valid2026-04-10T00:00:00.000Z2026-04-10T00:00:00.000ZDnzzk2提示CAD许可无效，解决您的AutoCAD许可证无效Nonvalid software detected license is not valid的问题。问题描述：
近期有国外的学员截图给我如下图：
标题就是：检测到无效软件 Nonvalid software detected
窗口提示：您的AutoCAD许可证无效 Your AutoCAD license is not valid
Your AutoCAD license is not valid
这个窗口会在启动AutoCAD或其他同系软件后几分钟后出现，
后来国内的学员也发现此问题：
您的AutoCAD许可证无效
如何解决您的AutoCAD许可证无效Nonvalid software detected license is not valid
您的AutoCAD许可证无效
《Improved adsorption capacity of ammonium from aqueous solution by modified biogas residue biochar》发表于期刊biochar，为环境科学于生态学TOP。
《Granulated straw incorporation with rotary tillage increases the content of soil organic carbon fractions and available nutrients and shifts bacterial communities in East China》发表于期刊Frontiers in PlantScience
]]>How to get started with this themehttps://litos.vercel.app//posts/start2025-08-15T00:00:00.000Z2025-08-15T00:00:00.000ZDnzzk2Quick start for the Litos theme: prerequisites, fork-or-template setup, and next steps.
This theme was developed during my free time, and the documentation may not be comprehensive enough, but I will try my best to explain it.
Prerequisite
Before starting, ensure you have the following tools installed in your development environment:
Node.js - Required for running the development environment.
pnpm - Our preferred package manager for dependency management.
Conflicts typically only occur in files you have modified, such as src/config.ts. In that case, just keep your own configuration and accept the rest of the theme updates.
TIP
To minimize conflicts, try to only modify the following files:
src/config.ts — Site configuration
src/content/ — Your posts and projects
public/ — Your static assets (favicon, images, etc.)
.env — Environment variables
Avoid modifying theme source files (components, styles, layouts) directly. This ensures smooth updates every time.
End
The following documents will be divided into pages, such as readme, posts…
]]>Readme Page Confighttps://litos.vercel.app//posts/readme2025-08-14T00:00:00.000Z2025-08-14T00:00:00.000ZDnzzk2Configure Readme page modules (site, header/footer links, social, GitHub, skills) with field docs and examples.
The following files are compatible with this document:
src/pages/index.astro - readme page.
src/config.ts - readme page config.
src/components/base - most of the components come from here.
Site Config
Configure basic site information:
export const SITE: Site = {
title: 'Litos',
description: 'Litos is a blog theme built with Astro.js and Dnzzk2.',
website: 'https://litos.vercel.app/',
lang: 'en',
base: '/',
author: 'Dnzzk2',
ogImage: '/og-image.jpg',
}
Property
Description
title
The title of the site.
description
The description of the site.
website
Your final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build. It is strongly recommended that you set this configuration to get the most out of Astro.
lang
The lang global attribute helps define the language of an element.
base
The base path to deploy to. Astro will use this path as the root for your pages and assets both in development and in production build. When you set it to /docs, astro dev will start your server at /docs.
author
The author of the site.
ogImage
The Open Graph images of the site, but on the specific post page, you can use other ogImage instead.
It is recommended to run the project locally and check its effectiveness. It is suggested to have at least three different skills per line.
Posts
Here, we mainly display pinned posts. If there are no pinned posts, we will display the latest number of size posts based on POSTS_CONFIG.
]]>Posts Page Confighttps://litos.vercel.app//posts/posts2025-08-13T00:00:00.000Z2025-08-13T00:00:00.000ZDnzzk2Complete Posts configuration: fields, list styles, post metadata layouts, OG image handling, frontmatter examples, markdown syntax, and expressive-code config.
The following files are compatible with this document:
src/pages/posts/[...id].astro - post specific content display page.
src/pages/posts/[...page].astro - post list page.
src/content/posts - posts collection
src/content.config.ts - posts dataset and frontmatter configuration.
ec.config.mjs - expressiveCode config.
plugins/index.ts - remark and rehype plugins.
src/config.ts - posts page config.
src/components/posts - most of the components come from here.
Posts Page Config
The posts page config is configured in the following code:
export const POSTS_CONFIG: PostConfig = {
title: 'Posts',
description: 'Posts by Dnzzk2',
introduce: 'Here, I will share the usage instructions for this theme to help you quickly use it.',
author: 'Dnzzk2',
homePageConfig: {
size: 3,
type: 'compact',
},
postPageConfig: {
size: 10,
type: 'minimal',
},
tagsPageConfig: {
size: 10,
type: 'time-line',
},
ogImageUseCover: false,
postType: 'metaOnly',
imageDarkenInDark: true,
readMoreText: 'Read more',
prevPageText: 'Previous',
nextPageText: 'Next',
tocText: 'On this page',
backToPostsText: 'Back to Posts',
nextPostText: 'Next Post',
prevPostText: 'Previous Post',
recommendText: 'REC',
}
There are a few configuration attributes, please refer to the table below for details.
Property
Description
title
Title displayed on browser tags and title displayed on list pages.
description
The metadata description in the head element of the list page.
introduce
The introduce below the title on the list page.
author
The author of the posts.
homePageConfig
readme page configuration.
size
The number of posts displayed on the readme page.
type
In the read page, the style of displaying data in a list , compact 、minimal 、time-line or image.
coverLayout (optional)
When the type is image, this attribute can set the position of the image in the card. You can choose left or right. If not set, it will appear alternately on the left and right.
postPageConfig
Same as homePageConfig above, but size represents the base number of pages and is used for post pages.
tagsPageConfig
Same as homePageConfig above, but size represents the base number of pages and is used for tag pages.
ogImageUseCover
Whether to use the cover image as the Open Graph image.
postType
The default display component for the top metadata of the post’s specific content display page.You can configure metaOnly、 coverSplit、coverTop. Can be replaced by frontmatter settings for content.
imageDarkenInDark
Whether to darken the image in the dark mode.
readMoreText
The text of the read more button.
prevPageText
The text of the previous page button.
nextPageText
The text of the next page button.
tocText
Title text of the directory
backToPostsText
The text of the back to posts button.
nextPostText
The text of the next post button.
prevPostText
The text of the previous post button.
recommendText
The text of the recommend tag.
Type & PostType
In the above document, we mentioned configurable types for configuring the display style of list data on the readme page, posts page, and tags page, as well as configurable postTypes for displaying metadata at the top of the posts content page.
Here is the specific style display of type:
compacttime-lineminimalimage
Here is the specific style display of postType:
metaOnlycoverTopcoverSplit
Frontmatter
After discussing the external list and overall design of the post, let’s take a look at the content of the post together. These contents are all in the src/content/posts folder.
Overview of the content of the post, also used for SEO.
pubDate
Post release date.
tags
List of tags for posts
updatedDate
Latest update date of the post. In the sorting of the post list, the priority value is greater than the publication date.
author
The author of the post.
cover
When the type of the list is image, the cover image used for display, or the cover image displayed at the top of the postType coverSplit or coverTop
ogImage
The Open Graph image of the post.
recommend
Whether to display the recommend tag.
postType
The display component for the top metadata of the post’s specific content display page. You can configure metaOnly、 coverSplit、coverTop
coverLayout
When the type is image, this attribute can set the position of the image in the card. You can choose left or right. If not set, it will appear alternately on the left and right.
pinned
Whether to top the post.
draft
Whether to hide the post.
TIP
Regarding cover and ogImage.
Cover and ogImage are two independent attributes, and the only one that can connect them is POSTS_CONFIG.ogImageUseCover.
POSTS_CONFIG.ogImageUseCover is enabled by default, so you only need to write cover to configure ogImage at the same time. This applies to situations where the cover and ogImage are the same. If you want to customize ogImage, you can set it separately.
If POSTS_CONFIG.ogImageUseCover is not enabled, ogImage needs to be set separately. If you do not set it, the site’s ogImage will be used as a fallback.
POSTS_CONFIG.ogImageUseCover > cover
Syntax and Code Style
This guide will show you how to format text using Markdown through a 3-day city trip itinerary. Learn Markdown while planning your journey!
Heading Levels
For travel notes, multiple heading levels help organize days, time blocks, and tips:
# 3-Day City Trip Itinerary
## Day 1: Arrival & Old Town
### Morning Plan
#### Coffee Stops
##### Metro Tips
###### Notes
Text Formatting
When writing travel notes, highlight important info:
Must-see spots should be bold
Flexible time uses italics
Critical cautions can use both
Optional detours use strikethrough
**Must-see spots** should be bold
_Flexible time_ uses italics
**_Critical cautions_** can use both
~~Optional detours~~ use strikethrough
Packing List (Unordered List)
Passport, visa
Camera, extra battery
Bring a fast charger
Spare SD card
Refillable water bottle
Public transport card
- Passport, visa
- Camera, extra battery
- Bring a fast charger
- Spare SD card
- Refillable water bottle
- Public transport card
Day 1 Schedule (Ordered List)
Airport → hotel check-in
Old Town walking tour
Evening river cruise
Arrive 15 min early
Queue at Gate B
Window seats recommended
1. Airport → hotel check-in
2. Old Town walking tour
3. Evening river cruise
1. Arrive 15 min early
2. Queue at Gate B
3. Window seats recommended
Blockquotes
Traveler tip: Buy a 24‑hour metro pass if you plan 3+ rides in a day.
Save the hotel address in offline maps for quick access.
> Traveler tip: Buy a 24‑hour metro pass if you plan 3+ rides in a day.
>
> Save the hotel address in offline maps for quick access.
Metro line A runs every 5-7 minutes during peak hours.
Math Formulas
Daily budget estimation: budget=hotel+meals+transportbudget = hotel + meals + transportbudget=hotel+meals+transport
Total trip:
Total Budget=∑d=13(Hoteld+Mealsd+Transportd)Total\ Budget = \sum_{d=1}^{3} (Hotel_d + Meals_d + Transport_d)TotalBudget=d=1∑3(Hoteld+Mealsd+Transportd)
Task Lists
Pre-trip checklist:
Book flights
Reserve hotel
Buy metro pass
Download offline maps
Footnotes
This itinerary draws on local travel guides(click to the footnote) 1.
Expressive-code config
In Markdown documents, we use code blocks to display code snippets and other content. This document explains how to customize the code block configuration.
The code blocks in this theme are configured using Expressive Code with all configuration options defined in the ec.config.mjs file. Below is the main configuration options:
You can go to the website to view the configuration options of expressive-code.
Comment System (Gitalk)
The theme has a built-in Gitalk comment system that uses GitHub Issues as the comment backend. Each post automatically gets its own issue for comments.
The GitHub repository name for storing comment issues.
owner
The GitHub username of the repository owner.
admin
Array of GitHub usernames who can initialize comment issues.
language
Display language. e.g. en-US, zh-CN, zh-TW.
perPage
Number of comments per page.
pagerDirection
Comment sorting direction. last (newest first) or first (oldest first).
createIssueManually
If true, issues must be created manually. If false, auto-created on first visit by admin.
distractionFreeMode
If true, enables full-screen overlay when typing a comment.
enableHotKey
Whether to enable Cmd/Ctrl + Enter shortcut to submit comments.
NOTE
To disable comments entirely, set enabled: false or system: 'none' in COMMENT_CONFIG.
CAUTION
The clientID and clientSecret are read from environment variables via import.meta.env. Make sure to add .env to your .gitignore file (already included by default) to avoid leaking secrets.
Footnotes
City Tourism Guide, 2024 Edition. (click back to the text) ↩
]]>Markdown enhanced syntaxhttps://litos.vercel.app//posts/enhance2025-08-12T00:00:00.000Z2025-08-12T00:00:00.000ZDnzzk2Enhance Markdown with callouts, Expressive Code blocks, image caption directives, video embeds, styled links, badges, and details.
Supported by the rehype-callouts , you can configure the plugin in plugins/index.ts.
If you change the theme configuration (default: 'vitepress'), you will also need to update the imported CSS file in src/styles/pro.css (@import 'rehype-callouts/theme/yourconfig').
<!-- Callout type names are case-insensitive: 'Note', 'NOTE', and 'note' are equivalent. -->
<!-- vitepress -->
<!-- This is a _non-collapsible_ callout -->
> [!note]
> Note content.
> [!tip]
> Tip content.
> [!important]
> Important content.
> [!warning]
> Warning content.
> [!caution]
> Caution content.
> [!caution]- This is a **collapsible** callout
> Caution content.
> [!note]+ This is a **collapsible** callout
> Note content.
Here’s a quick preview of what’s possible. Check the detailed guide for more info.
Syntax highlighting
console.log('This code is syntax highlighted!')
ANSI colors:
- Regular: Red Green Yellow Blue Magenta Cyan
- Bold: Red Green Yellow Blue Magenta Cyan
- Dimmed: Red Green Yellow Blue Magenta Cyan
256 colors (showing colors 160-177):
160 161 162 163 164 165
166 167 168 169 170 171
172 173 174 175 176 177
Full RGB colors:
ForestGreen - RGB(34, 139, 34)
Text formatting: Bold Dimmed Italic Underline
Code editor frames
// Use `title="my-test-file.js"`
console.log('Title attribute example')
// src/content/index.ts
// Use `// src/content/index.ts`
console.log('File name comment example')
Terminal frames
echo "This terminal frame has no title"
Write-Output "This one has a title!"
Marking full lines & line ranges
// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"
Selecting line marker types (mark, ins, del)
function demo() {
console.log('this line is marked as deleted')
// This line and the next one are marked as inserted
console.log('this is the second inserted line')
return 'this line uses the neutral default marker type'
}
+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line
function thisIsJavaScript() {
// This entire block gets highlighted as JavaScript,
// and we can still add diff markers to it!
- console.log('Old code to be removed')
+ console.log('New and shiny code!')
}
Marking individual text inside lines
// Plaintext search strings
function demo() {
// Mark any given text inside lines
return 'Multiple matches of the given text are supported'
}
Marking individual text inside lines
// Regular expressions
console.log('The words yes and yep will be marked.')
// Regular expressions
If you only want to mark certain parts matched by your regular expression, you can use capture groups.
For example, the expression `/ye(s|p)/` will match yes and yep, but only mark the character s or p:
// Regular expressions
To prevent this special treatment of capture groups, you can convert them to non-capturing groups by adding ?: after the opening parenthesis. For example:
This block uses `/ye(?:s|p)/`, which causes the full
matching words "yes" and "yep" to be marked.
// Selecting inline marker types (mark, ins, del)
function demo() {
console.log('These are inserted and deleted marker types')
// The return statement uses the default marker type
return true
}
Configuring word wrap per block
// Example with wrap
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
// Example with wrap=false
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
Configuring indentation of wrapped lines
// Example with preserveIndent (enabled by default)
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
// Example with preserveIndent=false
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
Collapsible sections
// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
const engine = someBoilerplateEngine(evenMoreBoilerplate())
// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)
function calcFn() {
// You can have multiple collapsed sections
const a = 1
const b = 2
const c = a + b
// This will remain visible
console.log(`Calculation result: ${a} + ${b} = ${c}`)
return c
}
// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })
Displaying line numbers per block
// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')
// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')
// Changing the starting line number
console.log('Greetings from line 5!')
console.log('I am on line 6')
Image Caption & Link
Use the :::image directive from remark-directive-sugar to wrap images in a container for captions, clickable links, and more. Customize via the image option in plugins/index.ts (remarkDirectiveSugar) and style under /* :::image */ in src/styles/pro.css.
image-figure
:::image-figure[caption]{<figcaption> attrs}: The square brackets define the <figcaption> text (defaults to the alt text from ![]() if omitted), while the curly braces are used for inline styles or supported attributes to the generated <figcaption> element.
(<img> attrs): Standard Markdown image with optional attributes in parentheses, enabled by remark-imgattr, for customizing the generated <img> element.
:::image-figure[caption]{<figcaption> attrs}: The square brackets define the <figcaption> text (defaults to the alt text from ![]() if omitted), while the curly braces are used for inline styles or supported attributes to the generated <figcaption> element.
(<img> attrs): Standard Markdown image with optional attributes in parentheses, enabled by remark-imgattr, for customizing the generated <img> element.
:::image-figure[This Is a **Figcaption** with _`<figure>` Attrs_]{style="text-align:center;color:orange"}
:::
:::image-figure[This is a **figcaption** with _`<img>` attrs_.]
(style: width:600px;)
:::
<!-- 💡 Use `(class:no-zoom)` to disable zoom -->
:::image-figure[This is a **figcaption** with `class:no-zoom`.]
(class:no-zoom)
:::
<!-- 💡 If no `[caption]`, use `[alt]` as figcaption. -->
:::image-figure
![If `[caption]` not set, the alt text from `![]()` will be used as the figcaption.](assets/cover.png)
:::
<!-- 💡 Images for light (img-light) and dark (img-dark) modes -->
<!-- ⚠️ At least one line must separate two image syntaxes (![]()), or won't work. -->
:::image-figure[This example shows different images for light (add `class:img-light`) and dark (add `class:img-dark`) modes.]
(class:img-light)
(class:img-dark)
:::
<!-- ❌ If no text is available for the figcaption, it won't work. -->
:::image-figure
:::
This Is a Figcaption with <figure> AttrsThis is a figcaption with <img> attrs.This is a figcaption with class:no-zoom.If [caption] not set, the alt text from ![]() will be used as the figcaption.This example shows different images for light (add class:img-light) and dark (add class:img-dark) modes.
WARNING
Setting an image’s width attribute directly may cause blurriness. Learn more
image-a
The custom directive wraps an image inside a link, making it clickable.
:::image-a{<a> attrs}: Define the link (href), styles, or classes in the curly braces for <a> element.
(<img> attrs): Same as above.
:::image-a{href="https://github.com/Dnzzk2/Litos"}
:::
:::image-a{href="https://github.com/Dnzzk2/Litos" style="display:block" .custom-class}
(style: margin-bottom: -1rem; transform:scaleX(1.1) scaleY(1.1);, loading: eager)
:::
::::image-a{href="https://github.com/Dnzzk2/Litos"}
:::image-figure[This example shows `:::image-a` wraps around `:::image-figure` (both are interchangeable).]
:::
::::
<!-- ❌ No external links provided, it won't work.-->
:::image-a
:::
In order to ensure the style size on the phone, I have set a minimum width of 300px, and you can modify and expand the style in src/styles/picture.css.
Use the ::video directive from remark-directive-sugar for consistent video embedding across different platforms. Customize via the video option in plugins/index.ts and style under /* ::video */ in src/styles/pro.css.
Say example.md contains:
<!-- Embed a YouTube video -->
::video-youtube{#gxBkghlglTg}
<!-- Embed a Bilibili video with a custom `title` attr -->
::video-bilibili[custom title]{id=BV1MC4y1c7Kv}
<!-- Embed a Vimeo video with class `no-scale` to disable scaling -->
::video-vimeo{id=912831806 class='no-scale'}
<!-- ::video-vimeo{id=912831806 .no-scale} -->
<!-- Embed a custom video URL (must use `id`, not `#`) -->
::video{id=https://www.youtube-nocookie.com/embed/gxBkghlglTg}
Then example.mdx renders as:
Styled Link（:link）
Use the :link directive from remark-directive-sugar to add links with avatars or favicons for GitHub, npm, or custom URLs. Customize via the link option in plugins/index.ts and style under /* :link */ in src/styles/pro.css.
Link to a GitHub user or organization (prepend id with @)
Example 1: :link[Dnzzk2]{#@Dnzzk2} links to the GitHub profile of the project maintainer, Dnzzk2.
Example 2: Vite links to the GitHub profile of the Vite organization.
Example 3: :link{#@Dnzzk2 tab=repositories} links directly to the repositories tab of the GitHub user, like Dnzzk2. For GitHub users, valid tab options: 'repositories','projects', 'packages', 'stars', 'sponsoring', 'sponsors'.
Example 4: :link{#@vitejs tab=org-people} links directly to the people section of a GitHub organization, like vitejs. For GitHub organizations, valid tab options: 'org-repositories', 'org-projects', 'org-packages', 'org-sponsoring', and 'org-people'.
Link to a GitHub repository
Example 5: :link[Astro]{#withastro/astro} or Astro creates a link to Astro repo.
Link to an npm package
Example 6: :link{#remark-directive-sugar} links to the npm homepage of the remark-directive-sugar.
Example 7: :link{id=remark-directive-sugar tab=dependencies} links to the dependencies section of the remark-directive-sugar on npm. For npm package, valid tab options: 'readme', 'code', 'dependencies', 'dependents', and 'versions'.
Example 9: Google creates an external link to the Google.
Customization
Example 10: Vite creates a Vite to https://vite.dev/ instead of https://github.com/vitejs by using the url.
Example 11: Vite creates a Vite that displays a custom logo by using the img.
Example 12: :link{id=Dnzzk2/Litos class=github} creates a Dnzzk2/Litos with class=github (or .github) to override the default style of a GitHub repository.
Use the :badge directive from remark-directive-sugar to display small pieces of information, such as status or category.
The theme provides the following one predefined badges. You can customize them via the badge option in plugins/index.ts and style them under /* :badge */ in src/styles/pro.css.
badge-n: NEW
Additionally, you can direct use :badge[text]{attrs} for easy visual customization of badges. For example: :badge[ISSUE]{style="background-color: #bef264"} will display as ISSUE. If no color is specified, the default appearance will look like This.
Details Dropdown
:::details
::summary[Details Dropdown]
- List item 1
- List item 2
- List item 3
- List item 4
:::
]]>Project And Tag Page Confighttps://litos.vercel.app//posts/project-tag2025-08-11T00:00:00.000Z2025-08-11T00:00:00.000ZDnzzk2Configure Projects and Tags pages: page texts (PROJECTS_CONFIG, TAGS_CONFIG), project content frontmatter, file locations, and usage examples.
Due to the small size of the Project and tag page configurations, they are merged into one document.
The following files are compatible with this document:
src/pages/projects/index.astro - project page.
src/pages/tags/index.astro - tag statistics page.
src/pages/tags/[tag]/[...page].astro - specific tag display post list page.
src/config.ts - project and tag page config.
src/components/base - most of the components come from here.
Project Page Config
Configure page texts:
export const PROJECTS_CONFIG: ProjectConfig = {
title: 'Projects',
description: 'The examples of my projects.',
introduce: 'The examples of my projects.',
}
Property
Description
title
Title displayed on browser tags and title displayed on page.
description
The metadata description in the head element of the page.
introduce
The introduce below the title on the page.
Project content
The content displayed on the project page comes from /src/content/projects.
Its writing style is similar to posts: one MDX file represents one project.
Project frontmatter
Example (src/content/projects/Litos/index.mdx):
---
name: 'Litos'
description: 'A Simple & Modern Blog Theme for Astro.'
githubUrl: 'https://github.com/Dnzzk2/Litos'
website: 'https://litos.vercel.app/'
type: 'image'
icon: '../../../../public/projects/litos.png'
imageClass: 'w-10 h-10'
star: 32
fork: 7
---
Property
Description
name
Project name.
description
Short description shown with the project card.
githubUrl
GitHub repository URL of the project.
website
Project website or demo URL.
type
Display type for the project card. For now, 'image' shows a thumbnail.
icon
Icon path for the project (supports paths under public/).
imageClass
Extra classes for sizing the image (e.g., Tailwind classes).
star
Stars count (optional).
fork
Forks count (optional).
Tag Page Config
export const TAGS_CONFIG: TagsConfig = {
title: 'Tags',
description: 'All tags of Posts',
introduce: 'All the tags for posts are here, you can click to filter them.',
}
Property
Description
title
Title displayed on browser tags and title displayed on the tag statistics page.
description
The metadata description in the head element of the tag statistics page.
introduce
The introduce below the title on the tag statistics page.
]]>Photos Page Confighttps://litos.vercel.app//posts/photos2025-08-10T00:00:00.000Z2025-08-10T00:00:00.000ZDnzzk2Current implementation notes for the Photos page, including PHOTOS_CONFIG, PhotosList, and getPhotos().
This document describes the current implementation of the Photos page.
Current file structure
src/pages/photos/index.astro
Reads page text from PHOTOS_CONFIG
Reads timeline data from PhotosList
src/config.ts
Stores PHOTOS_CONFIG
src/lib/photos.ts
Stores PhotosList
Auto-imports photo files
Converts one folder of images into Photo[] with getPhotos()
src/types.ts
Defines PhotoData, Photo, and PolaroidVariant
src/components/photos/PolaroidCard.tsx
Maps each variant to the actual card size
Page text
The page title and intro text come from src/config.ts.
export const PHOTOS_CONFIG: PhotosConfig = {
title: 'Photos',
description: 'Here I will record some photos taken in daily life.',
introduce: 'Here I will record some photos taken in daily life.',
}
src/pages/photos/index.astro renders the page like this:
Create a folder under src/assets/photos/, for example 2026-04-01-spring-walk.
Put image files into that folder.
Make sure the file names are in the order you want after sorting.
Add one item to PhotosList in src/lib/photos.ts.
Pass the third argument to getPhotos() in the same order as the sorted files.
Example:
{
title: 'Spring Walk',
icon: { type: 'emoji', value: '🌿' },
description: 'A short walk with a camera.',
date: '2026-04-01',
travel: '',
photos: getPhotos(
'2026-04-01-spring-walk',
'Photos from a spring walk',
['3x4', '4x3', '4x5', '4x3']
),
}
Notes
alt is applied to every photo returned from the same folder.
The order is determined by sorted file path, not by import order in the editor.
If you rename files, the sort order may change, and the variants array will then map to different photos.
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.png)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
