⛵随心远航是一个可以 DIY 的开源个人网址导航系统,它基于开源的 markdown WikiDocs系统,小巧快速,使用方便,维护简单,无需数据库。
系统需要的资源非常低,安装也很简单,基本需求是:
系统已经在多个不同的 Linux(包括armbian)、安卓、windows 软硬件环境中进行了测试。
程序可以在 github 或者 gitee 上下载:
将下载的文件解压缩,将其中的nav
目录到服务器的某一目录或子目录,打开浏览器,进行基本配置,设置标题、编辑密码等参数就可以使用了。
基本不需要特别维护,定期备份一下个人添加的图片(images目录
),以及编写的网址文件(datasets/documents
目录),就可以了。
随心远航目前自带的网址并不多,只提供了数十个网址和本地搜索作为模板给大家参考,大家可以根据自己情况逐步添加完善,制作出最适合自己的网址导航系统。如果大家将自己整理的一些专业网址模块和脚本都分享出来,说不定以后也可以出一个懒人版网址导航。
目前系统提供了两个模板:网址模板和搜索模板。
点击右上角的+加号按钮,可以添加页面(分类),添加后自动创建文件(文件名是content.md),编辑文件后保存就会显示在左侧的导航菜单栏。可以将不同类型的网站分类,放在不同导航页面,这样既方便访问,也容易维护。
每个页面下还可以创建多级目录,如:分类1/1级子目录/2级子目录
,可以一次创建多级目录。目录级数没有限制,但是左侧只显示前3级,更多子目录会附加到相应页面最后,作为链接显示出来。如果页面内容中有一级标题(# XXX
),它将作为菜单中的导航链接名,如果没有一级标题,就使用文件名。
默认的页面是 homepage(也就是 homepage 目录),它相当于主页面,它本身和它下面的子目录是不会显示到左侧的分类栏。可以把最常用的链接放在 homepage 中,点击左上角的标题栏就会显示 homepage 内容。
每个页面可以用 markdown 语法编写任意内容,可以同时混合 html 语法。编辑页面可以使用内置的 markdown 编辑器,也可以用外部编辑器编辑。使用内部编辑器时,会自动保存历史存档。
也可以用其它方式创建目录和文件(文件名必须是 content.md),系统会自动识别新增加的目录和文件。
作为网址导航,最重要的就是添加各种网址和网址管理。
随心远航系统没有独立的网址管理界面,需要通过手工方式编写网址。虽然稍显复杂,但是也带来了最大的灵活性,可以随意设置链接的样式、大小、分类、外观、边框、间距、颜色、透明度、渐变等等,各种不同样式可以混合显示,能想出来的功能基本都能实现,限制你的只有想象力。其它一些带有管理界面的系统,网址也需要一个个添加和维护,网址多了一样也麻烦。手工方式看起来麻烦,但是大部分时候也就是复制和粘贴,其实用起来没有那么难。
先看几种不同样式的链接
文本链接,是最简单的方式,使用下面定义:
<a target="_blank" href="网址">说明</a>
target="_blank"
代表在新的浏览器窗口打开链接href="网址"
处将网址替换为需要的地址,如 https://github.com
说明
是链接的说明,可以是任何文字使用系统默认定义的按钮类
<a class="btn" target="_blank" href="网址">说明</a>
自定义按钮,先在css中定义一个类别,然后使用它设置链接。基本用法是先定义一个基本class类,再到链接中单独设置不同属性(如颜色)。下面使用的sxyhButton_02已经在styles/styles-custom.css中定义了(大家也可以将更多自定义的样式添加到这个文件中),功能从名称就可以看出,这里就不做详细介绍了。需要深入了解时可以到网上搜索一下。
.sxyhButton_02 {
background-color:#579438;
border-radius:4px;
border:1px solid #4b8f29;;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:宋体;
font-size:16px;
font-weight:bold;
text-decoration:none;
text-align: center;
margin: 5px;
width: 120px;
height: 28px;
line-height: 28px;
}
.sxyhButton_02:hover {
background-color:#579438;
}
.sxyhButton_02:active {
position:relative;
top:1px;
}
直接使用,就可以显示默认的效果
如果需要修改某一属性,单独在链接里的 style 属性中修改,如设置按钮颜色是黑底白字:<a class="sxyhButton_02" style="background-color:#000000;color:#ffffff">按钮</a>
,效果是
带图标按钮,就是给同时显示一个图片文件,并调整到合适位置。图片需要先准备好,也可以动态从网上获取,比如获取网站的favicon.ico文件,这样虽然不用保存文件,但是会降低打开的速度。
<a class="sxyhButton_01" style="padding-right: 30px;" target="_blank" href=""><img src="/nav/images/ico/zhibo8.png" height="24" style="float: left;padding-left:20px;padding-top:4px"/>图标按钮</a>
<a class="sxyhButton_01" style="padding-right: 30px;background-color:#ffffff;color:#000000" target="_blank" href=""><img src="https://www.taobao.com/favicon.ico" height="24" style="float: left;padding-left:20px;padding-top:4px"/>淘宝图标</a>
提示
<br>
padding-top padding-right
属性调整图标和文字到合适位置更多说明和效果展示,请参考系统的模板和在线演示。
系统默认每天随机更换一次背景图片,背景图片存放在随心导航目录下的 images
文件夹中。可以将任意 jpg、png、webp 图形文件复制到 images
文件夹中,不需要特别命名或设置,系统会自动定时随机进行更换。
点击页面底部右下角的背景图库图标,就可以查看系统中已有的图片。
背景图库浏览的上方,显示了背景自动更换的周期(秒),以及下次更新时间的倒计时。如果希望使用不同的更新周期,在输入框中设置新的时间,然后按下设置新时间按钮。0代表禁止自动更新,但是可以手动更新。
点击取消背景图像按钮,就可以取消背景图,同时也会禁用自动更新功能。
浏览背景图库时,点击图片,就可以查看图片的大图。点击图片下方的设置设置为系统背景按钮,就可以指定这个图像为系统背景图。返回主界面后如果没有生效,是因为浏览器缓存造成的,这时清理浏览器缓存,或者按下 Ctrl-F5键,就可以显示出新的背景图像了。
####改变指定页面背景
上面的自动更换背景是针对所有页面的。如果希望指定特定页面的背景,可以编辑页面文件,在文件的最后加上下面代码(注意 <style>
前面不能有空格)。
<style>
body {
background-image: url(目录/图片文件名);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
图片可以是网络文件,也可以是本地文件。如果文件在导航系统目录下,可以用相对目录,如 background-image: url(../../../images/bg17.jpg);
(不同目录下文件的相对位置不同,请根据具体目录设置,本文件所在位置是 homepage/帮助/设置背景图片
,因此相对目录是../../../
)。
<style>
body {
background-image: url(../../../images/bg17.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
</style>}
将这段代码放在页面的最后,就可以让指定页面使用必应每日一图作为背景,每天自动更换。它自动获取必应每日一图的当日图片,并在它上面叠加一个png图片做蒙版,避免因为图片颜色过于鲜艳而看不清文字。
<script>document.write('<style>body{ background-image: url('+navurl+'scripts/backmask.png), url('+navurl+'scripts/bingwallpaperurl.php); background-repeat: no-repeat; background-size: cover; background-attachment: fixed;}<\/style>');</script>
使用脚本方式是为了自动适应目录,避免不同的子目录或导航系统目录名造成路径的变化使脚本地址错误。如果目录固定不变,也可以直接指定地址,如(假定导航系统目录是 '/nav/'
):
<style>
body{
background-image: url(/nav/scripts/backmask.png), url(/nav/scripts/bingwallpaperurl.php);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
使用其它图片源也可以用类似方法,将第二个url中的网址替换为图片源网址。
每个页面都可以单独设置 javascript 特效。可以从网上搜索一些合适的 js 特效代码(如飘雪、小星星、爱心、下雨等等),粘贴到页面的最后,保存后自动生效。实际效果可以查看系统的在线演示。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。