6.4.0版本之后的两个问题 #462

gapplef · 2018-11-02T11:19:06Z

reuixiy · 2018-11-02T16:05:28Z

关于问题 3

英文的引号会被渲染为中文的引号

首先，确定你输入的是哪个「引号」，'（U+0027）或 ’（U+2019）。

一、`'`（`U+0027`）

（一）HOW

如果你输入的是 '（U+0027），那么试试：

## 适用 hexo-renderer-markdown-it 和 hexo-renderer-markdown-it-plus
markdown:
  render:
-    typographer: true
+    typographer: false

或者：

## 适用默认的 hexo-renderer-marked
marked:
-  smartypants: true
+  smartypants: false

（二）WHY

由 hexo-renderer-markdown-it 的 Wiki：

typographer: false # No substitution, so dumb quotes will remain dumb quotes, etc.

可知，如果为 true 的话，则会替换 dumb quotes（直引号），即 '（U+0027）和 "（U+0022）。如果没猜错的话（没去找相关源码，也没实际测试），替换结果应该是：

'（U+0027） ---> ’（U+2019）
"（U+0022） ---> “（U+201C） + ”（U+201D）

先看看第 2 个。发现了没，替换后就是「中文的」双引号，而中文的字符都是（不确定）全角字符，这就会导致你看到的那个问题：

英文内容惨不忍睹

不过，你的例子是第 1 个罢了，也就是成了「中文的」右单引号。

二、`’`（`U+2019`）

如果你输入的是 ’（U+2019），那么：

尝试用 '（U+0027）替代。
修改 CSS 的 font-family，即在中文字体前添加一个英文字体。

（一）第 1 点

用 '（U+0027）替代标准吗？不过貌似回答这个问题前，应该先问问美观不？

可以在 Medium 上参考任意一篇文章，如：It’s Time for Tech Workers to Get Political，用的都是 ’（U+2019）和 “（U+201C） + ”（U+201D），显示效果也的确要比直引号 '（U+0027）和 "（U+0022）要好。~~那为什么不用呢？因为要想兼顾到中文排版，就必须用 '（U+0027）替代。~~

那么，用 '（U+0027）替代标准吗？应该没问题（待考）。

（二）第 2 点

考虑到在 NexT 中，会默认添加 Lato 字体：

hexo-theme-next/source/css/_variables/base.styl

Lines 59 to 68 in 91415d8

    
           get_font_family(config) { 
        
             custom_family = hexo-config('font.' + config + '.family') 
        
             return custom_family is a 'string' ? custom_family : null 
        
           } 
        
           // Font families. 
        
           $font-family-chinese      = "PingFang SC", "Microsoft YaHei" 
        
           $font-family-base         = $font-family-chinese, sans-serif 
        
           $font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')

hexo-theme-next/_config.yml

Lines 395 to 410 in 91415d8

    
           font: 
        
             enable: false 
        
             # Uri of fonts host. E.g. //fonts.googleapis.com (Default). 
        
             host: 
        
             # Font options: 
        
             # `external: true` will load this font family from `host` above. 
        
             # `family: Times New Roman`. Without any quotes. 
        
             # `size: xx`. Use `px` as unit. 
        
             # Global font settings used for all elements in <body>. 
        
             global: 
        
               external: true 
        
               family: Lato 
        
               size:

所以无需对 CSS 进行更改。但是，由于不一定每个设备本地都已安装 Lato 字体，故需要启用外链字体库来确保 Lato 一定会被加载。

font:
-  enable: false
+  enable: true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default).
  # 考虑到国内网络
-  host:
+  host: https://fonts.loli.net

当然，这种方式必然有个 bug，即中文内容可能会惨不忍睹。原本全角的双引号和单引号变成了半角，效果很差。

三、评论

