Skip to content

Commit f9b6f7a

Browse files
WendaoLeeWendaoLee
committed
Doc: 没有更新完的浏览器插件文案
1 parent 5e5fcc2 commit f9b6f7a

File tree

9 files changed

+369
-43
lines changed

9 files changed

+369
-43
lines changed

‎docs/01-快速开始/注册&登录.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ title: 注册&登录
5858

5959

6060
:::info 为什么会出现该问题？
61-
这是因为第三方账号登录特性导致的。因为我们无法从第三方账号获取您在 Memene 上的相关绑定信息，因此，如果您通过之前未绑定过 Memene 账号的第三方账号登录时，会认为您是新用户，因此会创建新的账号。
61+
这是第三方账号登录特性导致的。由于我们无法从第三方账号获取您在 Memene 上的相关绑定信息，因此，如果您通过之前未绑定过 Memene 账号的第三方账号登录时，会认为您是新用户，因此会创建新的账号。
6262

6363
为了您的使用体验，我们推荐**统一使用微信登录**。
6464
:::

‎docs/01-快速开始/浏览器插件.md‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,58 @@
22
slug: /getting-started/browser-extension
33
sidebar_position: 2 # 👈 想让谁排前面，就写 1；想让谁排后面，就写 2
44
title: 浏览器插件
5-
---
5+
---
6+
7+
import BrowserDownload from '@site/src/components/BrowserDownload'
8+
9+
# 浏览器插件
10+
11+
:::tip
12+
浏览器插件正处于小规模尝鲜阶段。欢迎使用后给我们反馈。
13+
:::
14+
15+
## 简介
16+
17+
<img src="/memene/help/img/WebExtension-Overview.png" alt="网页端登录页面" style={{maxWidth:'800px'}}></img>
18+
19+
Memene 是一款主打“推送、订阅、追踪” 为三大核心功能的行业信息管理工具。使用 Memene 插件，您可以快速追踪互联网上的信息源，每天接收到您订阅的 Meme 推送的内容。
20+
21+
**➤ 全网信源，一键追踪**
22+
23+
Memene 插件不需要复杂的 RSS 配置，也不用反复复制链接。当你浏览到任何有价值的页面——无论是推特上的行业领袖、微博上的热点观察，还是微信公众号的深度长文，Memene 插件能智能识别出对应的信息源，让您可以通过 Memene 快速追踪。
24+
25+
**即时订阅**： 点击插件，一键将当前页面的账号/博主纳入你的关注池。
26+
27+
**跨域聚合**： 打破平台壁垒，将 Twitter、微博、公众号等全网碎片化信源，统一收归至你的 Memene 指挥台。
28+
29+
**➤ 不仅仅是收藏，更是价值排序**
30+
31+
Memene 按照对不同行业的信息理解，为您每天排列出真正有价值的信息。
32+
33+
**智能查重**： 剔除全网重复报道，不仅节省时间，更降低认知噪音。
34+
35+
**权重重排**： 绝非简单的线性罗列。根据你的偏好模型，优先展示高权重信源的精华内容，确保你一眼看到最重要的“私人Meme”。
36+
37+
**➤ 每日推送，不打扰，不错过**
38+
39+
Memene 插件静默守候在你的浏览器右上角，每天为您推送您订阅的内容。
40+
41+
**每日速览**： 每天通过插件直接推送处理后的精华日报，无需打开繁琐的网页，在浏览器弹窗中即可快速阅览核心观点。
42+
43+
**无感连接**： 遇到感兴趣的深度内容，一键跳转 Memenews Web 端，享受沉浸式阅读与更多专家级分析功能。
44+
45+
46+
---
47+
需要帮助？
48+
- 官方网站 [https://memene.cn](https://memene.cn)
49+
- 隐私条款 [https://memene.cn/privacy](https://memene.cn/privacy)
50+
- 联系我们 [https://memene.cn/dd](https://memene.cn/dd)
51+
52+
## 下载安装
53+
54+
目前，Memene 浏览器插件已上架至 Chrome 、 Edge 与 FireFox 浏览器插件商店，您可以通过点击下方浏览器图标快速前往商店页面安装插件。
55+
56+
<BrowserDownload
57+
title="点击前往下载"
58+
/>
59+

‎package-lock.json‎

Lines changed: 28 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
"write-heading-ids": "docusaurus write-heading-ids"
1515
},
1616
"dependencies": {
17+
"@browser-logos/chrome": "^2.0.0",
18+
"@browser-logos/edge": "^2.0.7",
19+
"@browser-logos/firefox": "^3.0.10",
1720
"@docusaurus/core": "3.9.2",
1821
"@docusaurus/preset-classic": "3.9.2",
1922
"@easyops-cn/docusaurus-search-local": "^0.52.1",
@@ -22,7 +25,8 @@
2225
"medium-zoom": "^1.1.0",
2326
"prism-react-renderer": "^2.3.0",
2427
"react": "^19.0.0",
25-
"react-dom": "^19.0.0"
28+
"react-dom": "^19.0.0",
29+
"react-icons": "^5.5.0"
2630
},
2731
"devDependencies": {
2832
"@docusaurus/module-type-aliases": "3.9.2",

‎src/components/BrowserDownload/index.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React from "react"
2+
// @ts-expect-error CSS modules work at runtime
3+
import styles from "./styles.module.css"
4+
5+
/**
6+
* 官方浏览器 logo（来自 @browser-logos 包）
7+
* 使用 require 避免 TypeScript 类型检查问题
8+
*/
9+
// eslint-disable-next-line @typescript-eslint/no-require-imports
10+
const chromeLogo = require("@browser-logos/chrome/chrome_64x64.png").default as string
11+
// eslint-disable-next-line @typescript-eslint/no-require-imports
12+
const edgeLogo = require("@browser-logos/edge/edge_64x64.png").default as string
13+
// eslint-disable-next-line @typescript-eslint/no-require-imports
14+
const firefoxLogo = require("@browser-logos/firefox/firefox_64x64.png").default as string
15+
16+
type BrowserInfo = {
17+
name: string
18+
logo: string
19+
url: string
20+
color: string
21+
}
22+
23+
type BrowserDownloadProps = {
24+
/** Chrome 商店链接 */
25+
chromeUrl?: string
26+
/** Edge 商店链接 */
27+
edgeUrl?: string
28+
/** Firefox 商店链接 */
29+
firefoxUrl?: string
30+
/** 组件标题，默认 "获取浏览器扩展" */
31+
title?: string
32+
}
33+
34+
/**
35+
* 浏览器扩展下载组件
36+
* 显示 Chrome、Edge、Firefox 官方图标，点击跳转对应商店
37+
*
38+
* @example
39+
* ```mdx
40+
* import BrowserDownload from '@site/src/components/BrowserDownload'
41+
*
42+
* <BrowserDownload
43+
* chromeUrl="https://chrome.google.com/webstore/detail/xxx"
44+
* edgeUrl="https://microsoftedge.microsoft.com/addons/detail/xxx"
45+
* firefoxUrl="https://addons.mozilla.org/firefox/addon/xxx"
46+
* />
47+
* ```
48+
*/
49+
export default function BrowserDownload({
50+
chromeUrl = "https://chromewebstore.google.com/detail/memene/apdcijggejffogpbcjjlojibndebmobh",
51+
edgeUrl = "https://microsoftedge.microsoft.com/addons/detail/memene/bjaabfbbamanldjeaiboklknaakbokco?hl=zh-CN",
52+
firefoxUrl = "https://addons.mozilla.org/zh-CN/firefox/addon/memene/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search",
53+
title = "获取浏览器扩展",
54+
}: BrowserDownloadProps): React.ReactElement {
55+
const browsers: BrowserInfo[] = [
56+
{
57+
name: "Chrome",
58+
logo: chromeLogo,
59+
url: chromeUrl,
60+
color: "#4285F4",
61+
},
62+
{
63+
name: "Edge",
64+
logo: edgeLogo,
65+
url: edgeUrl,
66+
color: "#0078D4",
67+
},
68+
{
69+
name: "Firefox",
70+
logo: firefoxLogo,
71+
url: firefoxUrl,
72+
color: "#FF7139",
73+
},
74+
]
75+
76+
return (
77+
<div className={styles.container}>
78+
{title && <h4 className={styles.title}>{title}</h4>}
79+
<div className={styles.browserList}>
80+
{browsers.map((browser) => (
81+
<a
82+
key={browser.name}
83+
href={browser.url}
84+
target="_blank"
85+
rel="noopener noreferrer"
86+
className={styles.browserItem}
87+
style={{ "--browser-color": browser.color } as React.CSSProperties}
88+
title={`前往 ${browser.name} 商店下载`}
89+
>
90+
<div className={styles.iconWrapper}>
91+
<img
92+
src={browser.logo}
93+
alt={`${browser.name} logo`}
94+
className={`${styles.logo} no-zoom`}
95+
width={48}
96+
height={48}
97+
/>
98+
</div>
99+
<span className={styles.browserName}>{browser.name}</span>
100+
</a>
101+
))}
102+
</div>
103+
</div>
104+
)
105+
}
106+

‎src/components/BrowserDownload/styles.module.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/**
2+
* 浏览器下载组件样式
3+
*/
4+
5+
.container {
6+
display: flex;
7+
flex-direction: column;
8+
align-items: center;
9+
padding: 1.5rem;
10+
margin: 1.5rem 0;
11+
border: 2px solid var(--ifm-color-emphasis-200);
12+
border-radius: 12px;
13+
background: linear-gradient(
14+
135deg,
15+
var(--ifm-background-color) 0%,
16+
var(--ifm-color-emphasis-100) 100%
17+
);
18+
}
19+
20+
.title {
21+
margin: 0 0 1rem;
22+
font-size: 1rem;
23+
font-weight: 600;
24+
color: var(--ifm-color-emphasis-700);
25+
}
26+
27+
.browserList {
28+
display: flex;
29+
gap: 1.5rem;
30+
flex-wrap: wrap;
31+
justify-content: center;
32+
}
33+
34+
.browserItem {
35+
display: flex;
36+
flex-direction: column;
37+
align-items: center;
38+
gap: 0.5rem;
39+
padding: 1rem 1.25rem;
40+
border: 1px solid var(--ifm-color-emphasis-200);
41+
border-radius: 10px;
42+
background: var(--ifm-background-color);
43+
text-decoration: none;
44+
transition: all 0.25s ease;
45+
min-width: 90px;
46+
/* 取消链接默认颜色，让图标显示自己的颜色 */
47+
color: inherit;
48+
}
49+
50+
.browserItem:hover {
51+
transform: translateY(-4px);
52+
border-color: var(--browser-color);
53+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
54+
text-decoration: none;
55+
}
56+
57+
.browserItem:hover .iconWrapper {
58+
transform: scale(1.1);
59+
}
60+
61+
.browserItem:hover .browserName {
62+
color: var(--browser-color);
63+
}
64+
65+
/* 移除链接图标 */
66+
.browserItem::after {
67+
display: none !important;
68+
}
69+
70+
.iconWrapper {
71+
width: 48px;
72+
height: 48px;
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
transition: transform 0.25s ease;
77+
}
78+
79+
.logo {
80+
width: 48px;
81+
height: 48px;
82+
/* 禁用全局图片样式 */
83+
margin: 0 !important;
84+
border-radius: 0 !important;
85+
box-shadow: none !important;
86+
cursor: inherit !important;
87+
}
88+
89+
.logo:hover {
90+
transform: none !important;
91+
}
92+
93+
94+
.browserName {
95+
font-size: 0.875rem;
96+
font-weight: 500;
97+
color: var(--ifm-color-emphasis-700);
98+
transition: color 0.25s ease;
99+
}
100+
101+
/* 响应式调整 */
102+
@media (max-width: 480px) {
103+
.browserList {
104+
gap: 1rem;
105+
}
106+
107+
.browserItem {
108+
padding: 0.75rem 1rem;
109+
min-width: 80px;
110+
}
111+
112+
.iconWrapper {
113+
width: 40px;
114+
height: 40px;
115+
}
116+
117+
.browserName {
118+
font-size: 0.8rem;
119+
}
120+
}
121+

0 commit comments

Comments
 (0)