{"id":119,"date":"2025-01-26T23:01:00","date_gmt":"2025-01-26T15:01:00","guid":{"rendered":"https:\/\/blog.liu-qi.cn\/?p=119"},"modified":"2026-04-18T21:36:21","modified_gmt":"2026-04-18T13:36:21","slug":"%e5%86%8d%e8%a7%81%e4%ba%86%e7%99%be%e5%ba%a6%ef%bc%81%e6%88%91%e7%94%a8ai%e6%89%8b%e6%90%93%e4%ba%86%e8%87%aa%e5%b7%b1%e7%9a%84%e4%b8%93%e5%b1%9e%e7%bd%91%e5%9d%80%e5%af%bc%e8%88%aa%e9%a1%b5","status":"publish","type":"post","link":"https:\/\/en.blog.liu-qi.cn\/2025\/01\/26\/%e5%86%8d%e8%a7%81%e4%ba%86%e7%99%be%e5%ba%a6%ef%bc%81%e6%88%91%e7%94%a8ai%e6%89%8b%e6%90%93%e4%ba%86%e8%87%aa%e5%b7%b1%e7%9a%84%e4%b8%93%e5%b1%9e%e7%bd%91%e5%9d%80%e5%af%bc%e8%88%aa%e9%a1%b5\/","title":{"rendered":"Farewell to Baidu! I Used AI to Build My Own Custom Web Navigation Page"},"content":{"rendered":"

There’s something a bit embarrassing to admit.<\/p>\n

I’ve actually been using the navigation feature on Baidu’s homepage for over a decade, specifically this thing:<\/p>\n

\"\"<\/p>\n

Image from the internet<\/p>\n

Because hao123 was too flashy, and I’m an old Tieba user, Baidu’s navigation was indeed more convenient. Over the years, I accumulated over 100 website bookmarks, and the cost of migrating them was too high. So even though I could deploy many excellent navigation apps via Docker on my NAS later, and even though Baidu forcibly inserted a bunch of junk news and Baijiahao content into the navigation section that I had no interest in, as long as it didn’t affect usability, I just tolerated it.<\/p>\n

But recently, Baidu, for some inexplicable reason, decided to redesign it. The entire navigation module became narrower, with only 6 icons per row, leaving a huge blank area displaying meaningless background images. Now, my 100+ websites are stacked across several pages.<\/p>\n

\"\"<\/p>\n

It’s absolutely absurd.<\/p>\n

At first, I thought there was some issue with my settings, but after searching for a long time, I couldn’t find any. I looked online and found that many others were complaining too.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

It’s really outrageous.<\/p>\n

This time, I decided not to sit back and take it anymore.<\/p>\n

Who knows what other nonsense Baidu’s **designers might come up with next?<\/p>\n

Give up Baidu and switch to a new navigation website.<\/p>\n

Actually, there have been alternatives before.<\/p>\n

But honestly, I’ve accumulated so many navigation websites over the years that the thought of re-entering and migrating them one by one is daunting.<\/p>\n

But times have changed, and in the era of AI, we can use AI methods to solve problems that were previously unsolvable.<\/p>\n

First, we can use AI to extract the original navigation categories and websites.<\/p>\n

The free DeepSeek-R1 can handle this task:<\/p>\n

\"\"<\/p>\n

In the navigation section of Baidu, right-click and select ‘Inspect’.<\/p>\n

\"\"<\/p>\n

Then copy all the front-end code of the entire section.<\/p>\n

\"\"<\/p>\n

You just need to tell the AI: ‘This is the front-end code of a navigation page. Please help me extract the categories, website names, and URLs from it.’<\/p>\n

\"\"<\/p>\n

It will automatically extract the categories, names, and links of the websites within.<\/p>\n

\"\"<\/p>\n

Next, you can have the AI complete the navigation page.<\/p>\n

This can be done in a Chat tool:<\/p>\n

Claude is recommended, as it allows for repeated modifications and adjustments in Artifacts and supports previewing.<\/p>\n

\"\"<\/p>\n

If you need changes, simply continue chatting.<\/p>\n

\"\"<\/p>\n

The back-end implementation can also be generated through conversation.<\/p>\n

Special note: If, like me, you don’t have much coding experience, it’s advisable to ask it to implement using relatively easy-to-deploy languages like Python or PHP.<\/p>\n

However, Chat tools always require copying and pasting and finding code locations, which can be cumbersome. For a more automated solution, you can also use AI programming tools:<\/p>\n

If you’re pursuing ultimate cost-effectiveness, you can use VS Code (Cursor actually works fine) with plugins like Roo Code or Cline, connected to the DeepSeek API, which is more than capable of writing simple pages.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

The usage is the same as using a Chat tool directly, which is through dialogue.<\/p>\n

I completed it directly through Cursor; its Composer feature can also automatically write and debug code across files, using the Claude 3.5 Sonnet model that I am very familiar with.<\/p>\n

\"\"<\/p>\n

During development, I even had it write a small tool to ping and send HTTP requests to over 150 websites I had accumulated over more than a decade, eliminating over a dozen that were no longer functional.<\/p>\n

The final result is shown in the image:<\/p>\n

\"\"<\/p>\n