Coder Social home page Coder Social logo

shenweiyan / webstack-hugo Goto Github PK

View Code? Open in Web Editor NEW
809.0 10.0 238.0 19.33 MB

WebStack 网址导航 Hugo 主题,无需服务器,支持导航一键配置的纯静态网址导航网站。

Home Page: https://bioit.top

License: MIT License

HTML 5.91% CSS 22.77% Less 19.34% SCSS 21.28% Go 30.70%
webstack hugo navigation

webstack-hugo's People

Contributors

jetsung avatar shenweiyan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webstack-hugo's Issues

[BUG] 左侧侧边栏菜单显示不全

image
image
菜单展开后会有一部分被遮挡,好像菜单并不支持滚动。
图1:最后一个主菜单展开后下面的分项目显示不全
图2:展开其他主菜单后会遮挡下面的主菜单
缩小浏览器窗口高度后遮挡更严重。
希望菜单支持一下滚动。

增加公告模块

image

如图,希望可以增加一个公告模块,类似所长导航的这样

[功能请求]网址导航分页显示

如题。

当网站收录的网址较多时,会造成HTML过长,不利于搜索引擎seo优化。同时,也会拖慢加载速度,影响访客体验。

目前想到的办法有两种:

  1. 按照链接数量裁断(需要额外判定一下,当前类别显示完,防止拦腰斩断),达到分页显示的目的。
  2. 每个类别新增一个分页,在网址导航首页随机显示8个该类别的链接,并且在每个类别新增一个 查看更多 按钮(我看源码里面好像有个more+注释掉了,不知道有没有类似的功能)。

个人倾向于第二种,不知道这个功能好不好实现?大佬有没有类似的想法?
(我就是瞎提点建议,具体怎么写全靠大佬安排)

mac部署跟linux一样吧?

# 创建项目
mkdir navsites
cd $_

# 初始化项目
git init

# 将 WebStack-Hugo 源下载到 themes/WebStack-Hugo 文件夹
git submodule add https://github.com/shenweiyan/WebStack-Hugo.git themes/WebStack-Hugo
cp -r themes/WebStack-Hugo/exampleSite/* ./

# 安装 hugo
go install github.com/gohugoio/hugo@latest

# 本地测试
hugo server

# 生成 docs 文件夹,将并静态内容生成至此处
hugo -D

hugo server 预览都正常, hugo -D 发现public文件夹生成了,但是里面空的
试过 hugo hugo -D hugo -minify

有解吗?

一些疑问

1.在config设置默认展开导航栏后,导航栏动画在桌面端会失效。2.我该如何设置一行内最多可显示多少链接

链接的图标该放在哪个文件?如何渲染加载的?

你好,我更新了一些链接,也上传了图标,没有加载出图标,我想修改一下,但是我对go,hugo都不甚了解。
图标是放置在根目录的 assets/images 还是 static/images,还是 theme/webstack-hugo/assets/iamges
我每一个都复制了一轮,因为放在 assets 下的全都没通过 action 部署到 gh-pages 分支,后来我新建了 static/images 后就在 gh-pages 分支有文件更新了,但是网站内并没有刷新图标,我尝试清理缓存刷新也没响应,都是显示的 default.png ,不知是如何识别并渲染的?
但我旧的网页图标(没创建 static 之前,都是塞在 assets 里的)都是可以识别加载出来的。这是否和 action 或者文件路径有关系?

强烈推荐建议适配chrome书签json结构,方便一键导出生成

如题,强烈建议大佬能否适配一下chrome书签的结构,因为日常都是用chrome收藏,更改。如果可以适配一下,我觉得效率简直不要太高,门槛又低。
现有我发现的有2款插件:
一个是Export History/Bookmarks to JSON/CSV*/XLS*https://chrome.google.com/webstore/detail/export-historybookmarks-t/dcoegfodcnjofhjfbhegcgjgapeichlf
一个是json-bookmarkshttps://github.com/1nfiniteloop/json-bookmarks
。另外大佬要是能支持子分类就更完美了。看了下好像手机上没做自适应

请问底下的background哪里修改?

我部署在vercel上的,请问这个底下这个background在哪里调整?没找到对应的代码,赶紧方格看的眼镜花了。。。。还有网站内的侧边栏icon是哪个资源库的,也没有找到对应的地方,被迫挂了bootstrap的图标库,不知道会不会冲突。

关于页面样式和路径的问题

关于路径的问题:

  1. 如果你的baseURL = "https://example.com/WebStack"(多了一个子目录WebStack ),本地预览时需要在浏览器中打开 http://127.0.0.1:1313/WebStack 进行预览;image

  2. 如果你的baseURL = "https://example.com/(不带子目录),本地预览在浏览器中打开 http://127.0.0.1:1313 即可。
    image


