Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

为什么切换了src/app/favicon.ico的图标,还是没有效果 #133

Open
M0rtzz opened this issue May 25, 2024 · 98 comments
Open

为什么切换了src/app/favicon.ico的图标,还是没有效果 #133

M0rtzz opened this issue May 25, 2024 · 98 comments

Comments

@M0rtzz
Copy link

M0rtzz commented May 25, 2024

另外,请问public/icon下的:
android-chrome-192x192.png apple-touch-icon.png favicon-32x32.png
android-chrome-512x512.png favicon-16x16.png
都是干什么的,谢谢

@M0rtzz
Copy link
Author

M0rtzz commented May 25, 2024

另外,请问public/icon下的: android-chrome-192x192.png apple-touch-icon.png favicon-32x32.png android-chrome-512x512.png favicon-16x16.png 都是干什么的,谢谢

切换了之后执行了以下命令:
npm run dev
并在本地进行调试

@zhangyu1818
Copy link
Owner

可能有缓存,把项目里的.next文件夹删掉,切到隐私窗口看看。

这几个是不同设备用的图标,比如把网址添加到手机主界面的图标。

@M0rtzz
Copy link
Author

M0rtzz commented May 25, 2024

可能有缓存,把项目里的.next文件夹删掉,切到隐私窗口看看。

这几个是不同设备用的图标,比如把网址添加到手机主界面的图标。

好的,我试一下

@M0rtzz
Copy link
Author

M0rtzz commented May 25, 2024

可能有缓存,把项目里的.next文件夹删掉,切到隐私窗口看看。

这几个是不同设备用的图标,比如把网址添加到手机主界面的图标。

解决了,请问这个Tags里的标签,怎么做到像您自己的博客那样点击进入之后只显示关于这个标签的文章呢

@zhangyu1818
Copy link
Owner

截屏2024-05-25 20 58 19

发表discussion的时候,在右边选择对应的Labels就行了,Tag进去列表的内容是根据这个Label来查询的

@M0rtzz
Copy link
Author

M0rtzz commented May 25, 2024

截屏2024-05-25 20 58 19

发表discussion的时候,在右边选择对应的Labels就行了,Tag进去列表的内容是根据这个Label来查询的

好的,感谢您的回复

@M0rtzz
Copy link
Author

M0rtzz commented May 25, 2024

截屏2024-05-25 20 58 19

发表discussion的时候,在右边选择对应的Labels就行了,Tag进去列表的内容是根据这个Label来查询的

大佬😭,为什么我本地run dev测试的时候可以正常使用评论功能,但是部署到阿里云服务器之后使用评论功能那个登录github会报错404 not found[难过]

@zhangyu1818
Copy link
Owner

不清楚哦,你仓库改过名字吗,最好把报错贴上来看看

@M0rtzz
Copy link
Author

M0rtzz commented May 26, 2024

不清楚哦,你仓库改过名字吗,最好把报错贴上来看看

