background

As a developer can not live without a blog, recently spent several days to build this blog, deal with a lot of details, in this article I will from the beginning to now and the subsequent optimization sorted out, to help more people build, maintain, update, their own blog.

At first all of my blog on sina weibo, because twitter is more likely to promote their own articles, weibo users is large, but later showed the disadvantages of weibo slowly, after all, not the developers of the heavens and the earth, my blog often insert a lot of code, and weibo editor does not support markdown, ordinary block of code editor compatibility is very poor, Not to mention highlighting, sometimes typography can be confusing, resulting in a very ugly appearance, as shown below:

Moreover, the account system of Weibo also has certain disadvantages, so I later turned to technical platforms such as Jianshu and Nuggets. I had to admit that compared with Weibo, these platforms are much more friendly to developers. However, I found a problem later. This is because I use the local Markdown editor for my writing, and these platforms are not strict or uniform about some minor details of markdown syntax:

The two platforms’ editors are not uniform, so each time you write an article, you have to make different changes for both platforms.

To sum up, the simplest and most once and for all the way is to set up his own blog platform, and HEXO good help us to solve the problem, it is easier for a developer, the entire process for most developers with code base morning time, you could just but the hardest and most headaches is the detail of adjustment, UI modifications, optimizations, etc., but this article will cover them one by one.

Environment configuration

  • Git

    I don’t think the average developer doesn’t have this, but I get it when I install Xcode,

    Brew install git; Or download the installer to install

  • Bitbucket account

    The problem is that GitHub is open source, so anyone can see your source code on GitHub. It doesn’t make a big difference, but it feels weird to me. So I used bitbucket Page for my blog, everything is the same except it’s a private library (free for 5 people)

Began to build the

Step 1: Create the repository

Create a new repO at Github/Bitbucket. Make sure the Name of the repO meets your Account Name/github. If it’s Bitbucket, it’s your Account Name/bitbucket.io, because that’s the only repository Name that ends up being displayed as a static page. Figure: the content of XXX must match the text in the red box.

Step 2: Create a local folder

After creating the folder, CD into the folder you created and perform hexo’s initialization commands

$ hexo init
$ npm install
Copy the code

The standard directory structure looks like this (listing only the necessary folders and their subdirectories).

├ ─ ─ _config. Yml ├ ─ ─ package. The json ├ ─ ─ scaffolds ├ ─ ─ source | ├ ─ ─ _drafts | └ ─ ─ _posts └ ─ ─ themesCopy the code

  • _config.yml: Most of our operations will be done in _config.yml, which is the configuration file for our site.

  • Scaffolds: The template document that sets out what we will initially look like when we create an article,

  • Source: Can be temporarily understood as the storage of our articles

  • Themes: theme file

Step 3: Deploy to Git

Modify the following fields in our site configuration file _config.yml



Among them:

  • The type value corresponds to the server type on which you are deployed.

  • Repo is your repository address, which is the repository clone’s address. HTTPS is recommended.

  • Branch does not write. The default is master. We usually write it as master.

Save the configuration and go back to the terminal and run NPM install hexo-deployer-git –save to install a plugin that will deploy your articles to github for others to view. After installation, execute the following codes in terminal successively (collectively referred to as three steps later for simplicity)

  • Hexo clean Cleans the cache

  • Hexo generate – Hexo G

  • Hexo Server deployed locally (for debugging use) – Hexo S. Then type http://localhost:4000 into your browser to see the effect of your blog, but this is for local debugging, other people can not see. (After debugging, remember to control + C to close the local port, or you won’t be able to enter it next time)

  • After debugging, deploy to git server using hexo deploy short for hexo D.

Github. IO: http://github name. Github. The third step has been completed, and the final result is as follows:

Step 4: Write an essay

To create a new post, use hexo new post to “post name”. You can edit the content in source/_posts using markdown syntax. After editing, perform the terminal operation in step 3 and refresh the browser to see your new article. The diagram below:

personalized

A: the theme

To obtain

Theme is the basis and premise of our individuation. Any personalized modification we want to make is basically the modification of our theme. It is the first task to find a theme we are satisfied with. There are a lot of themes on the web, and HEXO’s official theme catalog contains a number of themes from developers around the world. Alternatively, developers can simply search the Web for the HEXO theme keyword to retrieve the theme.

