文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

快速上手Vue Router和组合式API：创建灵活可定制的布局

该教程从基础开始，介绍了Vue Router的概念，如何配置路由以及如何使用组合式API。它还介绍了如何在Vue Router中使用组合式API来创建布局。...---- Vue Router 是在 Vue.js 单页应用程序中创建路由的事实标准。但是，你是否知道，除了使用它将路由映射到页面组件之外，还可以使用它来组合页面布局？这是一个有趣的建议。...假设我们正在构建一个博客，在该博客中，某些页面可能在主要内容的两侧都有侧边栏： 其他页面只需要在内容旁边放置一个侧边栏，而且主内容前后的位置可以变化。 而其他页面则根本不需要侧边栏。...选项1是为侧边栏创建组件，并根据需要在每个页面中包含它们。...: () => import('@/components/SidebarTwo.vue'), }, }, 左侧的侧边栏 //router/index.js { path: '/posts/

1.2K10

Halo博客的部署和使用

1 前言 Halo 是一个强大易用的开源建站工具，拥有丰富的主题模板和插件，帮助用户快速搭建属于自己的博客系统。...、备案信息、站点声明信息等 基础样式：加载进度条、文章侧边目录、博客背景图、横幅大图、主题色、字体、布局、首页大图轮播、侧边栏悬浮 文章设置：文章缩略图、版权声明、文章分享、捐赠二维码等 侧边栏配置：侧边栏展示...(详情见下方表)、各模块类型的具体设置 页面设置：设置友链页面、标签页面等 增强功能：鼠标设置、特效显示、访客统计、自动推送等 定制主题：主题样式自定义设置 侧边栏模板类型 模块位置 备注 信息模块 左侧...： 4.6 一些细节 侧边栏“文章”页内可管理文章分类和标签 添加文章页可切换编辑器，文章设置中可针对调整此篇文章的某些设置 使用“对象存储”插件，可在侧边栏“附件”内改变存储策略 侧边栏“图库”为菜单...“相册”，侧边栏“链接”为菜单“友链”，侧边栏“瞬间”为菜单“动态” 侧边栏“用户”内角色管理可新建角色权限组，使用“OAuth2 认证”插件可在身份认证中设置多登录方式 侧边栏“概览”中外部访问地址必须为外网

22510
您找到你想要的搜索结果了吗？
是的
没有找到

Docsify+腾讯云对象存储 COS，一键搭建云上静态博客

最近一直在想如何利用 COS 简化静态博客的搭建过程。搜了很多的静态博客搭建过程，发现大部分的静态博客都要通过编译才能生成静态页面。功夫不负有心人，终于让我找到了一个超简洁博客的搭建方法。...下面，就让我来给大家瞅瞅，我是如何做到一键搭建云上静态博客。 前期准备工作 第一步 首先，你要在腾讯云对象存储控制台创建一个存储桶。这里作为例子，我创建一个名为 docsify 的存储桶。...为了获得侧边栏，您需要创建自己的_sidebar.md。...-- docs/_sidebar.md --> * [首页](docs/) * [指南](docs/guide) 再刷新线上页面，即可看到侧边栏。...注意这里能够进行实时预览的链接为静态网站访问链接，不是加速域名链接。 每次编辑完后刷新浏览器页面就能实时看到更新后的文档内容。

2.2K20

Mirages主题帮助文档

内容部分按需发挥 发布页面 建议了解的内容 侧边栏及导航条菜单项 侧边栏及导航条菜单项为你的「独立页面」，可以在管理 -> 独立页面进行隐藏、排序等操作。...插件下载地址 备用下载地址 侧边栏菜单怎么配置？ 侧边栏菜单的内容来源于你的独立页面，新增或删除独立页面后，侧边栏菜单会相应更改。 侧边栏菜单如何排序？...侧边栏菜单的内容来源于你的独立页面，所以你可以在 管理 -> 独立页面 对独立页面进行隐藏、排序等操作，侧边栏菜单会相应更改。 侧边栏头像怎么修改？...你可以通过点击：控制台 -> 个人设置 -> 点击左侧的头像 进入 Gravatar 注册账号并上传头像。 为什么我主题的菜单/导航栏/导航条和你的不一样？...独立页面 侧边栏内容 侧边栏菜单项为你的「独立页面」，可以在 管理 -> 独立页面 进行隐藏、排序等操作。

9.9K20

「R」Shiny：用户界面（三）布局