那个云服务器我准备先放一放,现在用vercel构建的时候报错了(我把讨论#1和#2删了,现在只有一个讨论3):

图片

图片

图片

图片

您看是因为什么问题导致渲染出错了

@M0rtzz
Copy link
Author

M0rtzz commented May 26, 2024

不清楚哦,你仓库改过名字吗,最好把报错贴上来看看

那个云服务器我准备先放一放,现在用vercel构建的时候报错了(我把讨论#1和#2删了,现在只有一个讨论3):

图片

图片

图片

图片

您看是因为什么问题导致渲染出错了

测试的时候点击那篇文章终端也是报这个错:

图片

@M0rtzz
Copy link
Author

M0rtzz commented May 26, 2024

不清楚哦,你仓库改过名字吗,最好把报错贴上来看看

那个云服务器我准备先放一放,现在用vercel构建的时候报错了(我把讨论#1和#2删了,现在只有一个讨论3):
图片
图片
图片
图片
您看是因为什么问题导致渲染出错了

测试的时候点击那篇文章终端也是报这个错:

图片

markdown代码如下:

environment_configuration.md

@zhangyu1818
Copy link
Owner

你可以注意下报错信息内有一个

loc: { line: 48, colunm: 23}

然后去看看markdown文件的48行23列,这里是

{**==Updating==**}

这里在MDX里不是很合法,MDX里{}可以用来读取变量,具体可以看此处文档。

要解决这个报错,需要把{}给替换成其他的,或者转义一下\{**==Updating==**\}

如果MDX对你来说不是很合适,你可以尝试用基础的markdown-it或者unifiedjs来替换src/markdown/markdown.tsx的markdown渲染。

@M0rtzz
Copy link
Author

M0rtzz commented May 26, 2024

你可以注意下报错信息内有一个

loc: { line: 48, colunm: 23}

然后去看看markdown文件的48行23列,这里是

{**==Updating==**}

这里在MDX里不是很合法,MDX里{}可以用来读取变量,具体可以看此处文档。

要解决这个报错,需要把{}给替换成其他的,或者转义一下\{**==Updating==**\}

如果MDX对你来说不是很合适,你可以尝试用基础的markdown-it或者unifiedjs来替换src/markdown/markdown.tsx的markdown渲染。

哦哦,非常感谢您的答复,我看您在b站评论中说不能有HTML注释,那请问代码块中的HTML也不能有注释吗?

@zhangyu1818
Copy link
Owner

代码块里不影响,代码块格式化高亮之类的渲染是由shiki处理的。

还有不用这么客气😂

@M0rtzz
Copy link
Author

M0rtzz commented May 26, 2024

代码块里不影响,代码块格式化高亮之类的渲染是由shiki处理的。

还有不用这么客气😂

好的好的,谢谢啦:)

@M0rtzz
Copy link
Author

M0rtzz commented May 26, 2024

代码块里不影响,代码块格式化高亮之类的渲染是由shiki处理的。

还有不用这么客气😂

图片

右边这个目录有些标题点击会报错,有些则正常跳转是怎么回事

@M0rtzz
Copy link
Author

M0rtzz commented May 26, 2024

代码块里不影响,代码块格式化高亮之类的渲染是由shiki处理的。
还有不用这么客气😂

图片

右边这个目录有些标题点击会报错,有些则正常跳转是怎么回事

好像标题里有英文句号 . 的都不行

@zhangyu1818
Copy link
Owner

zhangyu1818 commented May 26, 2024

@M0rtzz 我看了一下

第一点,如果有标题是下面这种

##  1. <a name=''></a>注意

正文中会解析成1-注意,右边列表会解析成1-a-name-a注意,两边解析的方法不一样,匹配不上。

第二点就是数字开头的id比如1-注意querySelector选不了,所以报错了🥲

第一点解决不了,建议不要加标签,现在这个里面有一个插件是rehype-autolink-headings,它会自动创建id链接。

第二点把package.json里的react-markdown-toc升级到1.2.0就可以了。你也可以移除正文中的数字序号,在右边的TOC列表可以为ul标签添加CSS属性list-style: decimal;可以自动加序号。

@M0rtzz
Copy link
Author

M0rtzz commented May 26, 2024

@M0rtzz 我看了一下

第一点,如果有标题是下面这种

##  1. <a name=''></a>注意

正文中会解析成1-注意,右边列表会解析成1-a-name-a注意,两边解析的方法不一样,匹配不上。

第二点就是数字开头的id比如1-注意querySelector选不了,所以报错了🥲

第一点解决不了,建议不要加标签,现在这个里面有一个插件是rehype-autolink-headings,它会自动创建id链接。

第二点把package.json里的react-markdown-toc升级到1.2.0就可以了。

好的好的,我试一下,:)

@M0rtzz
Copy link
Author

M0rtzz commented May 26, 2024

@M0rtzz 我看了一下

第一点,如果有标题是下面这种

##  1. <a name=''></a>注意

正文中会解析成1-注意,右边列表会解析成1-a-name-a注意,两边解析的方法不一样,匹配不上。

第二点就是数字开头的id比如1-注意querySelector选不了,所以报错了🥲

第一点解决不了,建议不要加标签,现在这个里面有一个插件是rehype-autolink-headings,它会自动创建id链接。

第二点把package.json里的react-markdown-toc升级到1.2.0就可以了。你也可以移除正文中的数字序号,在右边的TOC列表可以为ul标签添加CSS属性list-style: decimal;可以自动加序号。

@M0rtzz 我看了一下

第一点,如果有标题是下面这种

##  1. <a name=''></a>注意

正文中会解析成1-注意,右边列表会解析成1-a-name-a注意,两边解析的方法不一样,匹配不上。

第二点就是数字开头的id比如1-注意querySelector选不了,所以报错了🥲

第一点解决不了,建议不要加标签,现在这个里面有一个插件是rehype-autolink-headings,它会自动创建id链接。

第二点把package.json里的react-markdown-toc升级到1.2.0就可以了。你也可以移除正文中的数字序号,在右边的TOC列表可以为ul标签添加CSS属性list-style: decimal;可以自动加序号。

大佬,请问怎么设置默认为浅色主题呢

@zhangyu1818
Copy link
Owner

主题的颜色默认是根据设备系统主题色确定的,不支持手动设置哦

@M0rtzz
Copy link
Author

M0rtzz commented May 26, 2024

主题的颜色默认是根据设备系统主题色确定的,不支持手动设置哦

好的好的,谢谢🥳🥳

@M0rtzz
Copy link
Author

M0rtzz commented May 26, 2024

主题的颜色默认是根据设备系统主题色确定的,不支持手动设置哦

这个profile在电脑显示正好装的下:

mmexport1716733168454.png

但是手机就溢出来了:

Screenshot_2024-05-26-22-12-46-06_e39d2c7de19156b0683cd93e8735f348.jpg

这个除了减少字数,有解决的办法吗?🤔

@zhangyu1818
Copy link
Owner

你可以在手机端把它变的更长,在src/components/blocks/bio.tsx

现在是row-span-2占2行,你可以改成row-span-3占3行。

@M0rtzz
Copy link
Author

M0rtzz commented May 26, 2024

你可以在手机端把它变的更长,在src/components/blocks/bio.tsx

现在是row-span-2占2行,你可以改成row-span-3占3行。

好的好的,我明天试一下🥳

@M0rtzz
Copy link
Author

M0rtzz commented May 27, 2024

你可以在手机端把它变的更长,在src/components/blocks/bio.tsx

现在是row-span-2占2行,你可以改成row-span-3占3行。

user root;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
}