为什么会有上面那个无法避免的 bug 呢？因为我们熟悉的双引号及单引号都是直接来自英文的（待考），所以它们的 Unicode 是一样的。而考虑到中文与英文的排版标准不同（全角与半角），所以中英文混排时就会引起冲突，如英文的撇号 ’（U+2019）与「中文的」右单引号。

另，关于中文排版的引号，一种解决策略是用直角引号替代，即「」和『』。这也是目前台湾、香港，以及日本的标准。显示效果的话，因人而异。

四、我的选择

~~撇号，我是直接用 '（U+0027），因为这个符号在 Linux 上输入方便、简单。~~

~~引号：~~

~~- 中文，双引号用的 “（U+201C） + ”（U+201D），单引号用的 ‘（U+2018） + ’（U+2019）。~~
~~- 英文，双引号直接用的 "（U+0022），单引号直接用的 '（U+0027）。~~

五、References & Resources

六、更新（`2019-01-05`）

@gapplef 抱歉，我的选择已经发生了改变。

考虑到目前许多英文媒体都不再使用直引号，而是使用排版规范的弯引号，阅读多了之后：

英文内容，再次见到直引号，我觉得直引号很丑。
中文内容，再次见到弯引号，我觉得很别扭，不适合中文，应该用直角引号「」。

综上，我目前的选择是：

撇号：’（U+2019）

引号：

中文，用的「」，内如需再引用则用『』。
英文，用的 “”，内如需再引用则用 ‘’。

也就是说，将中文借用的弯引号还给英文，而中文则采用更契合汉字方方正正特点的直角引号。

在博客，要成功地还给英文，就要修改 CSS 的 font-family，即在中文字体前添加一个英文字体。

这样一来，英文字体排版能达到完美，但中文字体排版还有三处问题：

间隔号（间距问题）
省略号（位置问题）
破折号（断开问题）

因为这三个符号也是直接来自英文的，中文又没有相应独立的 Unicode，而 CSS 中设置了英文字体优先于中文字体，所以字形是英文，而非中文。

gapplef · 2018-11-03T01:57:40Z

@reuixiy 非常感谢你的详细回复。
我用的Linux系统，输入的确实是'（U+0027），在VSCode中预览也没有问题。
typographer: false解决了问题，非常感谢。
不过hexo-renderer-markdown-it-plus的配置与hexo-renderer-markdown-it不同：

## 适用于hexo-renderer-markdown-it-plus
markdown-it-plus:
    typographer: false

再次感谢！终于可以愉快的写英文了！

gapplef · 2018-11-06T00:39:20Z

谁能解答下前面两个关于next的问题？
or should I express my question in English to get help?

jiangtj · 2018-11-08T02:11:24Z

@gapplef 问题一，我通过修改样式来保持和之前（6.4.0前）一样
修改source/css/_variables/custom.styl

$content-desktop         = 75%
$content-desktop-large   = 75%
$content-desktop-largest = 75%

修改source/css/_custom/custom.styl

.header-inner {
  max-width: 1000px
}
.main-inner {
  max-width: 1000px
}
.footer-inner{
  max-width: 1000px
}
.header {
  max-width: 1000px
}

这些改动会导致其他主题（Muse、Mist）异常，如果您要改回这两主题，需要去掉这些自定义样式

gapplef · 2018-11-08T03:59:50Z

@jiangtj 感谢你的帮助，不过改源码还是太麻烦，所以希望官方能提供一个配置选项。
有没有官方的人来回复下？

jiangtj · 2018-11-08T04:35:37Z

@gapplef 不需要修改源码，这两个custom.styl本身就是提供给用户自定义的，里面没code，直接添加code就行
稍微解释一下问题一，6.4.0之后的版本统一不同的Scheme在不同分辨率下的表现，也因此去掉了max_content_width（只在Gemini scheme下有效）
您可以看一下这个PR #339
如果$content-desktop-largest $content-desktop-large $content-desktop足够的话，也不需要自定义在css添加max-width

