Linux Nautilus中用脚本一键打开HTML和CSS配对

答案:通过创建Bash脚本并集成到Nautilus右键菜单,可实现一键同时打开同名HTML和CSS文件。1. 脚本检测选中HTML文件是否存在同目录下同名CSS文件;2. 若存在则调用指定编辑器(如VS Code)同时打开两个文件;3. 需将脚本保存至~/.local/share/nautilus/scripts/目录并赋予执行权限;4. 使用时右键点击HTML文件,在“脚本”菜单中选择对应选项即可触发操作。

linux nautilus中用脚本一键打开html和css配对

在 Linux 的 Nautilus 文件管理器中,可以通过自定义脚本实现一键同时打开配对的 HTML 和 CSS 文件。这个功能特别适合前端开发人员,能快速启动关联文件进行编辑。

创建脚本自动识别并打开 HTML/CSS 配对文件

你可以写一个简单的 Bash 脚本,让它检测当前选中的 HTML 文件是否对应同名的 CSS 文件,并用你喜欢的编辑器(如 VS Code、Gedit 或 Sublime Text)同时打开这两个文件。

示例脚本内容如下:

#!/bin/bash
# 获取选中的文件路径(Nautilus 通过 %F 传入)
selected_file=”$1″

# 提取文件所在目录和基础名称
dir=$(dirname “$selected_file”)
base=$(basename “$selected_file” .html)

# 构造对应的 CSS 文件路径
css_file=”$dir/$base.css”

# 检查是否为 HTML 文件且存在同名 CSS 文件
if [[ “$selected_file” == *.html ]] && [[ -f “$css_file” ]]; then
    code “$selected_file” “$css_file” # 使用 VS Code 打开
    # gedit “$selected_file” “$css_file” # 或使用 Gedit
fi

将脚本添加到 Nautilus 右键菜单

为了让脚本能出现在右键菜单中,需将其保存到 Nautilus 的脚本目录,并设置可执行权限。

立即学习“前端免费学习笔记(深入)”;

步骤如下:

把上面的脚本保存为 open_html_css.sh创建脚本目录(如果不存在):
mkdir -p ~/.local/share/nautilus/scripts移动脚本进去:
mv open_html_css.sh ~/.local/share/nautilus/scripts/添加执行权限:
chmod +x ~/.local/share/nautilus/scripts/open_html_css.sh

完成后,在 Nautilus 中右键点击任意 HTML 文件,就会在“脚本”子菜单里看到该选项。

使用说明与注意事项

此功能依赖于命名一致性:HTML 和 CSS 文件必须同名(如 index.html 与 index.css),且位于同一目录下。脚本通过扩展名判断类型,因此非标准命名不会触发操作。

你可以根据偏好修改编辑器命令,比如换成 sublime、vim 或其他 GUI 编辑器。确保所用编辑器已安装并支持命令行调用。

每次重启 Nautilus 后脚本会自动加载,若未生效可尝试运行:nautilus -q 来重启文件管理器。

基本上就这些,不复杂但很实用。

以上就是Linux Nautilus中用脚本一键打开HTML和CSS配对的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1594926.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 09:52:15
下一篇 2025年12月23日 09:52:27

