searchinghost easy下载 - searchinghost easy源码下载

搜鬼易

Ghost CMS 的零代码和易于设置的搜索栏（博客）。

描述

SearchinGhostEasy 是原始 SearchinGhost 库的包装器，使任何“非开发人员”Ghost 用户都可以访问它。

因为我们并不是天生就有设计技能，所以我们已经为您制作了几个搜索栏模板。它们均采用响应式设计，因此可以完美适应从手机到 4K 电视的任何屏幕尺寸。

最后，通过将所有内容放在 HTML iframe 中，我们获得了超级丰富且流畅的用户体验！

哦！我忘了说最重要的事情：它适用于所有 Ghost 主题！（卡斯帕、大规模、努比亚、...）

安装

要将搜索栏安装到您的 Ghost 博客，请按照以下快速步骤操作：

1. 创建“自定义集成”

在左侧面板上，转到“集成”部分，单击“+ 添加自定义集成”并将其命名为“SearchinGhostEasy”。 Ghost 已生成您自己的唯一“内容 API 密钥”（它应类似于ba094afe723d802f235af61d51 ）。将其保存在某处，下一步将需要它。如果您需要更多帮助，请访问官方 Ghost 自定义集成页面。

安装步骤1

2. 将脚本添加到您的站点

从“代码注入”部分，将以下代码块复制/粘贴到“站点页脚”区域。
不要忘记将<CONTENT_API_KEY>占位符替换为您自己的 API 密钥。点击“保存”。

 < script src =" https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-basic.js " > </ script >
< script >
    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

注意：如果您想修改自定义主题，请将其粘贴到其他脚本旁边的default.hbs中，它将以完全相同的方式工作。

安装步骤2

3a. [选项] 设置菜单搜索“单词”

最后，在菜单中添加一个打开搜索框的链接。为此，请转到“设计”部分并添加一个新项目。它可以在“导航”或“辅助导航”中。您可以使用任何标签命名它（“搜索”感觉很自然），但链接必须以#searchinghost-easy结尾。点击“保存”。

安装步骤3

3b. [选项] 设置菜单搜索“图标”

如果您更喜欢使用搜索图标而不是单词，请跳至此部分。

？就是这样，一切都设置好了！在您的博客上，菜单栏中应显示“搜索”按钮。单击它即可看到奇迹发生！如果您不喜欢默认搜索栏的外观，请查看下一个模板部分来更改它？

另外，不要忘记检查问题与解答部分以获取所有有用的提示和配置部分以进行更高级的设置。

模板

SearchinGhostEasy 有多种图形风格。默认提供的模板称为“基本”，但您可以轻松切换到任何其他模板。

为此，请参阅每个模板描述并将关联的代码示例复制/粘贴到您的博客Code Injection > Site Footer部分。基本上，只有脚本名称的最后一部分发生变化（例如“searchinghost-easy-basic.js”，“searchinghost-easy-backpack.js”，...）。

希望更多的搜索栏模板即将到来！如果您想通过为该项目做出贡献来分享您的设计之一，请随时与我联系或创建问题/PR。

✏️ 基本模板

截屏

基本模板截图

演示

现场演示：https://gmfmi.github.io/searchinghost-easy/basic/

安装

 < script src =" https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-basic.js " > </ script >
< script >
    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

✏️背包模板

截屏

背包模板截图

演示

现场演示：https://gmfmi.github.io/searchinghost-easy/backpack/

安装

 < script src =" https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-backpack.js " > </ script >
< script >
    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

配置

此部分是为更高级的用户保留的。默认情况下，配置参数是经过仔细选择的，因此不需要额外的配置。

如果您需要对 SearchinGhostEasy 进行更多控制，以下是可用的配置选项：

 new SearchinGhostEasy ( {
    contentApiKey : '<CONTENT_API_KEY>' , // mandatory
    apiUrl : 'http://example.com' ,
    searchinghostOptions : { } ,
    searchinghostVersion : '1.0.0' ,
    zIndex : 200 ,
    placeholder : "Search" ,
    debug : false
} ) ;

contentApiKey （字符串，必填）

内容 API 密钥。该值是强制性的，可以在自定义集成详细信息中找到。
示例： '06a02026a9f2dcf69f7e065d7c'

apiUrl （字符串）

设置与博客域名不同的API url。可用于测试目的。该选项对应于 SearchinGhost 库中的url 。
示例： 'http://example.com'

搜索主机选项（对象）

覆盖 SearchinGhost 默认配置。此配置将与 SearchinGhostEasy 本身提供的配置以及所选的搜索模板合并。
要查看所有可用选项，请参阅 SearchinGhost 文档。
例子：
 {
    searchOn : 'submit' ,
    limit : 5 ,
    cacheMaxAge : 3600 ,
}

搜索主机版本（字符串）

设置要使用的 SearchinGhost 版本。如果新版本刚刚发布，可能会很有用。
示例： '1.3.0'

zIndex （数字）

将 HTML iframe 元素z-index设置为特定值。
默认： 2147483647

占位符（字符串）

