许多前端开发人员都在用 Normalize 为他们的网站设计样式。...一些人喜欢在 Normalize.css 中添加一些自己偏好的样式，我也一样。 在本文中，我会与你分享我自己的 CSS reset 项（除了 Normalize.css 之外我还使用它们）。...但是我更喜欢通过自己编码设置所有边距和填充。...当我需要 disc 样式时，会在特定的 上手动设置它。...这个链接是我在 Github 的 CSS Resets 仓库（https://github.com/zellwk/css-reset）。
前言 Jekyll 是一款采用 Ruby 语言编写的、非常方便简单又功能强大的静态站点生成器，适合于搭建个人博客、静态网站等。...实现 代码高亮 Jekyll 代码高亮可以使用 Pygments、Rouge、Prism、Highlight JS等工具实现，据说大部分的高亮博客中基本上都是使用 Pygments。...: pygments 之后不要忘记要引入 Pygments 的 CSS 样式，可以直接访问以下地址下载： https://pygments.org/_static/pygments.css 不过也是可以引入其他主题的...CSS 样式的。...参考资料 让 Jekyll 支持 LaTex 数学公式（MathJax v3） Jekyll 实现文章阅读耗时与字数统计 Jekyll 中如何做中文字数统计 版权声明：如无特别声明，本文版权归 仲儿的自留地
以后的操作都在你自己的仓库进行。 ? 版权声明：fork之后_posts文件夹内容是我的博客文章，版权归我所有。你可以选择删除里面的文章替换上自己的或者转载附上链接注明出处。...配置提交 对_config.ymld的修改需要提交才能生效，点下图中绿色按钮提交。 ? done! 现在输入上面提到的博客地址，回车，你拥有了自己的博客。 如何写博客 好了，博客有了。...本地博客预览 到目前为止，我们提交的文章都是必须上传到github仓库才能预览。如果你想写完在本地浏览器看一下效果在上传也是可以的，因为不是所有人都有这样的需求。...预览博客 jekyll server 输入之后打开浏览器，不出意外输入localhost:4000即可看到博客内容。 ? 如果你没这么顺利，那以下的错误解决供参考 常见错误 缺少某个包 ?...搜索框样式 搜索框的样式是可以改变的，这里有修改HTML中CSS样式的方法，我搞后端的，前端现学现卖。
CSS3 是 CSS 的最新标准。它用于控制网页样式和布局。后续如果你想更好地理解使用的主题和进行主题自定义，也需要这方面的知识。 Markdown。...比如你正在阅读的这篇博客就是用 Markdown 编写的。（原理上是 GitHub Pages 使用 Jekyll 将 Markdown 文件转换为HTML文件。...三、如何访问？ 库名即为访问域名，在本教程中，即为 hummerstudio.github.io 当你打开这个链接时，显示的可能不是上面的代码对应的内容。因为我不能拿这个当作真正的主页嘛！...-- 唐明 七、按需自定义样式 我对一些主题默认样式和布局不满意的地方，做了修改。...在仓库根目录创建 assets/css/style.scss 文件，将修改的样式放入其中： --- --- @import "jekyll-theme-merlot"; /* 减小标题大小 */ header
这种方法的好处是不需要修改什么复杂的模板或者添加什么样式，Github Pages 也默认支持这种方式。...: ["jekyll-toc"] # 默认为所有文章启用 toc defaults: - scope: path: "" values: toc: true 第三种方案...布局 从目标一来看，其实在大部分的静态博客主题中都是有这样的功能的（PS：可能 Jekyll 是个例外，原生只支持静态目录）。...自适应 为了实现目标二，这里采用了最简单的 CSS 媒体查询，即在平常 PC 端宽屏时采用如下 common.sass 中的样式。...仲儿的自留地 所有，转载请注明本文链接。
Markdown（或 Textile）、Liquid 和 HTML & CSS 构建可发布的静态网站。 博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...在整个过程中你可以设置 URL 路径，你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。...你可以选择自己开发一套，也可以直接选择已有的，然后自己再更改css布局形成自己的。jekyll主题在这里，你可以选择到你自己喜欢的主题。...下载下来，改改css，或者借用一下，就会有很漂亮的blog就出炉了。...--- layout: post title: 如何快速给自己搭建一个温馨的"家"——用Jekyll生成静态博客 author: 一缕殇流化隐半边冰霜 date: 2016.06.21 01:57:32
因为它是不需要数据库的，通过markdown编写静态文件，生成Html页面，它的优点是提升了页面的响应速度，并且让博主可以只专注于写文章，不用再去考虑如何排版。 静态。...Markdown（或 Textile）、Liquid 和 HTML & CSS 构建可发布的静态网站。 博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...在整个过程中你可以设置 URL 路径，你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。...你可以选择自己开发一套，也可以直接选择已有的，然后自己再更改css布局形成自己的。jekyll主题在这里，你可以选择到你自己喜欢的主题。...--- layout: post title: 如何快速给自己搭建一个温馨的"家"——用Jekyll生成静态博客 author: 一缕殇流化隐半边冰霜 date: 2016.06.21 01:57:32
发布于 2018-07-28 05:27 更新于 2018-08-12 06:52 我经常在博客中插入大图，然而总需要借助浏览器的滚轮缩放功能放大观看实在是不方便...于是我希望做一个点击即放大的功能。 ---- 下面就是一张可点击放大的图片，你可以点击试试！当然，我期望的效果是自动对所有博客中的图片生效。 ?..."> div id="image-cover-caption">div> div> 最外层是容器，里面包含一个关闭按钮，一张图片和一个图片标题。...为图片的 HTML 节点添加 CSS 样式 .image-cover-modal { display: flex; align-items: center; justify-content...设计的简化版本 如果你使用 Jekyll 搭建静态网页，那么只需要修改 3 个地方： 在 main.css 中添加前面的 css 片段。
本文主要讲如何使用 Jekyll 在 Github 搭建博客，其实我们还可以在国内网站搭建，本文是记下我从不知道 github 搭建博客，到成功搭建了博客遇到的问题 我在github建立了博客，博客地址...首先解压一个主题到我们的文件夹，我们不需要安装复杂的技术，目标就是很简单如何使用。 Jekyll的主题可以到任意的Github上用Jekyll博客的git上，去clone。...但是和我们平时写的博客不太一样，需要在开头写一些让我们的Jekyll可以把博客转换 最简单是加上 --- layout: post --- layout是指定，指定 _layouts 目录下的某个文件，...}/js/all.js"> 我们还可以让百度收录博客，需要我们使用 http://zhanzhang.baidu.com 我们可以在每个页面的js，我的所有的js都在一个文件，或在...：如何使用LessOrMore这个Jekyll模版 如果不想使用 git 命令，那么参见：新瓶装旧酒：全程无命令 GitHub Pages 创建您的博客站点 - 冠军 - 博客园 推荐主题：Getting
大家好，我是老章 最近在折腾之前搞的R-bookdown网站、Jekyll博客，还有刚上了Astro做的周刊、Astro Starlight做的文档站 R2ML：https://r2ml.zhanglearning.com...file_path, 'r', encoding='utf-8') as file: content = file.read() # 替换所有匹配的图片标签...- 我们添加了一个 `` 标签来包裹整个 `SummaryCard`，将 `href` 设置为博客的 URL。...请根据你的项目需求和样式框架进行必要的调整。...请确保你的CSS框架（如Tailwind CSS）已经包含了以上用到的类，否则你可能需要添加或修改相应的CSS样式。
Jekyll 是一个简单的博客形态的静态站点生产机器。...到这一步，我们就成功完成了 Github Pages 的配置，接下来我们就需要安装 Jekyll ，上网找一个 Jekyll 的博客模板，再将自己修改后的模板上传至这个库中就可以完成我们的个人博客了。...样式主题预览可以参考下面的参考资料。...在本地博客文件的根目录里打开命令行，使用命令rougify style github > css/syntax.css生成一个 github 风格的样式到css/syntax.css文件中。...参考资料 本次博客的搭建主要参考了以下内容，感谢作者们~ 基于Jekyll搭建个人博客 jekyll-theme-H2O博客主题 个人网站的搭建（基于GitHub和Jekyll主题 ） Jekyll +
基于jekyll的进阶会相对复杂，本文只对新手起作用，这里将教你简单的把一些博客模板拷贝下来，并加以修改，成为自己的专属博客 首先，我们先找一块自己喜欢的jekyll模板，这里介绍两个不错的网站：jekyllthemes...这里我找了个不错的模板，下面教程将以此模板为例 模板样式：点击查看 GitHub项目地址：点击查看 第一步，fork项目，红箭头点击拷贝一份项目，红框更变为自己的用户名即为成功；注：如果你不想别人看到你的博客是拷贝别人...GitHub秘籍：如何与直男打交道 客户端：链接 当我们把项目给clone下来之后，就要进入到我们的HTML与CSS了 # HTML & CSS 下面的才是我们要动手术到的地方，请确保脑瓜中的...细心的朋友一下就发起了其中的端倪，浏览器在访问的样式链接根本就不存在 /editorial-jekyll-theme 这个路径，其实，这是jekyll的配置问题 我们编辑器打开_config.yml..._config.yml这个配置文件，与里面数据的交互式如何实现的，相信你会有个较大的提升 这是jekyll的文档，不懂的多去搜索，网上资料挺多的 Jekyll目录结构 而我，也搭建(copy)了一个属于自己的临时博客
你可以在PR的描述中写fixes #234。 当合并PR的时候，会自动关闭那个issue。是不是很方便：） 了解更多。 #5 链接到评论 是否想要链接到某个特定的评论？...#11 静态博客 你可能已经知道你可以使用GitHub部署静态网页，这个部分我将告诉你用Jekyll（简单博客静态网站生成器）生成静态网页 非常简单，Jekyll会用漂亮的主题去渲染你的README.md...点击设置，选择Jekyll主题。 ? 我将得到一个Jekyll主题的页面: ? 我们通过一个markdown文件就创建一个静态网站，编辑修改非常方便，所以GitHub基本上可以当内容管理系统来用了。...您想将文本块存储在某个地方，而且可以很方便的编辑，且不需要开发。 我的建议是文本写在markdown文件中，然后存到你的仓库。接着在前端写一个组件来请求文件然后渲染。...它在左侧生成一个面板，通过树形结构来浏览你的仓库。 ? 这个视屏了解如何使用 octobox谷歌插件。 说到颜色，我怎么容忍一个苍白的GitHub呢？ ?
# jekyll与实现 如果你看到这，你还没有GitHub，我表示对你的耐心程度真的很失望，想空手搭博客是不可能的，建议去申请一个GitHub吧，因为jekyll是基于GitHub实现的。...基于jekyll的进阶会相对复杂，本文只对新手起作用，这里将教你简单的把一些博客模板拷贝下来，并加以修改，成为自己的专属博客。...这里我找了个不错的模板，下面教程将以此模板为例 模板样式：点击查看 GitHub项目地址：点击查看 第一步，fork项目，红箭头点击拷贝一份项目，红框更变为自己的用户名即为成功；注：如果你不想别人看到你的博客是拷贝别人...GitHub秘籍：如何与直男打交道 客户端：链接 当我们把项目给clone下来之后，就要进入到我们的HTML与CSS了！...细心的朋友一下就发起了其中的端倪，浏览器在访问的样式链接根本就不存在 /editorial-jekyll-theme 这个路径，其实，这是jekyll的配置问题 我们编辑器打开_config.yml，然后我们把罪魁祸首揪出来
都应该有name属性)，当点击提交按钮时会向后端提交数据，当点击reset按钮时会重置所有选择框的数据。...2.1css介绍 css（cascading style sheet，层叠样式表）定义如何显示HTML元素。.../*注释*/ 2.3css的几种引入方式 所谓引入方式就是将css代码在HTML页面代码中执行的方式。 2.3.1行内样式 行内样式指在标记的style属性中设置css样式，不推荐使用。...欢迎来到我的博客 2.3.2内部样式 将css样式集中写在head标签对的style标签对中，格式如下： div里面的所有的标签都会被设置成color的颜色。
虽然Jekyll已经有了博客框架，还是需要创建一个assets文件夹来存储图像，CSS和JS文件。...本节中的步骤可以从本地计算机或使用Jekyll博客的Linode完成。如果您使用Linode，则可以使用ngrok查看笔记本。...Iris数据集将用作生成本指南中输出的示例。 1.打开感兴趣的笔记本，或使用下面的代码创建示例笔记本。运行所有相关单元格，以便在页面上显示你想要在Jekyll博客上显示的内容。...有关转义字符和格式化块的更多信息，请参阅Jekyll文档。 以下部分显示如何通过调整并设置表格和图像样式以改进显示。 扩展默认SCSS Jupyter中的表格输出转换为HTML表格。...本节介绍如何通过扩展主题SCSS以便对表格进行样式化。 1.在/exampleblog/assets文件夹中创建一个名为main.scss的新文件。
image.png 介绍如何为 hexo 写一个本地的搜索引擎。...这个想法起初是受了 Christian Fei 的 Simple Jekyll Search 启发。在了解了它的原理后，我认为在 Hexo 上实现一个本地搜索引擎并不复杂。...下面介绍如何给自己的博客搭建这样的一个搜索引擎。 最新版本的 hexo-theme-freemind 已提供了本地搜索功能。如果懒得折腾，欢迎使用这个主题。...可选值包括： post - 只生成博客文章（post）的索引（默认）； page - 只生成其他页面（page）的索引； all - 生成所有文章和页面的索引。...在 searchFunc 函数中，我已经为几个关键的页面元素设定了 css 名： ul.search-result-list - 搜索结果列表的样式名； a.search-result-title -
安装 bower install --save simple-jekyll-search 二、在 Jekyll 博客根目录中新建 search.json ---- --- layout..."date" : "" } % unless forloop.last %,% endunless % % endfor % ] 三、将以下代码放置在要显示搜索的页面中...，例如首页/index.html ---- 3.1 样式代码 #search-input { width: 90%; height: 35px; color: #333;...background-color: #fff; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #007fff; } 3.2 html代码 div..."> div> 3.3 配置代码 jekyll-search.min.js"></script
本文将介绍如何使用它，并为大家提供它默认的语法高亮样式预览。...---- 在 Jekyll 中使用 Rouge 语法高亮插件 Jekyll 中的 __config.yml 文件记录了 Jekyll 的最核心配置。...（具体只语法高亮所用的 css 的 class）。...我们需要另外使用 rougify 工具生成对应的样式文件才行。 你需要先配好 Ruby 环境。如果没有配好，推荐阅读 快速在 Windows 上搭建 Jekyll 开发环境 快速配置。...点击下载 syntax.monokai.sublime.css ---- 参考资料 Plugins - Jekyll • Simple, blog-aware, static sites kramdown
前言 正如大家所知，Jekyll 是一款高可定制的、非常流行的静态博客生成工具。围绕着 Jekyll 也衍生出了很多优秀的 Jekyll 主题， 由 廖柯宇 开发的 H2O 主题就是其中之一。...另外，运维程序员比较重视能一览所有文章的标题以迅速找到感兴趣的文章。虽然搜索功能、标签页、卡片展示页都能够列出所有的文章，但个人觉得还是不够简洁、方便。...系统日志页 系统日志页其实也不是经常更新的，只有在博客整体作出设置或改进的才加以说明。...另外，为了减少一些第三方 CSS 样式的请求数，利用自动构建工作流将固定的第三方 CSS 样式文件合并并压缩为 plugins.min.css 文件。...app.min.css 仍为多个自编写 CSS 样式文件的合并压缩。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
