7

用Go语言做极简风格网址导航

 3 years ago
source link: http://www.yunweipai.com/39193.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

yY3eiie.png!mobile

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

我也不知道有多少人跟我一样喜欢用网址导航,这里就介绍一下怎么样来用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"

)

//定义路由函数数组

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,

}<br />

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()

<pre><code> //设置sigint信号

close := make(chan os.Signal, 1)

signal.Notify(close, os.Interrupt, os.Kill)

<-close

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

</code></pre>

}

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"

<pFancyGo导航</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

<pre><code> </div

</div

</code></pre>

“`

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

4.运行

有两种运行的方式

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

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

“`

http://fancygo.net:8002/

“`

![](https://img-blog.csdnimg.cn/20201124214404608.png)

喜欢这样风格的可以按照我的介绍自己做一个啊

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

本文链接:http://www.yunweipai.com/39193.html


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK