Skip to content

Commit

Permalink
更新主题
Browse files Browse the repository at this point in the history
  • Loading branch information
czy-29 committed Sep 11, 2024
1 parent 77e0d47 commit 75b583b
Show file tree
Hide file tree
Showing 10 changed files with 231 additions and 8 deletions.
19 changes: 19 additions & 0 deletions themes/github-style/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,25 @@ And it will show like this:
<p>block content</p>
</details>

## Support local search

add to `config.toml`

```toml
[params]
enableSearch = true

[outputs]
home = ["html", "json"]

[outputFormats.json]
mediaType = "application/json"
baseName = "index"
isPlainText = false
```

We can do local search now, it is implemented by `fuse.js`.

## deploy.sh example

There are various way to deploy to github, here is a link to official [document](https://gohugo.io/hosting-and-deployment/hosting-on-github/).
Expand Down
1 change: 1 addition & 0 deletions themes/github-style/config.template.toml
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ pygmentsUseClasses = true
location = "China"
userStatusEmoji = "😀"
enableGitalk = true
enableSearch = true

[params.gitalk]
clientID = "Your client ID" # Your client ID
Expand Down
1 change: 1 addition & 0 deletions themes/github-style/layouts/_default/baseof.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

<body>
{{ partial "header" . }}
{{ partial "search.html" .}}
{{ block "content" . }}{{ end }}
{{ partial "footer.html" . }}
</body>
Expand Down
67 changes: 67 additions & 0 deletions themes/github-style/layouts/_default/index.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
{{- /* Copy from https://github.com/HugoBlox/hugo-blox-builder/blob/main/modules/blox-bootstrap/layouts/index.json. */ -}}
{{- /* Generate the search index. */ -}}
{{- $index := slice -}}
{{- $pages := site.RegularPages -}}
{{- /* Add the index page of multi-page content separately since it's not in RegularPages above. */ -}}
{{- $pages := $pages | union (where (where site.Pages "Kind" "section") "Type" "book") -}}
{{- /* Add author pages to index so their bios can be searched. Hide empty `/authors/` node. */ -}}
{{- $pages := $pages | union (where (where site.Pages "Section" "authors") "Params.superuser" "!=" nil) -}}

{{- range $pages -}}
{{- /* Do not index drafts or private pages. */ -}}
{{- if and (not .Draft) (not .Params.private) | and (ne .Params.searchable false) -}}

{{- /* Generate page description. */ -}}
{{- $desc := "" -}}
{{- if .Params.summary -}}
{{- $desc = .Params.summary -}}
{{- else if .Params.abstract -}}
{{- $desc = .Params.abstract -}}
{{- else -}}
{{- $desc = .Summary -}}
{{- end -}}

{{- $authors := .Params.authors -}}
{{- $title := .Title}}
{{- $rel_permalink := .RelPermalink -}}
{{- $permalink := .Permalink -}}

{{/* Correct the title and URL for author profile pages. */}}
{{- if eq .Section "authors" -}}
{{- $username := path.Base .File.Dir -}}
{{- with site.GetPage (printf "/authors/%s" $username) -}}
{{- $permalink = .Permalink -}}
{{- $rel_permalink = .RelPermalink -}}
{{- end -}}
{{- else -}}
{{/* Include a user's display name rather than username where possible. */}}
{{- if .Params.authors -}}
{{- $authorLen := len .Params.authors -}}
{{- if gt $authorLen 0 -}}
{{- $authors = slice -}}
{{- range $k, $v := .Params.authors -}}
{{- $person_page_path := (printf "/authors/%s" (urlize $v)) -}}
{{- $person_page := site.GetPage $person_page_path -}}
{{- if and $person_page $person_page.File -}}
{{- $authors = $authors | append $person_page.Title -}}
{{- else -}}
{{- $authors = $authors | append ($v | plainify) -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- end -}}

{{- /* Add page to index. */ -}}
{{/* Exclude virtual pages which aren't backed by a file */}}
{{- if .File }}
{{/* exclude "content/readme.md". */}}
{{ $hidden_file := "/readme/" }}
{{ if ne $hidden_file $rel_permalink }}
{{- $index = $index | append (dict "objectID" .File.UniqueID "date" .Date.UTC.Unix "publishdate" .PublishDate "lastmod" .Lastmod.UTC.Unix "expirydate" .ExpiryDate.UTC.Unix "lang" .Lang "permalink" $permalink "relpermalink" $rel_permalink "title" $title "summary" (plainify $desc | htmlUnescape) "content" (.Plain | htmlUnescape | truncate 5000) "authors" $authors "kind" .Kind "type" .Type "section" .Section "tags" .Params.Tags "categories" .Params.Categories) -}}
{{ end }}
{{ end -}}
{{- end -}}
{{- end -}}

{{- $index | jsonify -}}
8 changes: 3 additions & 5 deletions themes/github-style/layouts/_default/list.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
{{ define "content" }}
<div class="application-main">
<main>
{{ partial "user-profile.html" . }}

{{ partial "posts.html" .}}
{{ partial "user-profile.html" . }}
{{ partial "posts.html" .}}
</div>
{{end }}
{{ end }}
8 changes: 5 additions & 3 deletions themes/github-style/layouts/_default/single.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{{ define "content" }}
{{ partial "post.html" .}}
{{ partial "gitalk.html" . }}
{{end }}
<div class="application-main">
{{ partial "post.html" .}}
{{ partial "gitalk.html" . }}
</div>
{{ end }}
12 changes: 12 additions & 0 deletions themes/github-style/layouts/partials/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,17 @@
<div
class="Header-search header-search flex-auto js-site-search position-relative flex-self-stretch flex-md-self-auto mb-3 mb-md-0 mr-0 mr-md-3 scoped-search site-scoped-search js-jump-to">
<div class="position-relative">
{{ if .Site.Params.enableSearch }}
<form target="_blank" id="search-form" action="" accept-charset="UTF-8" method="get"
autocomplete="off">
<label
class="Header-search-label form-control input-sm header-search-wrapper p-0 js-chromeless-input-container header-search-wrapper-jump-to position-relative d-flex flex-justify-between flex-items-center">
<input type="text"
class="Header-search-input form-control input-sm header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable"
name="q" value="" placeholder="Search" autocomplete="off">
</label>
</form>
{{ else }}
<form target="_blank" action="https://www.google.com/search" accept-charset="UTF-8" method="get"
autocomplete="off">
<label
Expand All @@ -29,6 +40,7 @@
<input type="hidden" name="q" value="site:{{ .Site.BaseURL }}">
</label>
</form>
{{ end }}
</div>
</div>
</div>
Expand Down
5 changes: 5 additions & 0 deletions themes/github-style/layouts/partials/script.html
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,8 @@
}
</style>
{{ end }}