jiangtj · 2018-11-08T04:39:04Z

@ivan-nginx is it possible for each of schemes to be added $max_content_width?

ivan-nginx · 2018-11-08T04:54:28Z

By default NexT has following setting of content width:

700px → when screen width < 1200px.
800px → when screen width >= 1200px.
900px → when screen width >= 1600px.
In mobile / tablet devices it will use responsive width.

You can change content width by editing CSS style file. Edit source/css/_variables/custom.styl in theme root directory and add varibles:

Muse / Mist

For example, you want wider content width. You may redefine this variables with percentage width:

next/source/css/_variables/custom.styl

$content-desktop         = 90%
$content-desktop-large   = 90%
$content-desktop-largest = 90%

Pisces / Gemini

$content-desktop value in this schemes is auto-responsive by default. It can be changed to any value too, but for better content visibility recommended to stay it as is.

In this schemes content width was defined on maximum and already balanced: if desktop width will be wider – content width will more narrowed for easier reading. But if you want to make more narrow content width in wider desktops, here is example:

next/source/css/_variables/custom.styl:

$content-desktop-large   = 65em
$content-desktop-largest = 65%

ivan-nginx · 2018-11-08T04:59:34Z

@jiangtj can u please show me what's the difference between this settings and $max_content_width? Show screens with different resolution, if it's possible.

jiangtj · 2018-11-08T05:24:56Z

@ivan-nginx
It is different for trigger conditions.
$content-desktop-largest will be effective when desktop_width >= 1600px
$content-desktop-large will be effective when desktop_width >= 1200px
$max_content_width will be effective when content_width >= $max_content_width

And my config $content-desktop-* = 75% max_width = 1000px was effective when desktop_width >= 1333px

ivan-nginx · 2018-11-08T05:27:38Z

@jiangtj if monitor width will be 4k?

jiangtj · 2018-11-08T05:55:32Z

It's unrealistic, because . If content_width is too large, will be ugly.
Look google's site in 4k, It fixed width too. 😂

ivan-nginx · 2018-11-08T06:13:26Z

So, u understand now why max width was removed?

gapplef · 2018-11-09T14:42:06Z

@jiangtj OK, I understand, thanks a lot!

I still have some questions and hope you can help:

Is it possible to have something similar to the _data/next.yml that I can update the next source without modify the file under next each time?
You said: "$content-desktop-largest will be effective when desktop_width >= 1600px".
My laptop is 1920x1080(13'' screen), why it is $content-desktop-large that control the content width?

jiangtj · 2018-11-10T05:03:22Z

@gapplef @ivan-nginx I'm sorry for this.
I tested site in 1500~1600px. It will be a little fat. But drives have only 1024 1280 1366 1440 1600 1920 px. These configurations are almost the same as max_value

$content-desktop         = 75%
$content-desktop-large   = 75%
$content-desktop-largest = 1000px

@gapplef May be windows scale not 100%.

If scale is 150%, 1920/1.5=1280

jiangtj · 2018-11-10T05:12:56Z

@gapplef 关于问题二
网站字体和code字体是分开配置的，可能设计就是这样，而且我也试了将code字体调大，并不好看 😂
source/css/_variables/base.styl: 93-99行 144-151行

// Font size
$font-size-base           = 14px
$font-size-base           = unit(hexo-config('font.global.size'), px) if hexo-config('font.global.size') is a 'unit'
$font-size-small          = $font-size-base - 2px
$font-size-smaller        = $font-size-base - 4px
$font-size-large          = $font-size-base + 2px
$font-size-larger         = $font-size-base + 4px

// Code & Code Blocks
// --------------------------------------------------
$code-font-family               = $font-family-monospace
$code-font-size                 = 14px
$code-font-size                 = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius             = 3px
$code-foreground                = $black-light
$code-background                = $gainsboro

如果不希望字体跟随分辨率变化的话，可以在custom.styl，添加这里变量覆盖，例如：

