Adjusting URL and Display Settings for Chinese Categories and Tags in Astrowind Theme

[zipziz]

Hello,

First off, I want to express my appreciation for the Astrowind theme; it's fantastic, and your hard work is truly valued.

I'm currently applying Astrowind to a project in Chinese and have encountered some issues that I hope to get your guidance on:

1. When the category and tags in the frontmatter of MDX files located in src/content/post/ are in Chinese, the URLs for categories and tags are generated with syllable-based pinyin. For instance, the tag “数字技术” results in a URL like https://astrowind2.vercel.app/category/shu4-zi4-ji4-shu4. How can I modify the code so that the URL appears as https://astrowind2.vercel.app/category/shu-zi-ji-shu without the tone marks?

2. On the blog post detail pages, such as https://astrowind2.vercel.app/20240324-dong1-zhi4, the URL includes syllable tone marks. How can I remove these tone marks from the URLs?

3. Similarly, on the blog post detail pages (e.g., https://astrowind2.vercel.app/20240324-dong1-zhi), both categories and tags are displayed in pinyin with tone marks. Is there a way to display them in Chinese, as per the frontmatter's categories and tags?

Your advice on these matters would be greatly appreciated. You can view the code at https://github.com/zipziz/astrowind/.

Thank you for your time and assistance.

[zipziz]

Hello,

I'm currently utilizing the Astrowind theme for a project involving Chinese language content, and I've encountered some issues with how URLs are generated for categories and tags, as well as the display of categories and tags in Chinese. My understanding of code is quite limited, but I was advised that these issues might be related to how strings are processed and converted into slugs, particularly with regard to the inclusion of tone marks in pinyin.

Issues Identified:

1. URLs for Categories and Tags: The URLs generated for categories and tags are in pinyin with tone marks (e.g., shu4-zi4-ji4-shu4 for “数字技术”). I'm hoping to have URLs without tone marks (e.g., shu-zi-ji-shu).

2. Display of Categories and Tags on Blog Posts: On detail pages, categories and tags are displayed in pinyin with tone marks rather than in Chinese characters.

Possible Clues for Modification:

• The slugify function from the limax library is used in permalinks.ts for generating slugs. It appears that this function includes tone marks by default. A potential adjustment could involve modifying the slugify function calls to exclude tone marks ({ tone: false } option).

• The processing and display logic for categories and tags may need to be reviewed to ensure that Chinese characters are displayed correctly on the blog posts' detail pages rather than their pinyin transliteration.

Since I'm not proficient in coding, I'm unable to make these modifications myself. Thus, I'm reaching out to see if you could kindly consider making these adjustments to the theme's source code. Such changes would greatly enhance the usability of the Astrowind theme for projects involving Chinese content.

Thank you very much for your time and consideration. Your effort and contribution to the open-source community are deeply appreciated.

[prototypa]

Hi @zipziz

Thank you very much for bringing this to the table. There are aspects about the Chinese language that we do not know in depth and we ended up using limax due to a recommendation from a long time ago. Your idea of ​​having a configuration to decide different characteristics of slug generation seems very good to us. There may even be a setting to disable this conversion completely. We will be working on it.

If you have any more suggestions related to how to deal with Chinese language slugs please let us know.

[prototypa]

Hi again @zipziz

We were reviewing the idea of ​​adding settings for limax in the config.yaml file but seeing that you can solve your problem very easily with one line of code, we preferred not to make major changes to AstroWind since we are already starting the new AstroWind 2.0 version.

Better we are going to give you the solution here of what you need for not use tone in slugs.

Go to this file on the marked line:

https://github.com/onwidget/astrowind/blob/main/src/utils/permalinks.ts#L21

export const cleanSlug = (text = '') =>
  trimSlash(text)
    .split('/')
    .map((slug) => slugify(slug))
    .join('/');

And replace it with this code:

export const cleanSlug = (text = '') =>
  trimSlash(text)
    .split('/')
    .map((slug) => slugify(slug, { tone: false }))
    .join('/');

In that case all slug conversions will stop using the tone

---

Please let us know if this solution works for you and if everything works ok for you. Thank you

[zipziz]

Thank you for the work on this project. I've encountered an issue regarding the tone: false solution, which successfully addresses the issue of tones in URLs. This solution works as expected, and tones are correctly removed from the URLs. However, I've noticed that on the category page titles and the category tags on the blog detail pages, the displayed text is still the converted pinyin, rather than the original Chinese characters defined in the MDX files' tags and categories.

Steps to Reproduce:

1. Define categories and tags in Chinese within the MDX frontmatter.

   ---
   publishDate: 2023-07-17T00:00:00Z
   title: 处暑
   excerpt: 为了测试 Markdown 的各种样式，下面是一篇包含各种 Markdown 元素的示例文章。这篇文章将包括标题、段落、强调样式、列表、代码块、引用、链接和图片等元素。
   image: https://images.unsplash.com/photo-1546984575-757f4f7c13cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80
   category: 数字技术
   tags:
     - 数字城市
     - 稀罕物价
     - astro
   metadata:
     canonical: https://astrowind.vercel.app/astrowind-template-in-depth
   ---

2. Access the category page generated from the above MDX file ，for example, https://astrowind2.vercel.app/category/shu-zi-ji-shu

Expected Result:

The category title on the page should display the original Chinese characters, i.e., "数字技术".

Actual Result:

The category title is displayed in pinyin as "Shu Zi Ji Shu", not in the original Chinese characters "数字技术".

Suggested Fix:

It would be greatly appreciated if there's a way to display the original Chinese characters for categories and tags on the category pages and blog detail pages, alongside handling the URL conversion without tones.

Thank you for considering this issue. I look forward to any suggestions or updates on this matter.

[prototypa]

Hi @zipziz

We have noticed the problem. Usually it does not feel strange in the English language or others that do not have conversion with limax but the change is very noticeable in languages ​​​​like Chinese.

We were reviewing in depth and the only idea we can think of is that for cases like these, the template will have to define Contents Collections for Categories and Tags.

We think it should be optional in case you need the title to be displayed correctly. Most users probably don't want to put in the effort of creating a new Category in their Content collection every time they add a Category to a Post.

We will be working on it and we will let you know very soon.
Thank you

[prototypa]

Hi @zipziz

We have fixed the issue with f234e63.

Please review and tell us how it is.
Thank you.

[zipziz]

Hi @prototypa

I've checked the solution for f234e63, and I'm happy to report that the original issue has been resolved. Thank you for your diligent work on this!