在我们知道如何创建一系列输入和输出控件之后，我们需要学会如何在一个页面中对它们进行排列，以达到比较好的展示效果。这正是布局函数的工作，布局函数提供了一个应用高层次的可视化结构。...，相信通过扫读上面的函数名也会对该页面布局有一个比较准确的猜测：顶部是标题栏，然后是侧边栏（包含滑块），主面板包含图。...这是当前没有后端绘图函数的加持，页面只展示了侧边栏的结果。 我们还是先了解下更多的布局知识。...接下来，我将给读者介绍 2 个通用的页面结构：带侧边栏的页面和多行页面。...带侧边栏的页面 结合 sidebarLayout() 和 titlePanel()、sidebarPanel() 和 mainPanel()，我们可以轻易创建一个 2 列布局的页面，左侧显示输入，右侧显示输出

3.6K10

实现Typecho说说功能

background: #444; } .whisper .post-title .more { position: relative; float: right; } 后端 本博客系统的矫情独立页面评论区是我自己的一个日常说说...，那么我后端实现的需求就是如何从这个独立页面获取最新的评论。..., '0') // 过滤非嵌套评论 修改示意 这两行代码以后会不会影响到那些侧边栏调用最新评论的博客程序？我自己没有尝试，如果加了代码后侧边栏最新评论出现问题需要自己再进行调整！...更新 解决上面遗留的问题，大佬泽泽社长给出了解决方案，如何在不影响侧边栏调用最新评论的基础上，对说说中仅输出博主的非嵌套最新评论。...> 完成以上修改可以完美避开博客主题侧边栏调用最新评论也过滤掉非博主评论以及嵌套评论的问题。

63610

如何为自己创建一个既时尚又好用的博客网站

拥有一个自己的博客网站是每一位有追求的写作爱好者的梦想。本文将向大家分享：如何为自己创建一个既时尚又好用的博客网站。...: 侧边栏背景图片 关于开启评论功能 dbyll内置了对disqus的支持，如果你要开启评论功能，完成一下步骤即可： 第一步：为域名获取disqus简称 你需要在disqus上为你要添加评论功能的域名设置一个...侧边栏(sidebar) 你可以在编辑/_includes/sidebar.html来自定义你的侧边栏。 其他问题 发表的文章在首页不显示？...或将for post in paginator.posts 改为 for post in site.posts 在GitHub上创建dbyll主题的个人博客 ---- 下面我将在GitHub...具体步骤： 第一步：创建GitHub Pages 关于如何在GitHub上创建个人博客，可以查阅这篇文章《轻松搞定GitHub Pages》。

1.8K70

超好看的30款网站侧边栏设计

第一部分：为什么需要网站侧边栏？ 侧边栏其实就是一种比较经典的网站导航设计，它的形式通常为竖向的一列，展示在网站的右侧或者左侧，具体的位置当然是取决于整体的设计。...Grace chuang Grace chuang是一个作品集单页网站，该网站布局分为三大部分，左侧为带有logo和社交按钮的侧边栏，中心是网站所有者的照片展示，右侧是自我介绍。 ? 4....Jasminestar Jasminestar的侧边栏文本设计比较独特，看起来像一个左旋90°的顶部导航栏，并且使用留白突出显示，还提供了关闭按钮，方便用户以自己喜欢的方式浏览页面。 ? 7....Pedron the world Pedron the world的侧边栏不够“侧”，首页位于页面正中。 ? 其他页面侧边栏位于左侧，如下图： ? 24....这里推荐一个YouTube的视频，详细地讲解了如何使用html、css和jQuery创建侧边栏侧边菜单。 https://www.youtube.com/watch?

11.7K10

WordPress免费主题：Document，让阅读变得更加方便

文章列表小工具新增【热门文章】，按照阅读量进行排序展示 修复调色板无法关闭的问题 更新首页banner小工具的样式，新增移动端是否显示banner的选项 首页和文章页从统一侧边栏，拆分成两个侧边栏，可在小工具页面进行设置...2.主题后台修改基本信息 主题后台可以自定义如下内容： 博客副标题 博客页面关键字 博客页面描述 博客logo链接 留言板链接 文章聚合链接 赞赏码 百度站长推送Token ICP备案号 Gravatar...镜像服务器 页脚附加代码 3.新增页面模板 主题具有 文章聚合、留言两个文章模板，在后台添加页面时选择对应模板发布后，可将导航栏内的文章聚合、留言页面链接修改为你创建的链接。...新建菜单 添加菜单项 发布到顶部菜单  5.小部件、侧边栏 主题具有文章信息、作者信息、最新文章、最近更新 四个小部件（小部件自带配置，可在添加的时候填写），添加后默认在文章页面的右侧边栏显示。...； 文章目录最小高度为屏幕的一半，悬浮在文章左侧； 2.

4.1K30

【12】2小时还你一个集打赏、评论、RSS功能于一身的个人博客