将默认的“搜索”搜索栏占位符更改为您的。对于非英语网站特别有帮助。
可以使用任何浏览器兼容的（例如UTF-8）字符。以下是一些工作示例：
 placeholder: "Rechercher..."      # in french with dots
placeholder: "Αναζήτηση"          # in greek
placeholder: "With emojis! ?"   # use with caution
默认： "Search"

调试（布尔值）

将其设置为true以启用调试模式。这将输出最终使用的 SearchinGhost 配置，并启用 SearchinGhost 的调试。
默认值： false

问答

我会得到更新和改进吗？

是的，当 SearchinGhostEasy 有新版本可用时，您将自动获取它。

如果您不希望出现此行为，请将@latest替换为 URL 中的特定版本。例如，对于basic模板，请使用： https://cdn.jsdelivr.net/gh/gmfmi/[email protected]/dist/searchinghost-easy-basic.js ://cdn.jsdelivr.net/gh/gmfmi/[email protected]/dist/searchinghost-easy-basic.js（将1.0.0替换为所需版本）。

我可以使用搜索图标代替单词吗？

是的，您可以通过使用脚本或更新主题来完成此操作（有关主题选项，请参阅下面的主题）。

对于脚本选项，只需在 SearchinGhostEasy 初始化部分之前复制/粘贴以下示例的前 3 行。

请注意，此代码示例设计用于默认的“Casper”Ghost 主题。您可能需要进行一些调整才能使其在您自己的网站上运行（即查询选择器和创建的内部 javascript 元素）。

 < script >
    var searchIcon = '<svg style="fill:#fff" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786 c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792z M202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667 S302.646,384,202.667,384z"/></svg>'
    var menu = document . querySelector ( 'ul.nav' ) ;
    menu . insertAdjacentHTML ( 'beforeend' , `<li class="nav-search"><a href="#searchinghost-easy"> ${ searchIcon } </a></li>` ) ;
    
    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

否则，如果您希望将图标添加到二级菜单（社交链接旁边），请使用该图标：

 < script >
    var searchIcon = '<svg style="fill:#fff" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786 c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792z M202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667 S302.646,384,202.667,384z"/></svg>'
    var menu = document . querySelector ( '.social-links' ) ;
    menu . insertAdjacentHTML ( 'beforeend' , `<a class="social-link" href="#searchinghost-easy"> ${ searchIcon } </a>` ) ;

    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

在这两种情况下，如果您需要修改图标颜色以更好地匹配 Ghost 主题，请使用适当的值更新fill属性。例如： style="fill:#fc03ec"变为粉红色。

我可以在自定义主题中使用它吗？

是的，要自定义您的主题，请按照此 Ghost 指南根据需要修改菜单。

然后，使 SearchinGhostEasy 工作的唯一要求是使用#searchinghost-easy作为链接的href中的值。

例如，您的partials/navigation.hbs文件可能是：

 < ul class =" nav " role =" menu " >
    {{#foreach navigation}}
    < li class =" {{link_class for=(url) class=(concat " nav- " slug)}}" role=" menuitem " > < a href =" {{url absolute= " true "}}" > {{label}} </ a > </ li >
    {{/foreach}}
    < li class =" search-icon " role =" menuitem " > < a href =" #searchinghost-easy " > {{ > "icons/search"}} </ a > </ li >
</ ul >

其中partials/icons/search.hbs包含：

 < svg xmlns =" http://www.w3.org/2000/svg " xmlns:xlink =" http://www.w3.org/1999/xlink " viewBox =" 0 0 512 512 " > < path d =" M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786 c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792z M202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667 S302.646,384,202.667,384z "/> </ svg >

我可以在菜单以外的任何地方使用链接吗？

当然，任何指向#searchinghost-easy链接都会打开搜索框弹出窗口。您可以在同一页面上创建一个或多个链接，例如在 Ghost 帖子中或直接在主题.hbs文件中。

撰写文章时，您可以这样简单地创建链接：

安装步骤3

在 HTML 中，SearchinGhostEasy 链接无非是：

 < a href =" #searchinghost-easy " > click to search </ a >

制作人员

感谢 ACERLR8，他们的搜索栏启发了“Basic”模板
Back to Pack，“背包”模板的原始来源

展开

searchinghost easy

搜鬼易

描述

安装

1. 创建“自定义集成”

2. 将脚本添加到您的站点

3a. [选项] 设置菜单搜索“单词”

3b. [选项] 设置菜单搜索“图标”

模板

✏️ 基本模板

截屏

演示

安装

✏️背包模板

截屏

演示

安装

配置

问答

我会得到更新和改进吗？

我可以使用搜索图标代替单词吗？

我可以在自定义主题中使用它吗？

我可以在菜单以外的任何地方使用链接吗？

制作人员

easy steamcmd

easy digital downloads

gp|简易CMS

Easy网管

简单的思考

简易内容管理系统

chat.petals.dev

GPT Prompt Templates

GPTyped

waymo open dataset

SmartTube

Sunamu

waymo open dataset

wp functions

termwind