Head Style Tag didn't load

[ersrohu]

Bug Report

I wanted to add some style to my document, then I input this to the index.html.

<head>
  <!--The above is omitted-->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
  <style type="text/css">
    p {
      text-indent: 2em;
    }
  </style>

But it didn't make text indent.

What's the matter? Why?

I can't understand.

• Bug does still occur when all/other plugins are disabled?

• Your OS: Windows 11

• Node.js version: ?

• npm/yarn version: ?

• Browser version: MS Edge Current

• Docsify version: Current

• Docsify plugins: None

Please create a reproducible sandbox

Mention the docsify version in which this bug was not present (if any)

[sy-records]

I can't reproduce the problem you mentioned.

[ersrohu]

Oh... But here...

So I have to use the 2 full-width spaces (　, &#x3000) to make indent.

I think that it has produced by GitHub Pages, or because I'm in Chinese Mainland, then...

Wait, I've put the index.html in the zh-cn folder, has it caused by this?

You can look at these file and check the problems below:

• The Problem file index.html
• Markdown files example

[sy-records]

You only added it in zh-cn/index.html, which is normal when using zh-cn as an entry.

cd zh-cn/
docsify serve .

[ersrohu]

@sy-records Thank you very much!

[ersrohu]

But I want to let the /zh-cn/ become a child folder, not main folder, the main folder is en-us. Hmm, has this caused by "fallbackLanguages", its value is: ["en","zh-cn"] .

[sy-records]

you should add it to /index.html and handle the style according to the language.

[ersrohu]

you should add it to /index.html and handle the style according to the language.

It doesn't give attention to the /zh-cn/index.html, sure?

How to do this? Add the "fallbackLanguages": ["en","zh-cn"]? Or, what code should I add?

Or use below?

I don't want the English text indents, I only want the Chinese text indents

I don't want the English text indents, I only want the Chinese text indents

I don't want the English text indents, I only want the Chinese text indents

<style type="text/css>
/* But this is not very good, because when I use below: */
/*
<p class="zh-cn">**内容**</p>
*/
/* It won't render the markdown text. */
    p .zh-cn{
    text-indent: 2em; 
}
</style>

So, what can I do?

[sy-records]

    <script>
      // Set html "lang" attribute based on URL
      var lang = location.hash.match(/#\/(de-de|es|ru-ru|zh-cn)\//);

      if (lang) {
        document.documentElement.setAttribute('lang', lang[1]);
      }
    </script>

Add css:

      :lang(zh-cn) #main p {
          text-indent: 2em;
      }

[ersrohu]

It doesn't indent yet.

But where should I put these code at, respectively?

I don't know that should be put in the <body> or <head>.

Can you tell me, please?

I've tried to put the css in <head>, and put the script in <body>, then it doesn't indent.

[sy-records]

All are tested by me.
Unless you didn't add the right location or file.
Add it to /index.html. see https://github.com/docsifyjs/docsify/blob/develop/docs/index.html#L60-L65

[ersrohu]

It still doesn't indent...

I don't want to say more...

See here: https://github.com/ersrohu/mingyues-daily-life/blob/main/index.html

[sy-records]

Why did I test normal?

[ersrohu]

What?????????????????

I'm so speechless

[ersrohu]

Oh, I have come back.
Shall we discuss this problem again? So the problem is that the solution is not compatible with some browsers, such as your solution, it only can run correctly in Google Chrome, and Edge can't run it correctly.
Are there any better solutions?

[ersrohu]

Do you get it?
The <html> tag...

<!--It should be this-->
<html lang='zh-cn'>
<!--But it's turned to this-->
<html lang='en'>   <!--Focus on here-->

[sy-records]

setAttribute seems to have compatibility issues, you can find the solution through the search engine.

[ersrohu]

Ah, this...
It seems that the problems are not caused by setAttribute, however, I think that it's caused by below:

document.documentElement.setAttribute('lang', lang[1]);    //Note "documentElement"
var lang = location.hash.match(/#\/(de-de|es|ru-ru|zh-cn)\//);   //You are meaning that you want to use the URL to set its attribute?
// But it seems that is not very good at the compatibility.

Two lines of these of code is very suspicious, maybe because you didn't declare what is documentElement, it may let the browser feel odd.
In additional, there is a question - what did the location.hash.match match? Its return value might be undefined.
Wait for me, please. I'll test this and reply you.