前情提要 几个月前，写过几篇关于Hexo博客搭建的教程，最近几天，发现有很多读者私信我一些Hexo搭建过程中遇到的问题，重新燃起了我对Hexo博客的兴趣，于是花了一两天的时间重新将Hexo博客搭建了一下...鉴于个人喜好，笔者不是很喜欢在打开一篇文章的时候，刚想好好品读，却因为侧边栏的出现扰乱视觉，所以想对其进行设置。...hide // 初始隐藏 remove // 移除侧边栏 笔者将其设置为hide模式，如下图所示： 设置侧边栏显示效果 读者们可根据个人喜好进行设置。...获取Key，修改站点配置 完成Hexo Algolia后，回到Algolia官网的Dashboard，在左侧导航栏选择API Keys一项，跳转到如下图所示的页面。...创建Class 进入到刚刚创建的应用中，选择左侧导航栏的“存储”，然后点击“创建Class”，为了与NexT形成配置关系，将Class名称填为Counter，并选择无限制选项，然后单击“创建Class

1.2K30

WordPress 初学者词汇表（术语解释）

Gravatar（头像） Gravatar是与您的电子邮件相关联的头像（名称和图像），您可以在Gravatar主网站上创建它。现在我相信您会问，这与 WordPress 有什么关系？...在 WordPress 中，您可以非常轻松地创建菜单，并且有内置设置可以将菜单分配到特定位置（例如，主菜单、侧边栏菜单、页脚菜单等）。...仪表板的小部件部分 小部件也可以是特定主题的，或者通过使用小部件插件进行扩展。 Siderbar（侧边栏） 侧边栏显示帖子或页面上的支持内容。...根据您的 WordPress 主题（或页面构建器），侧边栏通常是左侧或右侧的垂直列，尽管根据帖子类型或页面，某些设计可能具有两个侧边栏甚至自定义侧边栏。...Page Builder（页面构建器） 页面构建器是一种为您的 WordPress 网站创建自定义布局和通用网页设计的无代码方式。

7.1K20

一看就会的保姆级教程，10分钟搭建个人博客

前言 相信很多人都想拥有一个自己的个人博客，现有的个人博客搭建框架已经有很多了，例如 hexo 、vuepress 、jekyll 等等，这里我选用 vuepress 来快速搭建个人博客 网上教程千千万...) 二、安装脚手架 这里本应该安装 vuepress 的，但是 vuepress 其本身是一个文档型的页面，比较简约，我们肯定都想让自己的博客变得好看一点，所以这里推荐一个大佬制作好的主题 vuepress-theme-reco...第二处是导航栏的最左侧 ? 第三处就是浏览器标签页的title ?.../docs/theme-reco/ 时，侧边栏会自动找路径 ....最后，大家也可以访问一下我搭建的个人博客 ，我正在我的个人博客里打造一套完整的宝典，欢迎关注～

1.7K20

导航栏还是侧栏？flutter 跨平台适配指南

侧栏的作用： 侧栏通常位于屏幕的侧边（通常是左侧），用于显示应用的导航菜单、设置选项或其他重要功能。它提供了一种便捷的方式，让用户可以轻松地浏览和访问应用中的不同内容。...侧栏： 侧栏通常位于屏幕的左侧，并可以通过从屏幕左侧滑动或点击侧边栏图标来打开。 在 Android 应用中，侧栏通常用于显示导航菜单、设置选项和其他功能链接。...了解和遵循不同平台的设计规范和用户习惯，可以帮助开发者创建出更加符合用户期望的应用，提升用户体验并增强应用的用户满意度。 导航栏还是侧栏？...导航层次浅：当应用的导航层次较浅，不需要多层嵌套的页面结构时，导航栏是一个合适的选择。...CupertinoNavigationBar：用于在 iOS 应用中显示导航栏，与 iOS 设计规范保持一致。 侧栏组件： Drawer：用于显示应用的侧边栏菜单，通常在屏幕左侧打开。

13710

如何快速搭建好看的个人博客(完整配置与源码)

导航栏创建好了, 接下来就是配置页面内容中的侧边栏slider 配置侧边栏slider 1.自动获取侧边栏内容 如果你希望自动生成当前页面标题的侧边栏, 可以在config.js中配置来启用 // .vuepress...如果你希望为不同的页面组显示不同的侧边栏, 就和官网一样, 点击指南显示的是对应的侧边栏,目前目录有node \ database \ web等, 这些目录下都存放着多个md文件: module.exports...上面采用了两个方式配置侧边栏, 一个侧边栏是node目录下直接是写的markdown文章, 而在web下又有多个分类, 所有有进行了分栏配置, 其实这两种方式在我们博客中都是比较常见的 自定义布局内容...网站的导航和侧边栏都已经配置好之后, 如果你觉得页面不是很符合你的预期, 你也可以自定修改成你想要的效果。...比如就像我的博客中左侧固定的内容, 就是自定义的全局组件.

1.5K10

VuePress V1 踩坑记录

