有时候，如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本，那是不可能的。在本文中，你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件。 ?...当用户在组件外部单击时，blur 事件将关闭我们的组件。 input 参数发出选定的选项，父组件可以轻松地对更改做出反应。...我希望这可以帮助你创建自己的自定义选择组件，以下是完整组件要点的链接： 最后，在线演示的示例：https://codesandbox.io/s/custom-vuejs-select-component
/quickstart/ 」可以快速基于Jekyll完成站点搭建。...由于系统默认Ruby安装过程中容易出现各种问题，因此建议自定义安装新的Ruby。关于卸载及重装 Ruby 和 Jekyll的详细内容，也可以参考文章iMac搭建Jekyll本地环境。...如下图，点击新建环境，然后在弹框中输入你自定义的环境名称，选择付费模式，然后点击下方的「立即开通」。 qcloud_jekyll_evn.png 之后就进入了环境的初始化阶段，初始化比较久。...e 后面的环境ID就是首页生成的环境ID，一般腾讯云会在我们的自定义名称后面加一个后缀。...如果你有自己的域名，你也可以添加自己的域名解析，例如下面我修改为使用我自己的域名，并设置了自定义的索引页和404页面： Zkyx39SOCYgHimv.png 访问静态页面 在浏览器输入讯云提供的默认域名
---- 制作除博客之外的新页面类型 Jekyll 不止支持博客（post）页面类型，也可以支持自定义页面类型。当然博客是它唯一的内建类型（hard-coded type）。...第一步：在 _config.yml 文件中添加自定义页面类型集合 collections: article: output: true 其中，article 是我为自定义类型取的名称。...第二步：添加自定义页面类型文件夹 需要在 Jekyll 项目根目录建立一个 _article 文件夹，此名称与第一步的类型名称一致，前面加下划线。...（可选）第四步：添加自定义页面类型的页面列表 就像 posts 列表的页面一样制作一个 article 列表。...制作一个合并了博客和其他页面类型的页面列表 我希望在首页中混杂我的博客和胡思乱想，于是必须将两种不同类型的集合合并。
经常看到别人的博客里面有动态的云标签页，感觉很是高大上，自己也很像弄一个。于是去找寻源码，在阿里西西页面特效中找到了云标签的源码，经过分析和解剖，弄成了符合博客园的js. ...首先，找到博客园页面的管理界面， ? ...那么我们分析以下，上面的代码： 这个部分的代码，应该是直接嵌入到body里面的，所以引用的css js都要加入标签，下面是css的代码： #div1...blue;} #div1 .red {color:red;} #div1 .yellow {color:yellow;} #div1 .green {color:green;} 这里面的...div是我们下面将要用到的标签内容div的id，通过这个id就可以引用到这里面的样式。
安装 Jekyll 引擎 打开一个命令行窗口， 输入下面的命令可以安装 Jekyll ： gem update system gem install jekyll 如果提示有什么不兼容或者提示缺少什么库...制作 Jekyll 主题模版 JekBootStrap 提供了几个主题， 如果你喜欢或者懒得动手， 直接下载一个就可以开始了。 当让， 也可以自己动手做一个。...上传文件 上传文件最简单了， 不过我的建议是在本地运行 jekyll --server ， 先预览一下， 确认无误之后再上传。 只要用 Git 提交上去即可。...注意问题 如果将运行 jekyll --server 之后， _site 目录下没有生成任何文件， 只要将 _config.yml 中的 auto 配置为 false ， 再运行 jekyll --server...，看看错误信息， 一般都可以解决的； 在 windows 系统平台上， 如果你的博客包含中文字符， 则需要将当前命令行的代码页修改为 65001 （UTF8） 才能正常运行； 不要使用 windows
博客自定义指南 博客链接/blog link tea9 使用Jekyll博客引擎 基于Theme H2O修改 前置条件/Before： 需要你有 GitHub Github Page Jekyll...环境 如以上都有还有问题请参考 使用jekyll搭建个人博客 jekyll-theme-H2O_README 步骤/Step： github目录 克隆项目： git clone https://...# 一些前端文件 ├──dev # 未编译的前端文件 ├──laji # 我的之前博客文件 -目录建议删除 ├──live2d # 首页的二次元小姐姐 ├──pages # 一些我自定义的页面...links.md # 友情链接页面 | └── message.md # 留言板页面 ├──pdf # 文章里的引用的电子书 可以删除此目录 ├──readme_img # README.md 中引用的图片...archives: '/archives.html' 归档页 # tags: '/tags.html' 标签页 # about: '/about' 关于我页面 links: '/links/
如果有系统日志页，就可以按照年份、月份、事件的先后进行简要的描述，并且一览无遗。 因此，在 H2O-ac 主题中，从原来 H2O 的主页中抽出框架做成了页面模板。...根据实际页面的内容需求，增加了学术首页、归档页和系统日志页。 学术首页 学术首页如下图所示，并将原来 H2O 中的卡片首页移动到 blog 子目录下了。...如果读者想要看到文章卡片展示页，还是可以点击顶部的导航栏中的 BLOG 直接访问。 归档页 归档页设置为由 Jekyll 按照模板自动生成，以年份、日期、文章标题分级列表展示，简洁清晰。...文章侧边索引导航 (2022年1月9日更新) 在一些基于 Bootstrap 前端框架的 Jekyll 主题中，这个功能比较常见。...鉴于单页面的内容有限及侧边位置空间有限，暂未对单页面进行支持。 支持 Waline 评论系统 目前已支持基于 Valine 衍生的简洁、安全的评论系统 Waline。
Mifa 主题 只需要在项目中创建 _config.yml 文化，在文件中写入： remote_theme: phodal/mifa-jekyll 就可以为你的 README 启动 Mifa 主题。...对于我而言，我需要自定义下面的几个基本要素即可： 颜色，定义了一个网站的基本风格 字体大小，影响了用户的阅读体验 文本风格，诸如行高、段落间距、语法高亮等等的内容。...在 UI 设计中，分子是由几个基本的 HTML 标签组成的简单组织。例如，在一个搜索元素中，它是由标签原子、输入原子和搜索原子组成： ?...Mifa Footer 这是界面中，相对复杂的不同区块。 模板：Mifa Jekyll 主题及 Markdown 编辑器 模板，顾名思义就是整合前面的元素，构建整体的布局。...Template 诸如基于 Mifa 的 GitHub Pages Jekyll 主题也是模板，只需要： 在项目中创建 _config.yml 文化，在文件中写入： remote_theme: phodal
将内容推送到 github 仓库后，jekyll 主题会将内容格式化后推送到你的博客主页。...然后 fork 之后，简单做了一些修改作为测试后，目前的效果如下（可能看不太出来，只是对页面的地址的一些地方做了修改） ?...最后一提，目前还只是将项目 fork 到了自己的博客所属的代码仓库，后续需要改动的地方还是很多的，目前的想法是 先将外链的部分、博客内容页、博客介绍页、tab等个性化的内容部分都替换为自己的内容 增加一个自动化配置的...基于 project-pages 这个主题修改源码，将其功能加入进来。...看了这个主题，除了风格不太适合我个人以外，它实现了 MathJax ,Mermaid.JS 等强大的可视化功能，这些是在处理算法原理的时候非常有用的 还想到了一个很好的方式，如果大家也想加入到公众号文章的内容建设中来的话
前言 Jekyll 生成目录的方案 第一种方案 第二种方案 第三种方案 实践 布局 目录生成 自适应 最终代码 参考资料 前言 Jekyll 与 Hexo 不同之处有很多，其中一处是在文章页面中不支持原生...Jekyll 生成目录的方案 如参考资料 1 中所提到的，如果想要在 Jekyll 中实现文章目录，有三种不同的方案可供选择： 第一种方案 利用完整的标签来生成静态目录，可以看到在本文的开头就是这样的一个实例...# gemfile gem "jekyll-toc" # 添加后需执行 bundle install 安装插件 # _config.yml # 在全局配置文件中启用 jekyll-toc 插件 plugins...后面的例子是采用了 Bootstrap 框架中的 toc js 插件，能够满足目标一，且能跟踪内容位置来切换显示的二级目录，相对来说功能更加强大。...具体在 post 模板页使用 toc 模块的代码如最后所示。 自适应 为了实现目标二，这里采用了最简单的 CSS 媒体查询，即在平常 PC 端宽屏时采用如下 common.sass 中的样式。
Hugo是一个制作静态页面的工具，非常灵活，可以以多种形式工作，是制作博客、文档、个人履历等非常合适的工具。Hugo激发了创造力，让建造网页变得充满乐趣。...你可以使用任何你喜欢的方式组织URL，通过自定义的index页面和分类组织内容。使用任何形式定义你自己的元数据，例如YAML、TOML或JSON。...我确实用过Jekyll，但是对于一个会运行很多年的网站来说，照顾一个ruby app是我不想插手的事。...也许我的服务器和我的桌面端的Ruby版本不同，也许一些Ruby Gems已经在我的发行版安装了，但不是我想要的，这就得重新手动安装它们，每次Gem提供的功能出了什么问题，我就得手动重新安装一下，还得SSH...也许jekyll哪天发了新版本，用了最新Ruby特性。 Hugo在这方面有很多优势，比如内置服务器、实时载入和在本地测试时方便的链接转换等。
所有的 Markdown 文件现在都被 GitHub Pages 渲染，把你从需要给每个文件添加 YAML 前置描述（在文件顶部由 ---符号分割的元数据）中解脱出来。...如果你的页面没有一个明确的标题，并且这个文件是由 H1、H2或者 H3 标签开始的，我们会使用这个标签内容作为页面的标题，显示在浏览器的标签上。...当然，你依然可以通过额外的自定义设置（比如使用你自己的布局和样式来覆盖默认主题）来继续控制外观和体验。...如果你没有指定一个页面的布局和标题，并且希望它一直保持这样（例如，假如你需要提供无样式的内容），你需要明确地将这些配置的值设为 null。...---- 往期精选文章 使用虚拟dom和JavaScript构建完全响应式的UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全
由于项目的需要，登录SharePoint Application的用户将从一个统一平台中获取，而不是从Domain中获取，所以需要对SharePoint Application的身份验证（Claims...故本篇博客将着重笔墨去介绍SharePoint 2013自定义Providers在基于表单的身份验（Forms-Based-Authentication）中的应用。...如截图所示那样，启用了FBA之后，需要我们提供自定义的Menbership Provider和Role Provider。...NET 3.5 GAC在C:\Windows\assembly，所以别找错地方。Assembly成功注册到GAC后，最好IISReset下。...分配用户并测试 成功为Web Application创建了自定义的Provider之后，接着就是测试是否成功。如添加访问用户，可以如下图操作所示： ? 搜索用户，如下图所示： ?
在jekyll templates中可以看到，是支持include的，只需要在根目录下创建一个名为_includes的目录，把页面片放到这个目录中，然后用下面的语法加载对应的页面片文件即可： {% include...footer.html %} #加载名为 footer.html 的文件到当前位置 {% include footer.html param="value" %} #也可传参数到页面片文件中，在footer.html...相关插件 做为一个技术博客，常用会需要展示代码，有几种方式可以让我们在页面中展示所需的代码片断或者Demo效果。...-- 多说评论框 end --> 把上面的代码放到文章页模板的下面即可。...↩ hexo 一个快速，简单和功能强大的博客，基于node.js。 ↩ 可以在菜单 “Preferences > Browse Packages…” 找到目录的位置。 ↩
码云 Pages 是一个基于 Jekyll 静态网站服务，可以用它来制作个人博客、简历、项目主页、个人主页等等。具体的使用方法请看这里。...我们工程师已经对该服务进行全面升级改进： 支持发布仓库中某个目录（ 例如你可以将项目的文档目录 doc 发布成静态网页 ） 支持自定义域名（如 https://www.i-love-gitee.com...） 支持自定义域名 + https 仓库推送自动更新 Pages 页面 Pages 服务入口：项目主页 -> 服务 -> Gitee Pages ?
↓： 第一篇：GitBook制作文档并发布到GitHub 第二篇：Hexo制作文档并发布到GitHub 第三篇：Jekyll制作文档并发布到GitHub 第四篇：Vuepress...本文简单讲接一下Jekyll如何制作文档。...第二步:把下载好的模板上传到自己的Github仓库中。 第三步:在_posts文件夹中放入自己写好的博客,文件名必须是日期-标题名,例如:2019-01-01-我的第一篇博客。...布局可以在 YAML 头信息中根据不同文章进行选择。 这将在下一个部分进行介绍。标签 {{ content }} 可以将content插入页面中。 _posts 这里放的就是你的文章了。...The permalinks 可以在文章中自己定制，但是数据和标记语言都是根据文件名来确定的。
制作文档并发布到GitHub 第二篇：Hexo制作文档并发布到GitHub 第三篇：Jekyll制作文档并发布到GitHub 第四篇：Vuepress制作文档并发布到GitHub...---- 前面讲解了Gitbook，Hexo, Jekyll三种方式制作文档，今天讲一下Vuepress制作文档。...注意：当你想要去自定义 templates/ssr.html 或 templates/dev.html 时，最好基于 默认的模板文件 来修改，否则可能会导致构建出错。...自定义容器示例 （六）代码中的行高亮 语言后面使用{数字} 例如js{4} 表示第四行高亮 ?...6.在markdown中的使用： 在markdown文件开头加入以下两个css链接，然后再去写katex语法即可。
github.io 或者自定义域名来发布站点。...jekyll-gist ` 上面对软件安装完毕后，你就可以在github上搜索一个基于jekyll模版对项目，当然你可以从网上搜索任何你喜欢的主题风格，找到之后使用git clone到自己本地： git...clone xxx.git myblog cd myblog jekyll server ` 然后访问http：//localhost：4040端口就可以在本地预览你到博客了 如果你喜欢这个主题...，那么你就可以fork到你自己到github中，然后clone下来，修改一些地方，然后就push到自己到仓库中，就可以了，一些git操作命令： git add . git commit -m "first...，新建以名字为CNAME到文件，里面的内容就是我们的自己的域名，比如我的： 8090nixi.com ` 注意这里只需要域名后面的部分即可，不需要把http和www都写进来，然后登陆域名管理中心，我这里是阿里云的找到域名解析部分
Jekyll Jekyll，官网没有中文版，民间翻译中文网Jekyll中文网，一个简单的博客静态站点生成器，官网为：https://jekyllrb.com 。 5....使用Ruby语言编写，基于 Jekyll设计的博客框架。它是Jekyll 的增强版，让插件的安装和删除更加容易，更容易集成样式表、图片、字体等。 6....Pelican支持Jinja模版引擎，结果是，它支持很多自定义主题。 8. VuePress Vue 驱动的静态站点生成工具，中文网。 9....Cactus Cactus是使用Python和Django模版系统制作的静态网站生成工具。 10....最大特点就是自带社区，自己的文章可以发送到社区中。社区回帖和博客评论进行联动。让每一个博客不是孤岛，而是满天相互联系的星星。
大多数托管平台无非是开放一个FTP或类似服务，用户把制作好的网页或脚本上传了事，而在码云用户通过创建特殊名称的 Git 版本库或在 Git 库中建立特别的分支实现对主页的维护。...Jekyll 是一个简单的博客形态的静态站点生产机器。...Jekyll 使用文档：http://jekyll.bootcss.com/docs/home/ 1....Pages 进阶，使用 Jekyll 生成自己的静态网页 Jekyll 究竟是什么？ Jekyll 是一个简单的博客形态的静态站点生产机器。...Jekyll 使用文档：http://jekyll.bootcss.com/docs/home/ 其他帮助: 如何自定义404？ 答：在项目根目录新建 404.html 文件即可。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