http {
	client_max_body_size 1024M; #上传文件大小限制

	sendfile on; #设置为on表示启动高效传输文件的模式

	keepalive_timeout 1800;#保持连接的时间,默认65s

	tcp_nopush on;
	tcp_nodelay on;
	# keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	gzip on;

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;

server {
	listen 80;
	server_name X.X.X.X;

	location / {
		root /root/Web/m0rtzz.blog/out;
		index index.html;
		# try_files $uri $uri/ /index.html;
	}

	error_page 500 502 503 504 /50x.html; # 错误页面
}
}

大佬这个是我的nginx.conf,try_files $uri $uri/ /index.html;这句加和不加的区别是:
不加的时候,选择一个博文的read more右键新标签页打开和使用评论功能都会报错404 NOT FOUND:

图片

@zhangyu1818
Copy link
Owner

index index.html;

首页收到index.html后,因为是nextjs写的,切换/b,不会再访问/b.html,前端路由控制了,但是新tab要访问/b.html,找不到所以404。

try_files $uri $uri/ /index.html;

这个是普通SPA项目用的,首页收到index.html后,新建tab跳到/b,nginx找不到/b/index.html,所以会返回首页的index.html,前端拿到这个以后再做前端渲染成/b的页面

这个是nextjs ssg的项目,每个页面都有html,要用下面这个才对

try_files $uri $uri.html $uri/ /404.html;

至于为什么,你可以观察一下打包出来的out文件夹,里面的路径是/posts/all.html,不是/posts/all/index.html


与项目无关的问题你可以先网上搜一下答案🤔

@M0rtzz
Copy link
Author

M0rtzz commented May 27, 2024

index index.html;

首页收到index.html后,因为是nextjs写的,切换/b,不会再访问/b.html,前端路由控制了,但是新tab要访问/b.html,找不到所以404。

try_files $uri $uri/ /index.html;

这个是普通SPA项目用的,首页收到index.html后,新建tab跳到/b,nginx找不到/b/index.html,所以会返回首页的index.html,前端拿到这个以后再做前端渲染成/b的页面

这个是nextjs ssg的项目,每个页面都有html,要用下面这个才对

try_files $uri $uri.html $uri/ /404.html;

至于为什么,你可以观察一下打包出来的out文件夹,里面的路径是/posts/all.html,不是/posts/all/index.html


与项目无关的问题你可以先网上搜一下答案🤔

好的好的,我以后注意,麻烦了大佬,我上完课试一下
👉🏻👈🏻

@M0rtzz
Copy link
Author

M0rtzz commented May 27, 2024

index index.html;