2.侧边栏 在 VuePress 的侧边栏分组配置中，children 的路径是相对于 docs 目录的路径，而不是相对于分组的路径。...children: ['/foo/bar'] // 必要的，如果为空，则不应该使用分组 } ] } } 注意，如果不显示指定链接文字，侧边栏显示的是文档的一级标题（H1）。...bar 而不是 /foo/bar.md 的一级标题 ] // 必要的，如果为空，则不应该使用分组 } ] } } 3.添加页面目录导航 在页面右上角添加页面目录导航栏...，目的是简化左侧边栏结构的同时不丢失页面内标题导航的功能。...expand: { trigger: 'hover' } // 改为 expand: { trigger: 'click' } 示例效果如下： 有了右侧的页面目录导航，那么我们便可以将侧边栏分组下的标题设置为只显示

43230

【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )

Flutter 封装的带有 AppBar , 底部导航栏 BottomNavigationBar , 侧边栏 的组件 , 使用该组件可以很容易实现一个复杂的导航页面 ; AppBar : 顶部导航栏 ;..., 导入最基础的材料设计包 , import 'package:flutter/material.dart'; 输入 stf 即可提示出 stful 代码模板 , 使用该代码模板创建一个新的 StatelessWidget...= null), super(key: key); } 四、Scaffold 组件 ---- Scaffold 组件是一个完整的页面组件 , 封装有 AppBar , 底部导航栏 BottomNavigationBar..., 侧边栏组件 , 使用该组件可以很容易实现一个复杂的导航页面 ; Scaffold 组件常用设置选项 : 顶部标题栏设置 : appBar ; 界面主体子组件设置 : body ; 悬浮按钮设置 :...floatingActionButton ; 底部导航栏设置 : bottomNavigationBar ; 侧边栏设置 : drawer ; Scaffold 组件构造函数源码 : 构造函数中的可选参数就是组件的可设置选项

1.9K00

开发工具总结（15）之Vuepress制作文档并发布到GitHub

为了方便，我写了一个脚本，把常用的文件都创建了。你可以把脚本取名叫做：test.bat，格式为.bat，然后把脚本放到刚创建的文件hello_vuepress里面。...3.显示所有页面的标题链接 默认情况下，侧边栏只会显示由当前活动页面的标题（headers）组成的链接，你可以将 themeConfig.displayAllHeaders 设置为 true 来显示所有页面的标题链接...2.如果超过了三层，滑动页面时，侧边栏的标题指示不会跟随移动。...d.关于禁用侧边栏 可以通过 YAML front matter 来禁用指定页面的侧边栏。...2.官网说的slidebar多个侧边栏，我怎么都配置不好，可能是一个坑吧。 ---- 本文参考：https://vuepress.vuejs.org/zh/guide/

3.9K50

Axure实战06:创建一个AppleSymbol图标库网站

首先是侧边导航栏，我们拖入一个动态面板放在左侧，在样式工具栏中，设置它的位置为0,0，尺寸是256*955，并填充动态面板的背景颜色为#001529。...为了让侧边导航栏放在左边，我们需要固定侧边导航栏的动态面板。 我们在样式工具栏中设置“固定到浏览器”，设置水平固定为“左侧”，垂直固定为“顶部”。 接下来完成里面的内容。...这里我们用到的组件叫做“内联框架”，它可以链接展示外部地址网站，也可以链接内部创建好的页面。 我们这里有7个菜单，我们在“页面”工具栏中先创建7个页面。...然后还是在AppleSymbol页面中，拖入一个“内联框架”组件，把它放在侧边导航栏右边，尺寸设置为1350*955。 顺便设置它的样式，勾选“隐藏边框”，设置滚动模式为“从不滚动”。...交互动作-内容区域 我们希望点击侧边导航栏不同菜单的时候，内联框架展示不同的内容，而内联框架可以绑定我们已经创建好的页面。 下面，我们完成这一块的逻辑绑定。

2.6K20

腾讯云服务器搭建WordPress博客

为您的网站选择主题和模板 登录WordPress仪表盘，输入：https://yourdomain.com/wp-admin （将yourdomin.com替换为您的域名） 显示如下： 在侧边栏点击外观...添加内容并创建新的页面 安装主题后，您就可以开始创建内容了。 添加和编辑页面 在WordPress仪表板的侧边栏中查找“页面->添加”。...您可以看到一个类似于word的界面出现，您可以在此页面中进行编辑。 将页面添加到菜单 如果您希望将新页面链接到导航栏： 点击“更新”，保存对页面所做的任何更改。...编辑侧栏 大多数WordPress主题在右侧有一个侧边栏（在某些情况下，它在左侧）。...如果你想关闭侧边栏或编辑你不需要的项目，请按照如下指南进行操作： 到WordPress仪表板中的“外观 - >窗口小部件”。 您可以使用拖放操作向侧边栏添加不同的“框”，或删除不需要的项目。

4.3K50
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券