关于样式不显示的问题,可以通过下面的方法检查一下:

  1. 检查一下 hugo 的版本,建议使用 https://github.com/gohugoio/hugo/releases/v0.89.4/ 的版本;有用户反馈太高的 hugo 版本也可能会造成样式不显示。

  2. 如果hugo server正常,但hugo -D生成的public/index.html生成的静态文件直接在浏览器打开出现样式不显示:

    • 正常hugo -D生成的public静态文件需要上传到 github pages/Cloudflare Pages,通过 url 才能正常显示,本地是无法直接查看。

    • 如果想要实现本地直接查看,可以在config.toml文件的顶部添加一个relativeURLs = true的选项,hugo -D重新生成一下public静态文件即可。 image

无法生成静态文件目录./public

我使用hugo命令无法生成静态文件目录,这样我就无法使用静态文件托管,我使用的是0.104.3拓展版本的hugo搭建的,请问是出自的哪里的问题

代码结构调整

你好,我试了下搭建,在一个 hugo 工程中,步骤是:

  1. 初始化 hugo 工程
  2. 把 exampleSite 里的内容放在工程根目录
  3. 把整个 WebStack-Hugo 放在工程的 themes 目录

第一次搭建这个目录移动让我有点懵,不能开箱即用。

我在想是不是直接就弄成一个可以直接使用的结构即可,不用再去移动目录,然后:

  1. 把原有的 webstack.yml 命名成 webstack.template.yml,这样不影响使用者用 webstack.yml。
  2. 把这个仓库设置为一个 Github 模板仓库。

这样只要装好 hugo 就能开箱即用了。

关于适配子文件夹

您好,关于适配子文件夹,改我倒是会改,我研究了一下发现除了配置文件以外,只需要再改以下两个文件就能适配
WebStack-Hugo\layouts\partials\footer.html
WebStack-Hugo\layouts\partials\header.html
我只是提个建议,打扰了。

发现无法新增链接,不知道是什么问题。

复现:在webstack.yml上,新增链接保存之后,重启docker。首页就会出现502状态。删除新增的链接就不会

不知道这是什么问题。

还是说必须按照原webstack.yml原有的链接数量才行。

方向键选择热词有BUG

使用方向键选择热词时只能选择第一个,其它选项会全部消失,并且选择第一个热词后前缀会出现1

页面内搜索功能,供参考

Hi,我是 Kimi,很高兴遇见你!
应用商店搜索 “Kimi 智能助手”
随时和 Kimi 聊天!

编写一张网页源代码,实现页面内搜索功能。有一个文本框,文本框右侧有一个搜索按钮,在文本框输入关键词后按下回车键或者点击搜索按钮,即可实现页面内搜索并高亮显示关键词。
创建一个简单的网页,实现页面内搜索并高亮显示关键词的功能,可以通过HTML、CSS和JavaScript来完成。以下是一个基本的示例代码:

<title>页面内搜索</title> <style> .highlight { background-color: yellow; } </style>

页面内搜索示例

搜索
这是一个示例文本,您可以在这段文本中搜索关键词。搜索功能将高亮显示所有匹配的关键词。
<script> let currentSearchTerm = null; function search() { const searchTerm = document.getElementById('searchBox').value; if (searchTerm === currentSearchTerm) return; // 如果搜索词没有变化,不执行搜索 currentSearchTerm = searchTerm; const contentDiv = document.getElementById('content'); const content = contentDiv.innerHTML; const regex = new RegExp(searchTerm, 'gi'); // 创建一个全局忽略大小写的正则表达式 // 如果搜索词不为空,则高亮显示匹配的关键词 if (searchTerm) { contentDiv.innerHTML = content.replace(regex, `$&`); } else { contentDiv.innerHTML = content; // 如果搜索词为空,恢复原始内容 } } // 监听回车键 document.getElementById('searchBox').addEventListener('keyup', function(event) { if (event.key === 'Enter') { search(); } }); </script>

这个示例中:

HTML部分定义了一个输入框和一个搜索按钮。
CSS部分定义了一个.highlight类,用于高亮显示搜索关键词。
JavaScript部分定义了一个search函数,当用户输入关键词并点击搜索按钮或按下回车键时,该函数会被调用。
该函数使用正则表达式来查找输入的关键词,并将其包装在标签中,同时应用.highlight类以高亮显示。
还添加了一个事件监听器,以便在用户按下回车键时也能触发搜索功能。
请将上述代码保存为.html文件,并在浏览器中打开以查看效果。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.