創作內容

92 GP

【js腳本】優化巴哈界面,文章列表「卡片化」(1.22 修復超連結失效的問題

作者:深海異音│2019-03-14 04:46:35│贊助:5,270│人氣:1859
1.22:修復超連結失效的問題
1.21:對應巴哈改變
1.20:微調物件順序,把標題挪到最上面,增加文章的辨識度
1.11:修正影片沒有標識的問題




沒什麼好解釋的
總之用了之後,文章列表就會變成一張一張的卡片










安裝方法


第一步:在瀏覽器安裝Tampermonkey,看你是什麼瀏覽器就點那個


Google Chrome: Tampermonkey

火狐: Tampermonkey

  

第二步,使用「深色主題」
可以用我寫的「JS腳本-巴哈深色主題
或用巴哈內建的深色主題也行


第三步:安裝js腳本





補充

因為縮圖模式目前巴哈還在測試階段,只要巴哈有變動版面,此腳本就會無法執行,所以安裝了之後,如果哪天突然跑版了,記得來提醒我修復腳本

因為無法得知圖片的size,所以從文章返回文章列表後,不能像之前一樣直接捲動到原本那篇文章的位置

引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4324411
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 17 篇留言

朽灰
好....

03-14 04:57

你剛剛說什麼
你要不要敢名叫深海福音,太厲害了

03-14 05:46

CToID
也太屌了ㄅ

03-14 06:19

搜嘎
超讚~~

03-14 08:45

雨丸★(黑魂模式)
辛苦了 ~
感覺花了很久的時間做出來的?

03-14 09:04

深海異音
2天吧
03-14 17:57
瑋弟
哇嗚

03-14 12:43

上官曼
本覺得應該挺雞肋的,實際一用效果還不錯,
畢竟卡片布局怎麼都比那種百度貼吧式的縮圖預覽有意義,
但更根本的說這種縮圖排版本身就很意味不明(我是指巴哈的),甚至作的比百度還差勁,貼吧還能不入主題、直接進行一定程度的放大,這邊居然沒辦法……真要看圖的話,這縮圖到底可以提供多大的點閱誘因呢……畢竟這才是縮圖的用意吧?無法理解。

不過回過頭來,若思考一下卡片布局的精神理念(如果這能算是一種理念的話)
私心認為目前您的設計布局,使用者無心關切的資訊優先度拉的太高了,
例如「誰發文的」、「閱覽次數」、「點讚數」,這些反而被排在卡片的最上端,而由於並沒有另外作點擊遮罩——我沒實際用過tampermonkey作過插件,並不曉得能多大程度重寫頁面,若有冒犯請見諒——實際上要點入主題,依然只能點擊標題或縮圖,以體驗來說不夠直覺快速。

另外,這點雖然並非是巴哈的功(而是卡片布局也就那樣),但首頁的card flow大抵就是我提的:
圖片與主題一般才是優先、之後才是發文者、之後是讚數,畢竟通常後兩者的優先度不會高於前兩者。

因為似乎是同業中人,請只將我當作一般使用者的意見回饋……

03-14 17:37

深海異音
這部分其實挺困擾的,把不重要的資訊放在後面確實有助於閱讀,但是整體排版上很容易變得奇怪。
不過這是很好的建議,也許可以設計成讓使用者自定義那些欄位要顯示或隱藏,甚至是排列順序。
03-14 17:47
深海異音
只是這會有另一個困擾的問題,該如何讓使用者設定?
可以設定成全域變數,讓使用者自行修改js腳本,但是一旦我發佈腳本的更新,使用者的設定就會被格式化。
或是我設計一個GUI界面給使用者進行設定,但是巴哈的網頁就會多出一個按鈕,也許會讓使用者感到煩躁。03-14 17:51
深海異音
我自己是比較傾向後者的方案,把按鈕放在不會影響操作或視覺的地方應該還是行得通的,
只是這個我要寫比較多程式碼,可能要有空才會想做03-14 17:56
上官曼
我是覺得丟給使用者重新設定排版的意義不大,
因為更多數的使用者並不關心這個才對(通常),而且對於這類使用者,安裝插件本身已經很辛苦了(在這之前你得先期待他們有脫離IE的魔掌)大眾使用者的需求一般比較簡單:直覺、快速、能夠幫助他/她找到想要的。

私心認為,應該先決定是圖片優先還是文字優先,我估計會是圖片優先較美觀,這會有點尷尬的地方是因為,這兩者在譬如一般遊戲討論版面以及如繪圖分享版帶來的感覺完全不同,一般遊戲,是文字佐以圖片,所以文字優先、配上圖你才看得懂圖在說啥,但是圖片分享版相反,是看了圖、你才會對文字產生共鳴或心得,而因為卡片布局一般是用在圖片優先的網站上,而你的插件畢竟是套在整個巴哈上,自然會有這種困擾、而別人不會有的。

決定上述優先序後,剩下我認為與pinterest的設計將別無兩樣,
<div class='card'>
<img>(圖)</img>
<span class='text>(限定高度的文字描述)</span>
<span class='user-info'>(讚、發文時間、作者)</span>
<div>

但,這是建立在你的設想之外的、無使用者設定的前提下…僅供參考

先下班,想到要補充啥在補充……

03-14 18:21

上官曼
其實我覺得現在的排版沒啥問題,另外我修正一下上面的想法,以巴哈的主要資料型態來看,文字優先更適用,如同你現在的配置

覺得只需要將info這欄div拉到底處即可,實際效果應該不會有太大問題,因為Pinterest 以前也是這種排版(我剛上去看,發現他們有改版過,所以我很難提供實際效果給你參考)

主題、文字、圖片、info這樣的視覺閱讀順序

03-14 18:44

深海異音
試試看這個
https://www.codepile.net/pile/4vJMb1OG03-15 03:41
玄暗烏黛墨縲黑黓焦皂
太猛啦!雖然這個用途可能只有炫炮而已,不過還是大力推一個

03-14 20:53

玄暗烏黛墨縲黑黓焦皂
看到上面的留言,我想全域設定可以採用 GM_setValue 來達成噢。因爲腳本更新只會變動到原始碼,額外的 storage 並不會格式化。僅供參考。

03-14 21:12

深海異音
是呀,就是要在另外做一個GUI界面給使用者設定
這個光用想的就覺得好麻煩03-15 00:39
玄暗烏黛墨縲黑黓焦皂
真的挺麻煩的。特別是深海大大對於呈現又十分講究。
如果感覺設定的界面塞哪都不對,可以考慮用個獨立的網頁表示。
以前曾經在別的腳本看過這種做法,不過還是逃不掉介面設計就是真的了XD
也許可以等到真的有使用者希望有這功能再來考慮也不遲(?

03-15 01:04

犬上黑子
又是你
每次都是你
就你最棒

03-15 19:50

(´奶Д子`)
這個挺讚的

03-19 23:34

Coco目を覚ませ!
最近用發現沒卡片化,可能巴哈更新了吧

04-09 19:44

深海異音
點進去後,更新就行了
https://greasyfork.org/zh-TW/scripts/380329-js-%E5%B7%B4%E5%93%88-%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8-%E5%8D%A1%E7%89%87%E5%8C%9604-09 23:22
如風之天牛

[e12]

06-19 23:47

ハンク
好像出了問題,點不進文章裡,正常會是哈拉版>點文章>跳進文章裡面
現在是哈拉版>點文章>跳回哈拉版
有修復的方法嗎?

10-01 21:54

深海異音
我正在修,晚點會釋出修復的更新10-01 21:58
我要留言提醒:您尚未登入,請先登入再留言

92喜歡★hbl917070 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:自己的玩具用學校的設備做... 後一篇:終於找到讓小屋背景圖,自...

追蹤私訊

作品資料夾

dan861015你好
歡迎來看看小說喔>////<看更多我要大聲說昨天23:23


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】