$font-size-small          = $font-size-base
$font-size-smaller        = $font-size-base
$font-size-large          = $font-size-base
$font-size-larger         = $font-size-base

ivan-nginx · 2018-11-10T10:31:33Z

Is it possible to have something similar to the _data/next.yml that I can update the next source without modify the file under next each time.

Yes. This called Hexo-way.

gapplef · 2018-11-10T11:24:00Z

@jiangtj You are right, I have a scale factor of 1.35.

Thanks for your help, for probem 2, I also understand the reason.
The font size is change with screen size, while the code font size is keep unchange. The result will inconsistent on large and small screen: code font size is same with font size at small screen, and they are not the same size on large screen.
Before v6.4.0, font size on my laptop is $font-size-base, and is same as code size.
After v6.4.0, font size on my laptop change to $font-size-large for some reason, and is larger than code size.

I'm ok with font size adapt to screen size, but is it possible to change code size at the same time?

. . . . .

gapplef · 2018-11-10T11:45:18Z

Is it possible to have something similar to the _data/next.yml that I can update the next source without modify the file under next each time.

@ivan-nginx I mean for these changes:

$content-desktop-large   = 65em
$content-desktop-largest = 65%

that I should put in themes/next/source/css/_variables/custom.styl

Is there some way similar to the so called NexT-way, that I can put the custom.styl config under the source folder of my site, instead of themes/next/source/css/_variables/?

jiangtj · 2018-11-12T02:06:50Z

@gapplef
Look _config.yml in theme, 15-32 lines

# Redefine custom file paths. Introduced in NexT v6.0.2.
# If commented, will be used default custom file paths.

# For example, you want to put your custom styles file
# outside theme directory in root `source/_data`, set
# `styles: source/_data/styles.styl`
custom_file_path:
  # Default paths: layout/_custom/*
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig

  # Default path: source/css/_variables/custom.styl
  variables: source/_data/variables.styl
  # Default path: source/css/_mixins/custom.styl
  #mixins: source/_data/mixins.styl
  # Default path: source/css/_custom/custom.styl
  #styles: source/_data/styles.styl

gapplef · 2018-11-12T15:11:29Z

@jiangtj Thanks a lot!
I forget about _config.yml after set up _data/next.yml 😂

liuqinh2s · 2019-04-15T02:33:32Z

@reuixiy
I use "hexo-renderer-kramed": "^0.1.4". What should I do?

liuqinh2s · 2019-04-15T03:38:05Z

@reuixiy
I find out how to configure it after looking up the doc of kramed.
https://github.com/sun11/hexo-renderer-kramed

kramed:
  smartypants: false

GitHub
sun11/hexo-renderer-kramed
Markdown renderer for Hexo with kramed engine. Contribute to sun11/hexo-renderer-kramed development by creating an account on GitHub.

ivan-nginx added the Wait for Answer label Nov 15, 2018

ivan-nginx added Non English Bug labels Dec 16, 2018

stevenjoezhang added Solved and removed Wait for Answer labels Mar 8, 2019

stevenjoezhang closed this as completed Mar 14, 2019

liuqinh2s mentioned this issue Apr 15, 2019

求助：单引号显示异常 hexojs/hexo#1981

Closed

stevenjoezhang reopened this Aug 27, 2019

stevenjoezhang removed the Non English label Sep 27, 2019

stevenjoezhang added Discussion Question and removed Bug labels Nov 9, 2019

stevenjoezhang closed this as completed Nov 22, 2019

stevenjoezhang mentioned this issue Sep 12, 2022

输入的单引号会被自动替换 next-theme/hexo-theme-next#568

Closed

3 tasks

AgAngle mentioned this issue Aug 15, 2023

[Bug] 英文单引号或双引号被markdown统一翻译成中文的 hinesboy/mavonEditor#803

Open

stevenjoezhang mentioned this issue Aug 29, 2023