首页收到index.html后,因为是nextjs写的,切换/b,不会再访问/b.html,前端路由控制了,但是新tab要访问/b.html,找不到所以404。

try_files $uri $uri/ /index.html;

这个是普通SPA项目用的,首页收到index.html后,新建tab跳到/b,nginx找不到/b/index.html,所以会返回首页的index.html,前端拿到这个以后再做前端渲染成/b的页面

这个是nextjs ssg的项目,每个页面都有html,要用下面这个才对

try_files $uri $uri.html $uri/ /404.html;

至于为什么,你可以观察一下打包出来的out文件夹,里面的路径是/posts/all.html,不是/posts/all/index.html

与项目无关的问题你可以先网上搜一下答案🤔

大佬,这个代码块可以添加复制按钮吗🤔

@M0rtzz M0rtzz closed this as completed May 27, 2024
@zhangyu1818
Copy link
Owner

你本地debug一下吧,我看图片也不知道是为什么

@M0rtzz
Copy link
Author

M0rtzz commented Jun 19, 2024

你本地debug一下吧,我看图片也不知道是为什么

好的

@M0rtzz
Copy link
Author

M0rtzz commented Jun 20, 2024

@zhangyu1818

好像找到了大致的原因,其中一个可能出现报错的是标题中的``局部代码块

比如:

## `test`

这种就会报错。

现在报错解决了,但是对于这种二级标题过多的好像也起不到作用,滑动到靠下的二级标题也还是看不见:

图片

且如果标题长度有差距的话,同级目录距离左边的距离参差不齐:

图片

@zhangyu1818
Copy link
Owner

参差不齐看上去是因为文本居中对齐了

你可以看一些别的网站如果TOC太长是如何解决的,我目前还没遇到过这种问题。

@M0rtzz
Copy link
Author

M0rtzz commented Jun 23, 2024

@zhangyu1818 大佬请问您有计划加入latex内联公式和公式块的渲染功能吗

@zhangyu1818
Copy link
Owner

@M0rtzz 我没这个需求哈,你可以往markdown组件里remarkPlugins加一个remark-math,对着配一下CSS,就可以渲染数学公式了。

@M0rtzz
Copy link
Author

M0rtzz commented Jun 25, 2024

@M0rtzz 我没这个需求哈,你可以往markdown组件里remarkPlugins加一个remark-math,对着配一下CSS,就可以渲染数学公式了。

好的,我看一下🥳

@M0rtzz
Copy link
Author

M0rtzz commented Jul 21, 2024

@zhangyu1818

请问您能提供一下https://www.zhangyu.dev/posts/135的原始markdown文件吗,想看一下语法,谢谢

@limuen
Copy link

limuen commented Jul 22, 2024

你可以注意下报错信息内有一个

loc: { line: 48, colunm: 23}

然后去看看markdown文件的48行23列,这里是

{**==Updating==**}

这里在MDX里不是很合法,MDX里{}可以用来读取变量,具体可以看此处文档。
要解决这个报错,需要把{}给替换成其他的,或者转义一下\{**==Updating==**\}
如果MDX对你来说不是很合适,你可以尝试用基础的markdown-it或者unifiedjs来替换src/markdown/markdown.tsx的markdown渲染。

哦哦,非常感谢您的答复,我看您在b站评论中说不能有HTML注释,那请问代码块中的HTML也不能有注释吗?

能发个b站的链接吗?

@zhangyu1818
Copy link
Owner

zhangyu1818 commented Jul 22, 2024

@M0rtzz

## MDX components

### Code Group

<CodeGroup >

```ts blog-config.ts
export const repoName = 'blog'
export const repoOwner = 'zhangyu1818'
export const site = 'https://zhangyu.dev'
```

```yml graphql.config.yml
schema:
  - https://api.github.com/graphql:
      headers:
        Authorization: Bearer ${GITHUB_TOKEN}
documents: '**/*.ts'
```

</CodeGroup>

### Details

<Details summary="Details">

Details Block

````md
<Details summary="Details">

Details Block

```yml graphql.config.yml
schema:
  - https://api.github.com/graphql:
      headers:
        Authorization: Bearer ${GITHUB_TOKEN}
documents: '**/*.ts'
```

Details block is a collapsible component.

</Details>
````

Details block is a collapsible component.

</Details>

### Github Alerts

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

## Shiki

### Twoslash