The installation

The theme is usually repo, just go to the blog directory themes/XXXX, where XXXX corresponds to your theme name, like this: Themes/a – rsnippet git clone https://github.com/huyingjie/hexo-theme-A-RSnippet.git so we can ensure each time we can pull the theme author has updated the updates. However, there is a problem that I will cover later in the HEXO Multi-terminal Synchronization section, so here we choose another way to install, which is to download the theme’s repo directly and unzip it into themes. In fact, for the already stable theme authors generally do not update frequently, unstable theme we do not use, so using the latter installation is the same.

And then we back to site configuration file _config. Yml to modify the following fields, the name of the corresponding is the theme folder name: you just my side is next,

Then save, go to the terminal to perform the three steps, and then refresh the page to see the new interface. Here’s what IT looks like when I refresh the NEXT theme. Since this note has been so well developed, all subsequent examples will be used on this topic

Two: theme menu

Add a button

A theme menu is also a theme button. The default two for the next theme are Home, Archive, and tag about category. We need to modify the theme configuration file. First go to the theme folder and find the _config.yml file. A topic profile is an element that configures some topics. Locate the Menu field in the topic configuration file

It can be seen that the theme author has commented out part of the button and only retains the two most basic ones. It should be noted that the Key in front does not represent the name of the button, because the theme supports multiple languages, so the Key is only an identifier, and the specific name of the button should be searched in this path

Each file corresponds to a different language. Take Chinese as an example to modify these fields in zh-Hans.yml

Key is the key in the theme configuration file and value is the name of the button in the simplified Chinese state. Once we’re done, we’ll save and execute those three steps and we’ll see our new button.

Add a page

After adding a button, we need to click the button to display a unified page. At this point we need to add pages. For a tag page, the command to add a page in hexo is hexo new page XXXXX and XXX is the name of the page to add. To test the new tag page we add a tag to the previous page. Go to source/_post and find an article and we’ll add the following fields at the beginning, multiple tags and so on

Then edit the tag page we just generated (source/tags/index.md) and specify its type as tags

Then save and execute the three steps to have the following effect

Click the corresponding tag to jump to the article corresponding to the changed tag. The same goes for other pages.

Three: Add read more about button

When we are on the front page, it is actually our list of articles, but there is a question at this time, if we have a long article or several articles, is the front page longer? In fact, we can only show part of the article on the front page, by clicking the Read more button to enter the details of the article. This is where truncation is needed. We use
to truncate, use the default article

Then performing those three steps will have the following effect

Click here to read more.

Four: Change the theme background

Start with the following themes\next\source\css_custom\custom.styl and you will find it empty. This file is reserved by the next theme for usto make some custom CSS styles.