相关推荐

  • Trilium主题切换,HTML+CSS学习模式一键高颜值!

    首先启用开发者模式并开启自定义CSS,接着在customCss笔记中定义亮色与暗色主题的CSS变量,并应用于body和侧边栏等元素,然后创建JavaScript脚本通过修改data-theme属性实现主题切换,最后扩展多套主题如“ocean”并更新脚本支持循环切换,完成界面个性化。 如果您希望在Tr…

    好文分享 2025年12月23日
    000
  • html如何放置按钮_HTML按钮(button)位置(定位/布局)放置方法

    答案:可通过内联样式、CSS类、Flexbox、Grid布局及文本对齐等方式精确控制按钮位置。使用内联样式可快速定位单个按钮;通过CSS类便于多按钮统一管理;Flexbox适用于弹性对齐多个按钮;Grid支持二维精确定位;而text-align可用于简单居中场景。 如果您希望在网页中精确控制按钮的位…

    2025年12月23日
    000
  • html代码压缩工具_html代码压缩网页版入口

    html代码压缩网页版入口是https://www.toptal.com/developers/html-minifier,该工具提供在线压缩服务,支持HTML4、HTML5等格式,去除空格、换行和注释以减小文件体积,界面简洁无需登录,可自定义压缩选项,基于浏览器端运行保障代码安全,适合前端优化与自…

    2025年12月23日
    000
  • html文件缓存怎样清理掉_html文件缓存清理掉的实用方法

    清除浏览器缓存可解决网页显示异常或内容未更新问题。一、清除浏览器缓存:进入设置→隐私和安全→清除浏览数据,选择“所有时间”并勾选“缓存的图像和文件”后清除;二、使用硬刷新:按下Ctrl+F5(Windows)或Cmd+Shift+R(Mac)强制从服务器加载最新HTML文件;三、通过开发者工具禁用缓…

    2025年12月23日
    000
  • Linux Vim中安装Emmet插件加速HTML编写

    安装Emmet插件可大幅提升Vim中HTML编写效率。通过Vim-plug、Vundle或手动方式安装mattn/emmet-vim插件后,启用filetype插件支持,并用Ctrl+y ,展开缩写,如html:5生成HTML5结构,div.container>ul>li*5>a快…

    2025年12月23日
    000
  • 如何通过协作平台实现多人同时编辑HTML的详细步骤

    选择支持实时协作的工具并规范流程,可实现多人高效编辑HTML文件。首先选用CodeSandbox Teams、Replit、GitHub Codespaces+Live Share或Figma等平台,创建项目并设置成员权限,启用自动保存与版本历史。随后通过实时光标跟踪、内置聊天和分屏预览协同编辑,避…

    2025年12月23日
    000
  • 如何通过Gedit集成HTML测试工具的详细步骤

    通过启用插件并集成HTML Tidy,Gedit可实现HTML验证与浏览器预览。首先开启“外部工具”插件,安装tidy或validator.nu CLI,再配置自定义命令进行语法检查,设置快捷键Ctrl+Shift+V运行验证,最后添加xdg-open命令实现实时预览,形成编写-检查-预览闭环。 在…

    2025年12月23日
    000
  • html代码怎么响应式_html响应式布局代码实现与媒体查询用法

    实现响应式布局的关键方法包括:一、使用流式网格布局,通过百分比宽度和max-width限制,结合浮动或弹性盒子排列元素;二、引入弹性图片技术,设置max-width:100%与height:auto,保持图片比例;三、应用CSS媒体查询,按屏幕宽度设定断点并调整样式;四、采用视口元标签,确保页面正确…

    2025年12月23日
    000
  • Windows hosts文件绑定域名测试HTML+CSS本地站

    hosts文件是Windows系统中用于域名映射的无扩展名文件,位于C:WindowsSystem32driversetc目录,通过管理员权限编辑可将自定义域名如mywebsite.local指向127.0.0.1,实现本地网站测试;需配合HTTP服务(如Python启动的本地服务器)在指定端口运行…

    2025年12月23日
    000
  • html文件转换工具_html文件转换网页版平台

    答案是https://www.htmledit.net,该平台提供在线HTML编辑、实时预览、文本转HTML、模板生成、文件可视化编辑等功能,支持多浏览器兼容与API调用,适合网页快速制作与调试。 html文件转换工具_html文件转换网页版平台在哪里?这是不少网友都关注的,接下来由PHP小编为大家…

    2025年12月23日
    000
  • Mac Finder中如何让HTML文件显示代码预览缩略图?

    可通过安装qlstephen或QuickLook-HTML插件启用Mac Finder中HTML文件的代码预览,结合Quick Look功能与终端命令刷新缓存后,直接按空格键查看带语法高亮的源码内容。 如果您在Mac的Finder中浏览HTML文件时,希望直接看到代码内容的预览缩略图而非默认图标,可…

    2025年12月23日
    000
  • Linux scp递归上传整个HTML+CSS静态网站

    使用scp -r命令可递归上传本地HTML+CSS网站到远程Linux服务器,示例为scp -r /home/user/mywebsite/* wwwuser@192.168.1.100:/var/www/html/,确保远程路径有写入权限,若用非标端口需加-P参数,建议上传后检查文件权限。 要将本…

    2025年12月23日
    000
  • 如何通过Nano命令行编辑HTML文件的详细教程

    首先启动Nano编辑器并打开HTML文件,命令为“nano index.html”;接着直接输入或修改HTML代码;然后按Ctrl+O保存,回车确认文件名,再按Ctrl+X退出;最后可参考常用快捷键提高效率。 在Linux或类Unix系统中,Nano是一个简单易用的命令行文本编辑器,适合快速修改HT…

    2025年12月23日
    000
  • Windows11右键CSS直飞VS Code,效率翻10倍!

    首先启用VS Code内置的上下文菜单集成功能,打开设置搜索shell integration并启用上下文菜单选项,即可在右键点击CSS文件时直接使用VS Code打开;若未生效,可手动通过注册表或第三方工具ContextMenuForWindows11添加“用VSCode打开”命令,确保路径正确且…

    2025年12月23日
    000
  • html转vue工具_html转vue网页版转换入口

    html转vue网页版转换入口是https://www.htmltovue.com,该平台支持HTML代码一键转换为Vue组件,自动解析标签层级与属性,生成符合Vue语法的模板代码,并提供智能分析、多模式输出、兼容HTML5标签等功能,用户可直接粘贴代码或上传文件进行转换,右侧面板实时预览结果,支持…

    2025年12月23日
    000
  • Path Finder双窗格,HTML+CSS管理爽到起飞!

    Path Finder双窗格模式可提升macOS文件管理效率,通过菜单启用双窗格视图后,可并排浏览目录;结合CSS自定义样式优化界面外观,如调整分隔线颜色;利用HTML创建导航面板实现快速跳转;开启同步滚动功能便于文件夹内容对比,增强操作便捷性。 如果您希望在使用文件管理器时实现高效操作,双窗格布局…

    2025年12月23日
    000
  • html如何设置ocx_HTML OCX控件(ActiveX)嵌入与配置方法

    答案:使用标签嵌入OCX控件需指定CLSID、设置宽高、添加param参数,仅限IE或IE内核浏览器运行,需注册控件并调整安全设置,现代浏览器已弃用ActiveX,建议迁移至WebAssembly等现代技术。 要在HTML中嵌入并配置OCX控件(即ActiveX控件),需使用标签,并根据浏览器和安全…

    2025年12月23日
    000
  • html源码如何保存为项目备份_html源码保存为项目备份的操作方法

    答案:建议通过手动归档、压缩打包、版本控制或编辑器导出四种方式备份HTML项目。首先复制源码及相关资源文件并重命名备份文件夹;其次使用压缩工具生成带日期标识的ZIP包便于存储;然后利用Git初始化仓库,提交并推送至远程平台实现版本管理;最后可通过代码编辑器内置功能一键导出完整项目备份,确保资源齐全。…

    2025年12月23日
    000
  • 如何在WebStorm中优化HTML文件搜索的处理方法

    配置文件类型与索引范围,使用“Find in Path”限定*.html文件搜索,结合结构化搜索查找特定HTML结构,并通过排除无关目录、关闭拼写检查、清理缓存提升性能,实现高效准确的HTML文件搜索。 在WebStorm中高效搜索HTML文件,关键在于合理使用内置搜索功能并调整设置以提升响应速度和…

    2025年12月23日
    000
  • html如何打印横线_HTML横线(hr/border)打印样式设置方法

    答案:通过设置深色实线并使用CSS打印媒体查询可解决HTML横线打印异常。具体包括用background-color或border实现横线,避免浅色和虚线,统一在@media print中定义hr和div的高、色、边距,确保打印时清晰显示。 在网页中使用横线(如 标签或通过 CSS 的 border…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信