```ts twoslash
// @errors: 2540
interface Todo {
  title: string
}

const todo: Readonly<Todo> = {
  title: 'Delete inactive users'.toUpperCase(),
  //  ^?
}

todo.title = 'Hello'

Number.parseInt('123', 10)
//      ^|




```

```ts twoslash
// @log: Custom log message
const a = 1
// @error: Custom error message
const b = 1
// @warn: Custom warning message
const c = 1
// @annotate: Custom annotation message
```

---

### Shiki Transformers

#### `transformerNotationDiff`

```ts
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')
```

---

#### `transformerNotationHighlight`

```ts
console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')
```

```ts
// [!code highlight:3]
console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')
```

---

#### `transformerNotationWordHighlight`

```ts
// [!code word:Hello]
const message = 'Hello World'
console.log(message) // prints Hello World
```

```ts
// [!code word:Hello:1]
const message = 'Hello World'
console.log(message) // prints Hello World
```

---

#### `transformerNotationFocus`

```ts
console.log('Not focused')
console.log('Focused') // [!code focus]
console.log('Not focused')
```

```ts
// [!code focus:3]
console.log('Focused')
console.log('Focused')
console.log('Not focused')
```

---

#### `transformerNotationErrorLevel`

```ts
console.log('No errors or warnings')
console.error('Error') // [!code error]
console.warn('Warning') // [!code warning]
```

---

#### `transformerMetaHighlight`

```js {1,3-4}
console.log('1')
console.log('2')
console.log('3')
console.log('4')
```

#### `transformerMetaWordHighlight`

```js /Hello/
const msg = 'Hello World'
console.log(msg) // prints Hello World
```

@M0rtzz
Copy link
Author

M0rtzz commented Jul 23, 2024

@M0rtzz

## MDX components

### Code Group

<CodeGroup >

```ts blog-config.ts
export const repoName = 'blog'
export const repoOwner = 'zhangyu1818'
export const site = 'https://zhangyu.dev'
schema:
  - https://api.github.com/graphql:
      headers:
        Authorization: Bearer ${GITHUB_TOKEN}
documents: '**/*.ts'

Details

Details Block

<Details summary="Details">

Details Block

```yml graphql.config.yml
schema:
  - https://api.github.com/graphql:
      headers:
        Authorization: Bearer ${GITHUB_TOKEN}