@media screen and (min-width:1200px) {body {background-image:url(/images/bg.jpg); background-repeat: no-repeat; background-attachment:fixed; background-position:50% 50%; background-size: cover } #footer a { color:#eee; }}Copy the code

Here you can see that the image path in parentheses is the background image, just put the image in themes\next\source\images, remember to write the right name and suffix. Similarly inside the parentheses we can directly put a picture of the finish these operations to save link such as https://tpc.googlesyndication.com/simgad/6893153702744595670, and then execute the three steps can see effect, but may be the browser cache, You can clean the cache and refresh it.

Five: modify the blog background transparency

Since the background image has been modified in the last step, it really doesn’t look good if it is blocked by the white of NExt itself. We can try to make the white background transparent, which will be much more beautiful. Themes \next\source\css_custom\custom.styl

Inner {background: # FFF; // Change the background color and opacity. Opacity: 0.9; }Copy the code

The first property is the color value, and the second property is our transparency. Revise it properly, otherwise it will backfire and you can’t even read the words. The last two steps are the result of my blog.

Six: Change the author’s avatar to a circle.

The default is a square avatar. If you want to change it to a circle, add the following code to the same path as in the previous two steps

.site-author-image { border-radius: 100%; padding: 2px; border: 2px dashed #fff; Animation: Cycle 2S 0.5s forward; transition: border-radius 2s; }Copy the code

Save -> three steps to see the effect

Seven: Add background animation

Background animation uses Js to deal with, students who know Js can write their own favorite animation, I used the more general online animation. Find the following path themes\next\layout\_layout. Swig and add the following code above the article

<script type="text/javascript" color="255,255,255" opacity='1' zIndex="-2" count="100" SRC = "/ / cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js" > < / script > {% endif %}Copy the code

Then save -> three steps to see the effect where SRC is JS path, interested can customize the effect.

Eight: Add comment pages

HEXO’s comment page is officially recommended for Disqus, but it has been blocked. Even if you have a way to overcome it at the time of development, there is no guarantee that everyone who reads your blog will have a way to overcome it. So we plan to use some other third parties to achieve, first of all, to make a comparison of several products on the market:

Comparison:

  • disqus

    The relatively big-name review system, stable service, the only disadvantage is that the domestic can not be used. Don’t take a

  • Say more domestic more famous comment system, has been closed service temporarily not considered.

  • Gitment is a comment system based on Github Issue. The style is similar to Github, but it is not stable yet and the interface cannot be customized, which may be a little incompatible with blogs. And comments require a Github account

  • Livere is a Korean comment system with a Chinese name called Bili. It is a good one without any national sentiment. It is also the one I am using now

    • Support for many formats of comment import, you can easily import the previous comments on other platforms, support a variety of JSON format.

    • The introductory UI provides a variety of topics.

    • Foreign things are not subject to domestic restrictions.

Integration:

First go to livere’s official website to register M, I won’t talk about the specific process, step by step to install her, then he will give you an installation code, like this:

The main information is data-UID. The NEXT theme itself is already integrated with livere comments, just commented out. Go to the topic configuration file _config.yml and find the following code

Open the comment and fill in the UID it gave you after you registered in livere. Then save -> three steps.

Nine: multi-terminal operation

background

It is well known that HEXO is a static blog, where all pages are rendered in a static local file and then deployed. This creates a multi-terminal deployment problem, such as when the company computer is configured and you want to go home to write, you find there is nothing at home and you need to reconfigure the environment, but this is secondary. The point is that if the content of the two terminals is not guaranteed to be exactly the same, the data on the server will be overwritten by the last deployment, causing the previous ones to be overwritten.

To solve

Whether you use Github or Bitbucket, you follow GitFlow. Gitflow is a multi-terminal and multi-person collaborative solution. So we can use it to solve the problem of multi-terminal synchronization.

process

Let’s take a look at hexo’s overall flow. Our normal folder structure is shown as follows:

Step 1: Hexo G

The Source folder holds our posts, tags, archives, etc., which is the content of our blog. When we perform hexo g on the terminal, the source file renders it as a static page file in a regular way and puts it in public:

Step 2: Hexo D

We then perform hexo D, which we can temporarily think of as pushing files in public into our Git repository. So in our warehouse xxXXXX.bitbucket. IO you only see files in public.

Bonus: Hexo Clean

This step has nothing to do with gitFlow, but since we’re talking about the process, we said that this step is used to clean the cache. In fact, it is used to delete the entire public file before the first step, and then we perform hexo G to re-render into public. Then hexo D will deploy, so that the previous content will not affect us.

Specific operation

We learned from the previous step that it is not enough to have only public on git server. We need to have all the files in our entire blog folder to do multi-terminal operations. So there are two methods here:

  • Create another repository, temporarily named MyProject, and upload all of our files to this Git repository. When we switch to another computer, we’ll just pull the code of this new repository and write -> Three steps. Finally, after pushing all files to MyProject, all Git operations will take place in this repository.

  • Git allows you to create a new branch named hexo in the xxxx.github. IO repository. This branch does exactly the same thing as MyProject and all the files in it, but it saves you the need to create another repository. All git operations will go to this branch and local files will remain in this branch. However, it is important to note that even if all git operations are performed in the hexo branch, you must ensure that the master branch is the default branch. Otherwise, you will not be able to open your blog.

    Both of these are basic Git operations and won’t be covered in this article. But one thing I want to emphasize here is that I recommend you go to the repo where the theme is, download the zip, unzip it and drag it into the blog directory. If you do not drag it in and clone it down, you will be involved in git’s Add subModule operation. In fact, the operation is not difficult, the specific command is also a lot of online. However, if you use Bitbucket like me, you may find that you cannot perform submodule operations. I don’t know if this is a Bitbucket BUG or some other reason. The same command works with Github for hosting blogs, but bitbucket doesn’t. Git subModule init will tell you it can’t be found when you’re pulling from another computer. It has not been solved yet, if any great god has any way to contact me in time.

Ten: Bind personal domain name

Note: Bitbucket has turned off custom domain names for personal blogs since 2015, which means you can’t use your domain name if you deploy your blog in Bitbucket, as the Bitbucket documentation makes clear

The preparatory work

Create a repository on Github with the name username.github. Then change the deployment address (repO field) in the site configuration file to the Github address instead of the Bitbucket repository address

Then, in three steps, your blog is migrated from Bitbucket to Github. This way, your entire blog repository is still in bitbucket’s private repository, but the public files in the public folder have been deployed to Github’s repository. The confidential information will remain confidential, and you will still be able to bind your domain name, killing two birds with one stone. Under normal circumstances, after following the above steps, the blog address is xxx.github. IO, then start binding your own domain name.

The domain name to buy

There are many channels, I will not repeat one by one, MY side to Ali Cloud ten thousand network domain name purchase as an example, to find their own domain name

Domain name resolution

After purchasing the domain name and following his steps for real-name authentication, you need to resolve the domain name into our blog and find the corresponding resolution button on the right side of the domain name in the console of Ali Cloud. Click and add parsing

Then fill in the following to add parsing, remembering to replace the recorded value with your own blog address

Remember to enable this record after, but if you are like me ali cloud purchase and configuration is not required to enable, enable for you by default.

Warehouse configuration

Then go back to your Github repository, go to your repository Settings page, find the following field, add your domain name in the red box, and save

Blog configuration

Go back to your blog directory, create a file in the source directory without any suffix, call it CNAME, and fill it with your domain name, as I did, just add your domain name and nothing else. Then save and perform three steps before you can access your blog via your domain name. If not, it may be because of carrier DNS cache issues. Just wait a few minutes.

Eleven: Implements HTTPS

According to after completion of the above steps can be accessed through the domain name, but the question is if you use Google browser or Safari, he will prompt you to not be trusted site, only you click to continue will display your blog, and in the address bar or a red x, although does not affect the use and reading, but still feel uncomfortable, This time we will look at how to change your blog protocol to Https. Here are a few ways:

  • Certificate of purchase

  • Use a free CA certificate. Tencent Cloud Ali cloud are available. But there is a time limit

  • CDN is used for reverse proxy

If you use the above two steps, basically the certificate service providers will tell you how to configure, their documents must be more detailed than mine, but the main reason is that the Github Page we use does not support uploading the certificate, so the third step is to configure the reverse proxy through CDN. Cloudflare, a foreign CDN service provider, is needed here:

The principle of

Cloudflare provides DNS resolution services, and it’s fast. What takes half an hour to resolve in Aliyun takes a split second, and it offers free HTTPS (but not SSL certificates). The implementation mode is that the connection between the user and the CDN server is HTTPS, and the connection between the CDN server and the GithubPage server is HTTP, that is, the reverse proxy is added to the CDN server.

The lock the user sees is actually the user’s certificate to connect to Cloudflare, and there is no HTTPS from Cloudflare to Github, but that’s enough for our static blog.

configuration

The first step:

Still go to the official website to register, and then add your domain name, note that you add the domain name you bought.

The second step:

Go to the DNS resolution screen and fill in the following resolution, because we’re using Clouldflare for DNS resolution so we’ll need to delete the resolution at the place where we bought the domain name later.

The first two are github server addresses, which are given in github documentation, and the last CNAME is your github repository username. Github. IO. Be sure to strictly follow this configuration.

Step 3:

Make a note of the DNS server cloudFlare sent to you, just below the previous page, and use this record to replace the DNS server at your domain name purchase (mine is Ali Cloud). Also delete the DNS server in Ali Cloud, because we will rely on ClouleFlare to resolve DNS in the future.

Step 4:

Go back to ClouldFlare and select crypto and then select Full or Flexible below

The differences among the options are shown below

The last one requires certificate support. Then scroll down to turn on the always Use HTTPS switch

Step 5:

The above steps are almost complete, but if someone enters your blog directly by typing http://XXXXX in the address bar, you will still have a non-HTTPS effect, so we need to make a mandatory jump.

That’s a safe bet.

Pit:

After following the above steps, I found that although the home page was HTTPS, it did not display a Red Cross, but did not display a small green lock, but an exclamation mark. However, some blog pages can display HTTPS green lock normally. It turns out that there are non-HTTPS links in the current page, for example, the picture bed is not HTTPS, or the comment plugin does not support HTTPS. However, the Liebi comments I use in my blog support HTTPS, but my graph bed is HTTP at that time, so I can only display exclamation marks. Then change all the pictures to HTTPS.

12. Add music to your blog

The HEXO blog adds music in two places. One front page sidebar, one inside each page. But people think add sidebar inside is not good, because if add the sidebar users only when browsing homepage you can hear music, and can’t click on any inbound links, during or music will be interrupted, imagine, the average home page is a list of articles, click on the article it is after noon, so the time duration of the user on the front page is very short, Basically, when I find an article I want to read, I will click it immediately, so there is no great significance to play music here; It would be nice to have music in the page so that the reader can listen to the music while browsing the article, which is exactly what we want. There are ways to solve the former problem, such as clicking a link to open another browser TAB to open a new page without interrupting the music, but it always feels a bit overkill. Readers can’t read your blog and take up a bunch of tabs.

NetEase cloud music external chain

This is the simplest way to generate the external chain of player through the official website of NetEase Cloud Music.

You can configure some properties yourself, and then automatically generate the configuration code, put it in your blog, and paste it in your post wherever you want

The advantages and disadvantages of screenshots also have, but online also said that such a way will affect SEO, the specific principle is not quite clear. In short, simple and convenient, but NetEase logo can not be removed.

aplayerAdd music

This is HEXO’s most popular and well-known player, and Dpleyer is used for video playback, but we won’t talk about it. Install the aplayer dependency first. Switch to your blog root directory and run NPM install aplayer –save. Parameters will not be explained to you one by one, official documents are available, I only provide an example here.

Add music to the page
{% aplayerlist %} {" the autoplay ": true," showlrc ": 0," mutex ": true," music ": [{" title" : "에 필 로 그 (Epilogue)", "author" : "Taitaes 준"," URL ": "https://molier-1256056152.cos.ap-guangzhou.myqcloud.com/%E1%84%8B%E1%85%A6%E1%84%91%E1%85%B5%E1%86%AF%E1%84%85%E1%85%A9 %E1%84%80%E1%85%B3.mp3", "pic": "https://y.gtimg.cn/music/photo_new/T002R300x300M000000RmZHf3qhLUL.jpg?max_age=2592000", "lrc": "Https://lyrics.lrc"}]} {% endaplayerList %}Copy the code

Insert the above code anywhere you want in the article

PIC is the link that shows the picture of the song. You can see that music is an array, so if you want to add a list, you just add a song dictionary to the array. Suggest lyrics LRC should use URL form, otherwise TXT format may want to edit dead. Many people ask where the MP3 link of the song comes from. This is actually very simple, first of all to download the songs and then upload to seven niuyun can be born into the chain in seven Niuyun, seven niuyun has free storage space, only songs enough. The lyrics URL

Add music to the sidebar

Actually, as I mentioned before, it’s not recommended to add it to the sidebar, but here it is. The first thing to do is find in node_modules directory APlayer. Min. Js file, copy it to the theme/next/source/js/SRC/directory. Then open the sidebar. Swig file in the theme/ Next /layout/_custom/ folder and add the following code to it:

<div id="player1" class="aplayer"></div> <script src="/js/src/APlayer.min.js"></script> <script type="text/javascript"> var ap = new APlayer({ element: document.getElementById('player1'), // Optional, player element narrow: false, // Optional, narrow style autoplay: false, // Optional, autoplay song(s), not supported by mobile browsers showlrc: 0, // Optional, show lrc, can be 0, 1, 2, see: ###With lrc mutex: true, // Optional, pause other players when this player playing theme: '#e6d0b2', // Optional, theme color, default: #b7daff mode: 'random', // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation` preload: 'metadata', // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto' listmaxheight: '513px', // Optional, max height of play list music: [ { // Required, music info, see: ###With playlist title: 'Sometimes When We Touch', // Required, music title author: 'Oliveia', // Required, music author url: 'https://molier-1256056152.cos.ap-guangzhou.myqcloud.com/SometimesWhenWeTouch.mp3', // Required, music url pic: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003LIDEL0NQInJ.jpg?max_age=2592000', // Optional, Music picture LRC: 'https://lyric.lrc' // Optional, LRC, see: ###With LRC}, {"title": "big ", "author":" week-length ", "url": "https://molier-1256056152.cos.ap-guangzhou.myqcloud.com/bigfish.mp3", "pic": "https://y.gtimg.cn/music/photo_new/T002R300x300M000004Y7V4s3ug4cC.jpg?max_age=2592000", "lrc": "Https://lyrics.lrc"}]}); </script>Copy the code

Just changed JS syntax, in fact, the principle, parameters are the same. Then perform three steps to see it. Note the browser cache, so refresh a few times to see it.

Lyrics, music outside the chain related

The song says that you can use the free storage function of Seven cows, but there is a problem that seven cows does not support HTTPS outside the song chain, which will cause people with SSL certificates to drop the green lock. In fact, if you have this demand, you can give up seven cows and switch to Cloud, so it is OK, the same operation.

You can take a look at this MeetingJS, which is actually a small package based on Aplayer to simplify the cost of accessing Aplayer, but since I introduced the steps of accessing Aplayer earlier, we’ll just use its lyrics API. ttps://demo.meting.api.meto.moe/action/metingapi? Server = Tencent&Type = LRC&ID =004OQ5Mt0EmEzv Seaver is a music platform including Baidu, NetEase, QQ music and other platforms

The ID field corresponds to the ID of the song and whenever you open up a link to the song page it should contain an ID. That’s how the play at the end of the article was added

The last

The whole article only explains how to build a blog in the beginning of a small part, the following are basically to give you how to optimize, adjust some details such as UI, user experience, of course, we can do far more than these, if you have any questions, please feel free to discuss with me. I’ll read all the messages below. In addition, this article will be constantly updated when I have new ideas about HEXO or how to play it. I hope you can follow my website. Thank you.

Liangcheng – Still

Word: plow tillage

Song: Xun

Arranger: Wang Baihong

Producer: Xun

Guitar: Liang Mingyi

Harmony written: Xun

Harmony: Xun/ Still

Sound engineer: Zhu Ge

Recording Studio: Hot Music Studio

Sound mixer: Shang Xiaojin

Mixing room: Hot Music Studio

When the sea breeze blows cool neon

Looking back, you are nowhere to be seen

Suddenly the old alliance was gone

The night is hazy

Wind, flowers, snow and moon like a dream

Remind me that I was in love

Suzhou river you took me through

The sunset on the Bund has been mottled in memory

The story goes silent

Drown in years

As I missing

After wandering

Standing in the rain watching you cross the ferry

The outline of a ship drifting off the shore

Melancholy provoke lights

The past is fading away

Those ups and downs

I am the one forgotten

When the sea breeze blows cool neon

Looking back, you are nowhere to be seen

Suddenly the old alliance was gone

The night is hazy

Wind, flowers, snow and moon like a dream

Remind me that I was in love

Tears cut my face

Floating in love

Across spring, summer and fall and winter

The city is full of traffic

Who knows my heart

Memories are more painful

why

The flourishing of the ten-mile foreign field is still

This scene can not hide my sadness

Have been with me

Fireworks in the old street

Predestination forever

Spend hard results

Who sings to me like a lotus under the moon

The bedside phonograph spoke slowly and silently

The cheongsam is in the corner

The heels are all broken off

The world of mortals he who sees through

You don’t appreciate me anymore

When the sea breeze blows cool neon

Looking back, you are nowhere to be seen

Suddenly the old alliance was gone

The night is hazy

Wind, flowers, snow and moon like a dream

Remind me that I was in love

Tears cut my face

Floating in love

Across spring, summer and fall and winter

The city is full of traffic

Who knows my heart

Memories are more painful

When the sea breeze blows cool neon

Looking back, you are nowhere to be seen

The old alliance was gone in a flash

Only the night is hazy

Wind, flowers, snow and moon dream

I was in love

Tears cut my face

Sink into this sea of misery

Across spring, summer and fall and winter

The city is full of traffic

My heart is not understood

Memories are more painful

In the LiangCheng

The city never sleeps

And your gentleness has fallen into disrepair

The lane complained of sorrow of parting

Moss marks are like wounds

I’m on the other

Waiting for you for a long time

  1. 1 LiangCheng
  2. 2 Love Story
  3. Three big fish