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

【Gmeek进阶】右上角圆按钮配置 #63

Open
Meekdai opened this issue Jul 19, 2024 · 20 comments
Open

【Gmeek进阶】右上角圆按钮配置 #63

Meekdai opened this issue Jul 19, 2024 · 20 comments

Comments

@Meekdai
Copy link
Owner

Meekdai commented Jul 19, 2024

在博客首页的右上角有一些圆形的按钮,有同学不知道如何配置它们,下面就详细介绍一下配置的方式。

站内链接

例如我博客里面的关于页面友情链接。下面以添加关于页面按钮为示例。

  1. 添加config.json配置
"singlePage":["about"],
  1. 添加一个Labels标签为about,在你的issue里面写一个文章,然后配置Labels为about即可。
  2. 手动全局生成一次。

Tip

注意,about标签只可以添加给唯一一篇issue,不然会出错
如果有多个singlePage,则可以这样定义"singlePage":["link","about"],
如果需要修改或者自定义其他的按钮图标,可以使用iconList来配置

站外链接

如果你的about页面是站外的,或者想定义其他的站外链接,例如我博客里面的music。下面以添加music页面按钮为示例。

  1. 添加config.json配置
"iconList":{"music":"M12.7 0.9L7.3 0.9C6 0.9 4.9 2 4.9 3.3L4.9 10.1C4.5 9.9 4.1 9.8 3.6 9.8C2.1 9.8 0.9 11 0.9 12.4C0.9 13.9 2.1 15.1 3.6 15.1C5 15.1 6.2 13.9 6.2 12.4L6.2 3.3C6.2 2.7 6.7 2.2 7.3 2.2L12.7 2.2C13.3 2.2 13.8 2.7 13.8 3.3L13.8 7.5C13.4 7.3 12.9 7.1 12.4 7.1C11 7.1 9.8 8.3 9.8 9.8C9.8 11.2 11 12.4 12.4 12.4C13.9 12.4 15.1 11.2 15.1 9.8L15.1 3.3C15.1 2 14 0.9 12.7 0.9ZM3.6 13.8C2.8 13.8 2.2 13.2 2.2 12.4C2.2 11.7 2.8 11.1 3.6 11.1C4.3 11.1 4.9 11.7 4.9 12.4C4.9 13.2 4.3 13.8 3.6 13.8ZM12.4 11.1C11.7 11.1 11.1 10.5 11.1 9.8C11.1 9 11.7 8.4 12.4 8.4C13.2 8.4 13.8 9 13.8 9.8C13.8 10.5 13.2 11.1 12.4 11.1ZM12.4 11.1"},
"exlink":{"music":"https://music.meekdai.com"},
  1. 手动全局生成一次。

Tip

此处iconList自定义了图标的SVG,exlink定义了外部链接的地址
aboutlink这两个图标的SVG是内置的无需定义iconList,其他则需要自己定义

SVG图标格式

使用iconList自定义SVG图标必须是16px大小的,建议使用github的Octicons图标。

Octicons图标链接:https://primer.style/foundations/icons/#16px
我自己转换的Octicons图标path列表:https://gist.github.com/Meekdai/f6375fe2740428af39d90f1afa678fdc

@Meekdai Meekdai changed the title 【Gmeek进阶】右上角圆形按钮配置 【Gmeek进阶】右上角圆按钮配置 Jul 19, 2024
Copy link

为什么我一添加配置,全局生成就会失败,后面再写文章也会失败

@Meekdai
Copy link
Owner Author

Meekdai commented Jul 19, 2024

为什么我一添加配置,全局生成就会失败,后面再写文章也会失败

仔细看教程,建议去了解一下json数据格式后再进行配置

Copy link

不得不点赞,大佬是真的用心,前两天才问就出了,点赞😭😭👍🏻👍🏻👍🏻

Copy link

我这里遇到了问题,设置完成也全局更新之后右上角点不动,点击是重载

@Meekdai
Copy link
Owner Author

Meekdai commented Jul 20, 2024

@Ae1autumn

第一点,homeUrl是自定义域名的时候用的,你需要删除。

"homeUrl":"Ae1autumn.github.io",

第二,下面这个你不就是配置了一个按钮,链接回来了啊?

"iconList":{"music":"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z"},
"exlink":{"music":"Ae1autumn.github.io"},

第三,你的配置里面绝大部分都是不需要的,为什么都要放进去?挑选自己需要的配置就行,不知道或者根本用不到的建议不要配置。

@Ae1autumn
Copy link

Ae1autumn commented Jul 21, 2024 via email

@Ae1autumn
Copy link

Ae1autumn commented Jul 21, 2024 via email

Copy link

我还想问问,如果我需要添加一个站内链接指向我的一篇博客,但不是about和link,还要确保它不会显示在文章列表,怎么实现呢

@Meekdai
Copy link
Owner Author

Meekdai commented Jul 23, 2024

@Peter267 按照站内链接添加,比如你需要添加的是hello

  1. 添加config.json配置
"singlePage":["hello"],
"iconList":{"hello":"这里填你自己的SVG图标"},

2.添加一个Labels标签为hello,在你的issue里面写一个文章,然后配置Labels为hello即可。
3.手动全局生成一次。

Copy link

@Meekdai
感谢感谢🙏,我去试试,竟然回复的这么快

Copy link

@Meekdai
问题反馈:
添加完上述的代码后,原来的about和link图标消失了,按文章“如果有多个singlePage,则可以这样定义"singlePage":["link","about"]”,如果把三个label放到一起,系统会知道哪个label会被指向我设置的页面吗。我不知道这样的描述大佬听不听得懂,附上github仓库链接:
https://github.com/Peter267/peter267.github.io

@Meekdai
Copy link
Owner Author

Meekdai commented Jul 24, 2024

@Peter267 如果已经有link和about,配置如下

"singlePage":["hello","link","about"],

系统会知道哪个label会被指向我设置的页面吗

第2个步骤不就是指定对应的label到某个页面啊?

Copy link

@Meekdai
我试过了,这样有bug,会导致abot和link图标消失😥

@Meekdai
Copy link
Owner Author

Meekdai commented Jul 24, 2024

@Peter267 你试过了就保留问题页面啊,这样我才能定位你哪里出问题了。还有你配置文件里面都复制进去干嘛啊?用不到的不知道用途的不要配置进去。

Copy link

问题奇迹般的消失了,大佬nb👍,把没用的删了就可以了😀

Copy link

iconlist里面的music图标,为何是一串数字?而不是一个网址或者别的?还有about和link删除后重新再建立一次,就出错了,显示的是普通的issue而不是单独的页了。

@Meekdai
Copy link
Owner Author

Meekdai commented Sep 22, 2024

iconlist里面的music图标,为何是一串数字?而不是一个网址或者别的?还有about和link删除后重新再建立一次,就出错了,显示的是普通的issue而不是单独的页了。

认真看一下Gmeek快速上手吧。

Copy link

有些icon是两部分组成的,要怎么写?例如上传的图标

Copy link

<%= render(Primer::Beta::Octicon.new(:upload, size: :small)) %>

@Meekdai
Copy link
Owner Author

Meekdai commented Sep 25, 2024

@yinxiuqu 两部分的,可以合并成一起就行了。

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

No branches or pull requests

4 participants