{{ if .Site.Params.enableSearch }}
<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.min.js"></script>
<script type="application/javascript" src='{{ "js/search.js" | absURL }}'></script>
{{ end }}
2 changes: 2 additions & 0 deletions themes/github-style/layouts/partials/search.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<div id="search-result" class="container-lg px-3 new-discussion-timeline" style="display: none;">
</div>
116 changes: 116 additions & 0 deletions themes/github-style/static/js/search.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
(() => {
fetch('/index.json')
.then(response => response.json())
.then(data => {
const fuse = new Fuse(data, {
keys: ['title', 'content'],
shouldSort: true,
includeMatches: true,
minMatchCharLength: 2,
threshold: 0.0,
ignoreLocation: true,
})

document.getElementById('search-form').addEventListener('submit', function (e) {
e.preventDefault();
const data = new FormData(e.target)
// data.entries() returns iterator, [...data.entries()] returns [["q", "input"]]
const input = [...data.entries()][0][1]
const results = fuse.search(input)
displayResults(input, results)
});
});
})();

function displayResults(input, results) {
const searchResults = document.getElementById('search-result');
searchResults.setAttribute('style', 'display: block;')
searchResults.nextElementSibling.setAttribute('style', 'display: none;')
let html = renderResultsCountHtml(results.length, input)
if (results.length > 0) {
let li = renderResultsItemHtml(results)
html += `<ul>${li}</ul>`
}
searchResults.innerHTML = html
}

function renderResultsCountHtml(count, input) {
let html = `
<div class="TableObject border-gray-light py-3 mt-6">
<div class="user-repo-search-results-summary TableObject-item TableObject-item--primary v-align-top">
<strong>${count}</strong>
results
for "<strong>${input}</strong>"
</div>
</div>
`
return html
}

function renderResultsItemHtml(results) {
// modified from https://github.com/brunocechet/Fuse.js-with-highlight
var highlighter = function(resultItem){
resultItem.matches.forEach((matchItem) => {
var text = resultItem.item[matchItem.key];
var result = []
var matches = [].concat(matchItem.indices);
var pair = matches.shift()

for (var i = 0; i < text.length; i++) {
var char = text.charAt(i)
if (pair && i == pair[0]) {
result.push('<span style="color: red;">')
}
result.push(char)
if (pair && i == pair[1]) {
result.push('</span>')
pair = matches.shift()
}
}
resultItem.highlight = result.join('');

if(resultItem.children && resultItem.children.length > 0){
resultItem.children.forEach((child) => {
highlighter(child);
});
}
});
};

let html = ``
results.forEach(result => {
highlighter(result)
// truncated highlight content
let truncated = result.highlight.substring(0, 2000)
const reg = /(<span style="color: red;">[a-zA-Z0-9\u4e00-\u9fa5]+<\/span>)/g
let array = truncated.split(reg)
// drop unstable part
array.pop()
let content = ""
if (array.length > 0) {
content = array.join('')
} else {
// fallback to no highlighted truncated content
content = result.item.content.substring(0, 2000)
}
html += `
<li class="col-12 d-flex width-full py-4 border-top color-border-secondary public source">
<div class="col-12 d-inline-block">
<div class="d-inline-block mb-1">
<h3 class="wb-break-all">
<a href="${result.item.permalink}">${result.item.title}</a>
</h3>
</div>
<div>
<div class="col-12 d-inline-block text-gray mb-2 pr-4">
${content} ...
</div>
</div>
</div>
</li>
`
})
return html
}

0 comments on commit 75b583b

Please sign in to comment.