AOSSIE-Org / AOSSIE-Org/SocialShareButton
Enhancement: Add Hugo / Jekyll Integration — demo page section and CDN usage guide
- 主要语言
- TypeScript
- 星标
- 25
- 派生
- 64
- 平均合并
- 2 天 11 小时
- 30 天内合并 PR
- 1
描述
## 🎯 Direction
SocialShareButton is a **lightweight, zero-dependency, framework-agnostic** social sharing component. Hugo and Jekyll are the most widely used static site generators for open-source project sites, documentation, and blogs — exactly the type of pages where a social share button adds the most value. No wrapper file is needed; integration is entirely CDN-based and dropped into the site's base layout template.
📹 **See the button in action**: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM
---
## 📁 Files to Create / Modify
### ℹ️ No New Wrapper File Needed
Hugo and Jekyll generate static HTML — integration is done via CDN `` and `<link>` tags placed in the base layout template. No JavaScript framework wrapper is required.
---
### ✅ Existing File: `index.html` — Add Hugo / Jekyll Integration Section
Add a new section with:
- Section heading: `📄 Hugo / Jekyll Integration`
- Step 1: Add CDN links to the base layout template
- Step 2: Add the container element and initialization script to the layout or a shortcode/include
**Hugo** (`layouts/_default/baseof.html`):
```html
<!-- In <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css">
<!-- Before </body> -->
<script src="https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.js">
new SocialShareButton({
container: '#share-button',
url: window.location.href,
title: document.title,
description: '{{ .Description }}',
theme: 'dark',
buttonText: 'Share'
});
```
**Jekyll** (`_layouts/default.html`):
```html
new SocialShareButton({
container: '#share-button',
url: window.location.href,
title: document.title,
description: '{{ page.description }}',
theme: 'dark',
buttonText: 'Share'
});
```
---
## ✅ Acceptance Criteria
- [ ] No new wrapper file required — integration is HTML/CDN only
- [ ] `index.html` updated with a Hugo / Jekyll section containing separate code snippets for both generators
- [ ] Copy-to-clipboard button present on new code blocks in `index.html`
- [ ] README updated to list Hugo and Jekyll as supported integration patterns
---
> ⚠️ **Planned — Not Final**
> This issue represents a planned enhancement and is **not guaranteed to be implemented**. It may be dropped if it does not align with the repository's direction. **Before opening a pull request, please discuss with the maintainers in this issue thread.**
贡献指南
评估
这个 Issue 还没有评估数据。