之前一直使用百度自带的网址导航,但是最近发现不能添加类别目录了。所以想找个差不多的导航网址,一直没有找到。

要么是各种弹广告,要么是不能自己添加网址。于是乎,就想自己做一个。

我也不知道有多少人跟我一样喜欢用网址导航,这里就介绍一下怎么样来用Go语言做一个极简风格的网址导航。需要的可以直接拿走使用。

源代码:https://gitee.com/fcsvr/navi

1.目录结构

目录下面主要的文件就是css,img,js,index.html,navi.go css,img,js这三个目录就是web编程常用的一些资源文件 navi.go是web服务主程序 index.html是主页面

2.navi.go

navi.go是Go服务器主程序,代码如下,其实就是很简单的一段Go Web服务器的代码,很容易理解。 用Go来做服务器就是很方便,不用配置什么Nginx,Apache,几行代码直接运行。

package main

import (
 "fmt"
 "html/template"
 "net/http"
 "os"
 "os/signal"
 "regexp"
 "time"
)

//将路由函数放到map中
var mux map[string]func(http.ResponseWriter, *http.Request)

type Myhandler struct{}
type home struct {
 Title string
}

const (
 Js_Dir  = "./js/"
 Css_Dir = "./css/"
 Img_Dir = "./img/"
)

func main() {
 //定义http服务结构
 server := http.Server{
     Addr:        ":8002",
     Handler:     &Myhandler{},
     ReadTimeout: 100 * time.Second,
 }   
 mux = make(map[string]func(http.ResponseWriter, *http.Request))
 mux["/"] = index
 mux["/js"] = jsFile
 mux["/css"] = cssFile
 mux["/img"] = imgFile
 fmt.Println("Hello, this is fancygo navi!")
 go server.ListenAndServe()

 //设置sigint信号
 close := make(chan os.Signal, 1)
 signal.Notify(close, os.Interrupt, os.Kill)
 <-close

 fmt.Println("Bye, fancygo webgame close")
}

func (*Myhandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 if h, ok := mux[r.URL.String()]; ok {
     h(w, r)
     return
 }
 if ok, _ := regexp.MatchString("/css/", r.URL.String()); ok {
     http.StripPrefix("/css/", http.FileServer(http.Dir("./css/"))).ServeHTTP(w, r)
 } else if ok, _ := regexp.MatchString("/js/", r.URL.String()); ok {
     http.StripPrefix("/js/", http.FileServer(http.Dir("./js/"))).ServeHTTP(w, r)
 } else if ok, _ := regexp.MatchString("/img/", r.URL.String()); ok {
     http.StripPrefix("/img/", http.FileServer(http.Dir("./img/"))).ServeHTTP(w, r)
 }
}

func index(w http.ResponseWriter, r *http.Request) {
 title := home{Title: "fancygo navi"}
 t, _ := template.ParseFiles("index.html")
 t.Execute(w, title)
}

func jsFile(w http.ResponseWriter, r *http.Request) {
 http.StripPrefix("/js/", http.FileServer(http.Dir("./js/"))).ServeHTTP(w, r)
}

func cssFile(w http.ResponseWriter, r *http.Request) {
 http.StripPrefix("/css/", http.FileServer(http.Dir("./css/"))).ServeHTTP(w, r)
}

func imgFile(w http.ResponseWriter, r *http.Request) {
 http.StripPrefix("/img/", http.FileServer(http.Dir("./img/"))).ServeHTTP(w, r)
}

3.index.html

index.html里面写死了各种网站的网址,可以根据自己的需要修改
本来也想过再也个配置工具,用来配网址名称,再写到数据库中。。。
后来发现自己用的话还不如就直接修改index.html源文件,方便简洁

上一段源代码

<body>
 <div class="container" id="container">
     <aside class="left-bar" id="leftBar">
         <div class="title">
             <p>FancyGo导航</p>
         </div>
         <nav class="nav">
             <ul class="nav-item" id="navItem">
                 <li><a href="#normal" class="active">常用</a></li>
                 <li><a href="#study">学习</a></li>
                 <li><a href="#live">生活</a></li>
                 <li><a href="#server">server</a></li>
                 <li><a href="#linux">linux</a></li>
                 <li><a href="#tool">工具</a></li>
                 <li><a href="#go">go</a></li>
                 <li><a href="#go-book">go书籍</a></li>
                 <li><a href="#go-net">go网络</a></li>
                 <li><a href="#go-game">go游戏</a></li>
                 <li><a href="#devops">运维</a></li>
                 <li><a href="#security">网络安全</a></li>
                 <li><a href="#crypto">数学和密码</a></li>
                 <li><a href="#programe">通用编程</a></li>
                 <li><a href="#astronomy">天文</a></li>
                 <li><a href="#recruit">招聘考试</a></li>
             </ul>
         </nav>
     </aside>

这一段是配置网站的类配

     <section class="main">
         <div id="mainContent">
             <!-- 常用 -->
             <div class="box">
                 <a href="#" name="normal"></a>
                 <div class="sub-category">
                     <div class="iconword">常用</div>
                 </div>
                 <div>
                     <a target="_blank" href="http://www.fancygo.net/"><div class="item"><div class="no-logo">FancyGo</div><div class="desc">FancyGo自己的博客</ div></div></a>
                     <a target="_blank" href="https://www.zhihu.com/"><div class="item"><div class="no-logo">知乎</div><div class="desc">知乎</div></div></a>
                     <a target="_blank" href="https://www.baidu.com/"><div class="item"><div class="no-logo">百度</div><div class="desc">百度</div></div></a>
                     <a target="_blank" href="https://www.qq.com/"><div class="item"><div class="no-logo">腾讯</div><div class="desc">腾讯</div></div></a>
                     <a target="_blank" href="https://www.sina.com.cn/"><div class="item"><div class="no-logo">新浪</div><div class="desc">新浪</div></div></a>
                     <a target="_blank" href="https://www.zhibo8.cc/"><div class="item"><div class="no-logo">直播吧</div><div class="desc">直播吧</div></div></a>

                 </div>
             </div>

然后下面都是为每个类别配置不同的网址

4.运行

有两种运行的方式
1.直接再本地用浏览器打开index.html文件
2.go build 编译后,运行web服务器后,就可以在外网打开了

5.大家可以如下链接预览一下

https://fancygo.net:7001/

喜欢这样风格的可以按照我的介绍自己做一个啊
因为我自己不太熟悉前端的技术,各位也可以以我的为模板做一些更加花哨的风格,我是只会极简风。。。
有问题可以联系我哦。。。