Time flies, it has been nearly two months since the last article InteractiveGraph was published to realize the cool relationship graph. It said that it would open source the code to Github /DesertsX immediately, but it has not taken action.

In fact, the words in that article has been said about, behind the code part of the feeling that there is no what to say, a little bit of comment to illustrate which piece of code to achieve what function, throw to you to consider it, there is no what too difficult place actually (escape……) . Since the code can run, there is no irresistible force, why still “drag more”? Though no one was pushing…

Speaking of which, many of you may not be able to write code for this project, and the off-the-shelf open-source project doesn’t work on GayHub, the world’s largest gay dating site. It would be a shame not to be able to experience such a cool celebrity relationship map, so Gu Liu decided to deploy it on the web and make it available for everyone to play! No sooner said than done.

However, the problem of skill tree was that Gu Liu didn’t know front-end and never deployed a web page, so I used flask in the code, so I went to watch some videos and learned from them in the spirit of learning. It was really a pit after a pit. In fact, looking back at the project, it’s only a very basic flask knowledge, as evidenced by two python lines: app_run.py

import os
import sys
from flask import Flask
sys.path.append(".." + os.path.sep)
from webapp.views.graph_view import graph

app = Flask(__name__)
app.register_blueprint(graph)

if __name__ == '__main__':
    app.run()Copy the code

graph_view.py

from flask import Blueprint, render_template
graph = Blueprint('graph', __name__)

# http://127.0.0.1:5000/ylq-star-GraphNavigator
@graph.route('/ylq-star-GraphNavigator')
def ylq(a):
    return render_template('ylq-star-GraphNavigator.html')Copy the code

{{url_for()}} syntax is used to generate urls for static files and use special ‘static’ endpoint names. Here we only introduce jQUERy-3.2.1. Min. js as an example.

<script src="{{url_for (' static 'filename ='. / lib/jquery - 3.2.1 / jquery - 3.2.1. Min. Js')}}"></script>Copy the code

However, GitHub Pages has changed the relative path format (highlighted).

<script src=". / static/lib/jquery - 3.2.1 / jquery - 3.2.1. Min. Js. ""></script>Copy the code

If you want to see what the above code means, check out the official tutorial: Quick Start – Flask 0.10.1 documentation.

Python + Flask + Nginx + Gunicorn + Supervisor: Python + Flask + Nginx + Gunicorn + Supervisor After reading a few articles, I felt that the various configurations were tedious, but it should not be difficult, but it still required “expensive” servers and domain names. The thought of just displaying this relationship map persuaded my inner “economic rational person” to back off.

That seems to be the end of the story, but for those of you who don’t get to see the cool relationship map, feel sorry for yourself. However, gu liu seems to have been inspired by the project to be interested in the front end, so he collected some vue.js books (check the Vue logo for the caption), found some video tutorials, and went through the basics… That’s a story for the future.

It was just like that (if I had never paid attention to the front end of the article). Later, I saw a cool article in Nuggets that used Vue2.6 to achieve a small DEMO of [Time roulette] screensaver that was very popular with Douyin. Notice their online experience address https://hongqingcao.github.io/word-clock/ is not with a lot of Pages. If you don’t know what GitHub Pages are, you can use GitHub Pages to set up your own blog for free. If you don’t know what GitHub Pages are, you can use GitHub Pages to set up your own blog for free.

Github Pages is a public static page hosting service for users, organizations and projects. The site can be hosted on Github for free. You can choose to use the default domain name Github Pages or custom domain name to publish the site.

GitHub Pages is a free static blog.

If you also want to build a blog loaded force, hair articles, here amway under the Gridea software, according to the official documents and use video tutorials, technology should also be able to easily fix.

Pull back, know a lot Pages not only can build a blog, and can separate the deployment of Web page, used to display Web front-end small project this “startling discovery”, the ancient liu said “poor mountain water after yi road, away from her”, so easily just dig behind the next (omit 10000 words here, next to tell the specific process) is achieved.

Address: making project DesertsX/yulequan – relations – graph, relationship mapping experience address: https://desertsx.github.io/yulequan-relations-graph/

Of course, as 1281 star pictures are involved in the relationship atlas, the webpage loading is slow and the experience effect is not very good. Considering that everyone may not be patient to wait for the complete loading, we simply recorded a video of the experience and put it on B website: Bilibili – super cool entertainment star relationship map, 28s, short to match the naruto BGM end of the surprise, the first time is also no experience, this is another story. Welcome to have a look, BGM is still very exciting, escape.