英文it's中的中英文转换及空格问题 next-theme/hexo-pangu#10

Closed

stevenjoezhang mentioned this issue Nov 14, 2023

Quotation marks replaced with odd character next-theme/hexo-theme-next#716

Closed

3 tasks

stevenjoezhang mentioned this issue Apr 19, 2024

' 被渲染成了 ’ next-theme/hexo-theme-next#791

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

6.4.0版本之后的两个问题 #462

6.4.0版本之后的两个问题 #462

gapplef commented Nov 2, 2018 •

edited by ivan-nginx

Loading

reuixiy commented Nov 2, 2018 •

edited

Loading

gapplef commented Nov 3, 2018

gapplef commented Nov 6, 2018

jiangtj commented Nov 8, 2018

gapplef commented Nov 8, 2018

jiangtj commented Nov 8, 2018

jiangtj commented Nov 8, 2018

ivan-nginx commented Nov 8, 2018 •

edited

Loading

ivan-nginx commented Nov 8, 2018

jiangtj commented Nov 8, 2018

ivan-nginx commented Nov 8, 2018

jiangtj commented Nov 8, 2018

ivan-nginx commented Nov 8, 2018

gapplef commented Nov 9, 2018 •

edited

Loading

jiangtj commented Nov 10, 2018

jiangtj commented Nov 10, 2018

ivan-nginx commented Nov 10, 2018

gapplef commented Nov 10, 2018 •

edited

Loading

gapplef commented Nov 10, 2018

jiangtj commented Nov 12, 2018

gapplef commented Nov 12, 2018

liuqinh2s commented Apr 15, 2019

liuqinh2s commented Apr 15, 2019 •

edited by unfurl-links bot

Loading

6.4.0版本之后的两个问题 #462

6.4.0版本之后的两个问题 #462

Comments

gapplef commented Nov 2, 2018 • edited by ivan-nginx Loading

I agree and want to create new issue

NexT Information

reuixiy commented Nov 2, 2018 • edited Loading

关于问题 3

一、'（U+0027）

（一）HOW

（二）WHY

二、’（U+2019）

（一）第 1 点

（二）第 2 点

三、评论

四、我的选择

五、References & Resources

六、更新（2019-01-05）

gapplef commented Nov 3, 2018

gapplef commented Nov 6, 2018

jiangtj commented Nov 8, 2018

gapplef commented Nov 8, 2018

jiangtj commented Nov 8, 2018

jiangtj commented Nov 8, 2018

ivan-nginx commented Nov 8, 2018 • edited Loading

Muse / Mist

Pisces / Gemini

ivan-nginx commented Nov 8, 2018

jiangtj commented Nov 8, 2018

ivan-nginx commented Nov 8, 2018

jiangtj commented Nov 8, 2018

ivan-nginx commented Nov 8, 2018

gapplef commented Nov 9, 2018 • edited Loading

jiangtj commented Nov 10, 2018

jiangtj commented Nov 10, 2018

ivan-nginx commented Nov 10, 2018

gapplef commented Nov 10, 2018 • edited Loading

gapplef commented Nov 10, 2018

jiangtj commented Nov 12, 2018

gapplef commented Nov 12, 2018

liuqinh2s commented Apr 15, 2019

liuqinh2s commented Apr 15, 2019 • edited by unfurl-links bot Loading

gapplef commented Nov 2, 2018 •

edited by ivan-nginx

Loading

reuixiy commented Nov 2, 2018 •

edited

Loading

一、`'`（`U+0027`）

二、`’`（`U+2019`）

六、更新（`2019-01-05`）

ivan-nginx commented Nov 8, 2018 •

edited

Loading

gapplef commented Nov 9, 2018 •

edited

Loading

gapplef commented Nov 10, 2018 •

edited

Loading

liuqinh2s commented Apr 15, 2019 •

edited by unfurl-links bot

Loading