documents: '**/*.ts'
```

Details block is a collapsible component.

</Details>

Details block is a collapsible component.

Github Alerts

[!NOTE]
Useful information that users should know, even when skimming content.

[!TIP]
Helpful advice for doing things better or more easily.

[!IMPORTANT]
Key information users need to know to achieve their goal.

[!WARNING]
Urgent info that needs immediate user attention to avoid problems.

[!CAUTION]
Advises about risks or negative outcomes of certain actions.

Shiki

Twoslash

// @errors: 2540
interface Todo {
  title: string
}

const todo: Readonly<Todo> = {
  title: 'Delete inactive users'.toUpperCase(),
  //  ^?
}

todo.title = 'Hello'

Number.parseInt('123', 10)
//      ^|


// @log: Custom log message
const a = 1
// @error: Custom error message
const b = 1
// @warn: Custom warning message
const c = 1
// @annotate: Custom annotation message

Shiki Transformers

transformerNotationDiff

console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')

transformerNotationHighlight

console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')
// [!code highlight:3]
console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')

transformerNotationWordHighlight

// [!code word:Hello]
const message = 'Hello World'
console.log(message) // prints Hello World
// [!code word:Hello:1]
const message = 'Hello World'
console.log(message) // prints Hello World

transformerNotationFocus

console.log('Not focused')
console.log('Focused') // [!code focus]
console.log('Not focused')
// [!code focus:3]
console.log('Focused')
console.log('Focused')
console.log('Not focused')

transformerNotationErrorLevel

console.log('No errors or warnings')
console.error('Error') // [!code error]
console.warn('Warning') // [!code warning]

transformerMetaHighlight

console.log('1')
console.log('2')
console.log('3')
console.log('4')

transformerMetaWordHighlight

const msg = 'Hello World'
console.log(msg) // prints Hello World

谢谢您

@M0rtzz
Copy link
Author

M0rtzz commented Aug 26, 2024

@zhangyu1818

图片

这种 transformerNotationDiff ,如果添加了一个空行,如上图红色框,它就不会显示

@zhangyu1818
Copy link
Owner

先看看是Shiki不支持,还是样式没加上

@M0rtzz M0rtzz closed this as completed Oct 12, 2024
@M0rtzz
Copy link
Author

M0rtzz commented Oct 16, 2024

你可以注意下报错信息内有一个

loc: { line: 48, colunm: 23}

然后去看看markdown文件的48行23列,这里是

{**==Updating==**}

这里在MDX里不是很合法,MDX里{}可以用来读取变量,具体可以看此处文档。
要解决这个报错,需要把{}给替换成其他的,或者转义一下\{**==Updating==**\}
如果MDX对你来说不是很合适,你可以尝试用基础的markdown-it或者unifiedjs来替换src/markdown/markdown.tsx的markdown渲染。

哦哦,非常感谢您的答复,我看您在b站评论中说不能有HTML注释,那请问代码块中的HTML也不能有注释吗?

能发个b站的链接吗?

url

@M0rtzz
Copy link
Author

M0rtzz commented Oct 16, 2024

@zhangyu1818

请问这个简介是在哪编辑的呢

图片

@M0rtzz M0rtzz reopened this Oct 16, 2024
@zhangyu1818
Copy link
Owner

在根目录有一个summary.json,这个可以手动写。我是配置了一个openai key,在代码里生成的

@M0rtzz
Copy link
Author

M0rtzz commented Oct 16, 2024

在根目录有一个summary.json,这个可以手动写。我是配置了一个openai key,在代码里生成的

嗯嗯我看一下

@M0rtzz M0rtzz closed this as completed Oct 16, 2024
@M0rtzz
Copy link
Author

M0rtzz commented Oct 18, 2024

@zhangyu1818

当这些高亮位于第一行和最后一行时,第一行上方有大片空白,这个怎么去掉

url

图片

url

图片

如果修改padding-top为0,其他不需要为0的就变的奇怪了,且就算设为0高度还是和正常的不一样

@M0rtzz M0rtzz reopened this Oct 18, 2024
@zhangyu1818
Copy link
Owner

因为这个原始代码块里第一行是hightlight的注释代码吧,shiki的网站示例也有这个问题

https://shiki.style/packages/transformers#transformernotationhighlight

@M0rtzz
Copy link
Author

M0rtzz commented Oct 20, 2024

@zhangyu1818

url

如果想在代码块的左上角添加这是什么语言,这个语言属性怎么在这获取呢

@M0rtzz
Copy link
Author

M0rtzz commented Oct 21, 2024

因为这个原始代码块里第一行是hightlight的注释代码吧,shiki的网站示例也有这个问题

https://shiki.style/packages/transformers#transformernotationhighlight

@zhangyu1818

url

如果想在代码块的左上角添加这是什么语言,这个语言属性怎么在这获取呢

@zhangyu1818
Copy link
Owner

parseMetaString(meta, node) {

这里应该可以拿到传进去。

@M0rtzz
Copy link
Author

M0rtzz commented Oct 22, 2024

parseMetaString(meta, node) {

这里应该可以拿到传进去。

嗯嗯,我看一下

@M0rtzz
Copy link
Author

M0rtzz commented Oct 29, 2024

parseMetaString(meta, node) {

这里应该可以拿到传进去。

@zhangyu1818

改成这样:

            parseMetaString: (meta, node) => {
              const metaData = meta.split(' ')
              const fileName = metaData.find(item => path.extname(item) !== '')
              const language = fileName ? path.extname(fileName).slice(1) : 'text'
              const codeText = findCodeText(node)
              console.log(language)

              return {
                'data-file': fileName,
                'data-lang': language,
                content: codeText?.value,
              }
            },

会打印:

 ✓ Starting...
 ✓ Ready in 1448ms
 ○ Compiling /posts/[id] ...
 ✓ Compiled /posts/[id] in 2s (2240 modules)
text
ts
yml
yml
text
text
text
text
text
text
text
text
text
text
text
text
 GET /posts/8 200 in 7441ms

很多打印为text都不对

文章为:

url

@zhangyu1818
Copy link
Owner

要去找code节点里的language信息,不是fileName,不行给shiki的配置加一个addLanguageClass: true,然后用css做也行,他会给code标签加一个language的class

@M0rtzz
Copy link
Author

M0rtzz commented Oct 30, 2024

要去找code节点里的language信息,不是fileName,不行给shiki的配置加一个addLanguageClass: true,然后用css做也行,他会给code标签加一个language的class

嗯嗯,我看一下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants