Skip to content

Jisu-Woniu/giscus-blazor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

giscus-blazor

A Blazor component to embed giscus, a comments system powered by GitHub Discussions.

Supports both Blazor WebAssembly and Blazor Server.

Getting started

To start, install it from NuGet:

Nuget GiscusBlazor

dotnet add package GiscusBlazor

Then add either one of the following tag to your wwwroot/index.html (Blazor WebAssembly) or Pages/_Layout.cshtml (Blazor Server) as the last child of <head> element.

<!-- Use esm.sh, bundled module, recommended -->
<script type="module" src="https://cdn.esm.sh/giscus?bundle"></script>

<!-- or jsDelivr -->
<script type="module" src="https://cdn.jsdelivr.net/npm/giscus/+esm"></script>

<!-- or Skypack -->
<script type="module" src="https://cdn.skypack.dev/giscus"></script>

<!-- or unpkg -->
<script type="module" src="https://unpkg.com/giscus?module"></script>

You might need to fix the version when publish your website. For example:

<!-- Use esm.sh, bundled module, recommended -->
<script type="module" src="https://cdn.esm.sh/[email protected]?bundle"></script>

<!-- or jsDelivr -->
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/+esm"></script>

<!-- or Skypack, and get the pinned URL as in https://docs.skypack.dev/skypack-cdn/api-reference/pinned-urls-optimized -->
<script type="module"
        src="https://cdn.skypack.dev/pin/[email protected]/mode=imports,min/optimized/giscus.js"></script>

<!-- or unpkg -->
<script type="module" src="https://unpkg.com/[email protected]?module"></script>

You can also install giscus in your wwwroot folder with npm or other Node.js package manager, and include it like above.

Then add this component to your .razor files where you want the comments to appear like this:

<!-- At top of page -->
@using GiscusBlazor

<!-- At comment area -->
<Giscus Repo="[ENTER REPO HERE]"
        RepoId="[ENTER REPO ID HERE]"
        Category="[ENTER CATEGORY NAME HERE]"
        CategoryId="[ENTER CATEGORY ID HERE]"
        Mapping="Mapping.Specific"
        Term="[ENTER TERM HERE]"
        ReactionsEnabled="true"
        EmitMetadata="false"
        InputPosition="InputPosition.Bottom"
        Theme="light"
        Lang="en"
        Loading="Loading.Lazy" />

Or you can just add @using GiscusBlazor to _Imports.razor.

For most of the string-typed parameters, you can use the values from the giscus official site directly.

Samples

You can get some sample apps from the samples directory, in both Blazor WebAssembly and Blazor Server.

Changelog

v2.3.1

  • Drop .NET Core 3.1 support since it reached EOL.

v2.3.0

  • Add host support.
  • Rearrange some parameters.

v2.2.1