diff options
Diffstat (limited to 'themes/itheme/assets/js')
| -rw-r--r-- | themes/itheme/assets/js/algolia.js | 78 | ||||
| -rw-r--r-- | themes/itheme/assets/js/initPost.js | 134 |
2 files changed, 212 insertions, 0 deletions
diff --git a/themes/itheme/assets/js/algolia.js b/themes/itheme/assets/js/algolia.js new file mode 100644 index 0000000..47e65d4 --- /dev/null +++ b/themes/itheme/assets/js/algolia.js @@ -0,0 +1,78 @@ +import { params, baseURL } from "@params" + +const {appid, appkey, searchindex: indexName, enabled} = params.algolia + +const searchClient = algoliasearch(appid, appkey); +const { autocomplete, getAlgoliaResults } = window['@algolia/autocomplete-js']; + +function initAlgolia(){ + autocomplete({ + container: '#autocomplete', + getSources({ query }) { + return [ + { + sourceId: 'products', + getItems() { + return getAlgoliaResults({ + searchClient, + queries: [ + { + indexName, + query, + params: { + attributesToSnippet: ['name:10', 'description:35'], + }, + }, + ], + }); + }, + templates: { + item({ item, components, html }) { + return html`<a class="aa-ItemWrapper" href="${baseURL}${item.uri}"> + <div class="aa-ItemContent"> + <div class="aa-ItemContentBody"> + <div class="aa-ItemContentTitle"> + ${components.Highlight({ + hit: item, + attribute: 'name', + })} + </div> + <div class="aa-ItemContentDescription"> + ${components.Snippet({ + hit: item, + attribute: 'description', + })} + </div> + </div> + <div class="aa-ItemActions"> + <button + class="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly" + type="button" + title="Select" + > + <svg + viewBox="0 0 24 24" + width="20" + height="20" + fill="currentColor" + > + <path + d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z" + /> + </svg> + </button> + </div> + </div> + </a>`; + }, + } + }, + ]; + }, + }) + document.querySelector("#autocomplete input").focus() +} + +if(enabled){ + initAlgolia() +} diff --git a/themes/itheme/assets/js/initPost.js b/themes/itheme/assets/js/initPost.js new file mode 100644 index 0000000..db04238 --- /dev/null +++ b/themes/itheme/assets/js/initPost.js @@ -0,0 +1,134 @@ +import params from "@params" +// console.log("postInit.js loaded"); +var scriptMd5 = document.createElement("script"); +scriptMd5.src = `${params.baseURL}js/md5.js`; +document.head.appendChild(scriptMd5); + +scriptMd5.onload = function () { + // console.log("md5.js loaded") + // step1. sythx highlighting + syntaxHighlight(); + // step2. lazyload + initLazyLoad(); +} + +function initLazyLoad() { + var script = document.createElement("script"); + script.src = `${params.baseURL}js/animation.js`; + document.head.appendChild(script); + + script.onload = function () { + // console.log("lazyload.js loaded"); + + animationElementName = ".image-load"; + + // Hook the loadImage function + loadImage = (index) => { + if (index >= imageElements.length) return; + + let image = imageElements[index]; + image.src = image.dataset.src; + let img = new Image(); + img.src = image.src; + + // if the image is loaded or not loaded, load the next image + img.onload = function () { + loadImage(index + 1); + }; + img.onerror = function () { + loadImage(index + 1); + } + } + + loadAnimation = (item) => { + if(item.classList.contains("image-loaded")) return; + let grandSon = item.children[0].children[0]; + let img = new Image(); + img.src = grandSon.src; + let sign = md5(grandSon.src); + + let target = document.getElementById(`lht${sign}`) + if (!target) { + // If an absolute path is used as the image link, such as "/static/img.png", + // the URL of grandSon.src will become "https://example.com/static/img.png", resulting in a different md5. + // Therefore, we attempt to handle this situation by trying again with the absolute path. + const a = document.createElement('a'); + a.href = grandSon.src; + sign = md5(a.pathname); + } + + img.onload = function () { + let percent = ((img.height / img.width) * 100).toFixed(5); + var style = document.createElement("style"); + style.innerHTML = renderStyle(sign, percent); + let target = document.getElementById(`lht${sign}`) + + if (!target) return; + + target.parentNode.insertBefore(style, target); + item.classList.remove("image-load"); + item.classList.add("image-loaded"); + } + + } + + initImage(); + }; +} + + +function renderStyle(sign, percent) { + return ` + .image-${sign} { + width: 100%; + padding-top: ${percent}%; + height: auto; + } + + @media only screen and (max-width: 1068px) { + .image-${sign} { + width: 100%; + padding-top: ${percent}%; + height: auto; + } + } + + @media only screen and (max-width: 734px) { + .image-${sign} { + width: 100%; + padding-top: ${percent}%; + height: auto; + } + };` +} + +function syntaxHighlight() { + var script = document.createElement("script"); + script.src = "//cdn.staticfile.org/highlight.js/11.7.0/highlight.min.js"; + document.head.appendChild(script); + + var styleLight = document.createElement("link"); + styleLight.rel = "stylesheet"; + styleLight.href = "//cdn.staticfile.org/highlight.js/11.7.0/styles/stackoverflow-light.min.css"; + + var styleDark = document.createElement("link"); + styleDark.rel = "stylesheet"; + styleDark.href = "//cdn.staticfile.org/highlight.js/11.7.0/styles/stackoverflow-dark.min.css"; + + if (document.querySelector("body").classList.contains("theme-dark")) { + document.head.appendChild(styleDark); + } else { + document.head.appendChild(styleLight); + } + + script.onload = function () { + // console.log("hljs.js loaded"); + // 忽略未转义的HTML警告，自己的md文档默认可信 + hljs.configure({ + ignoreUnescapedHTML: true + }); + document.querySelectorAll('pre code').forEach((el) => { + hljs.highlightElement(el); + }); + }; +} |