|
|
/ \5 @& c) P5 y# n1 k- \" o
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:
! h }7 C1 y$ e: m: e3 q
# |* n2 [! |* v9 a) o5 l1.下载主题文件
3 _" @ ~7 u& e4 l; Y( Z2 F( j/ ~
在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。
: N) a& {5 P3 L+ V3 U5 T5 s" ^. v# U1 N8 k8 e* ]
2.创建 Typecho 主题目录
# x7 O; z5 V" o+ v4 u' ~5 P& Y* d) F" `/ y: m S
在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。7 s! C9 S' Q3 k: z! Y
- d4 w5 s7 b; K; ]% h! u$ j
3.解压主题文件
5 E! }9 w/ i( j0 h7 M" |8 d( h* }" i; e- a9 Q+ b, J
将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:' c! ~- d8 s8 ] [& j" ?, U% F
" d/ ?% C% ]7 M) Q1 @0 r
assets/
! N: I! i0 H+ o: u( a/ r+ m3 ~: hdist/
7 p- r4 W/ H2 [! }4 I% m0 ninc/
! I2 [/ {3 X) A' B8 {node_modules/ x9 ~' C, X; i( N, x; c
partials/
1 k ~8 Q/ d. {6 s1 i6 Ntemplates/' S! b; q. H2 @4 E, Z
.babelrc- a7 z9 f _* n- A
.eslintrc.js8 ?; O8 @+ W% @1 w$ q/ g
gulpfile.js( n! S/ d' a& D. }9 s
package.json
) W, O4 D, R; T1 z3 c- B2 s/ o2 ]webpack.config.js
' E8 v* Z/ w2 v$ O4 L6 h4.修改主题样式表文件! b) n% H7 {! K5 z2 L, h0 B. Y
* {, e& X$ O! x* Y1 \) j
修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:8 M0 q* C/ z- x* i; ^7 ^
' Q% u8 I# E; W) p8 P9 O5 _+ {
css" d8 w0 M( O% g" f7 h
background-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');3 E0 ^& U$ M" c7 ~' x/ y# I9 U
修改为:
8 ], c6 u2 w' s0 H+ |; F# H/ U7 `4 ~( y7 ]
css
1 |; K' b4 @1 Y2 ]* [4 C7 T6 U& Xbackground-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');, b; {) c% C# I5 x- K$ `( ~
5.创建 Typecho 主题配置文件
( t# K" r# T/ D" ~/ v; k& |. a8 H% i) `! b6 }( C$ o t
在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:0 c3 V" B! O# a4 ]7 C; y2 f/ h- F1 n
& N# g3 r! M; v6 S5 c4 Z! E5 e. K
php
0 f2 R9 o8 p! r5 p2 j<?php
9 V% d+ h2 W- u4 {8 c( ereturn array(
8 `' I3 _2 e, h2 Y 'name' => 'Heropress Pro',
0 n9 v* A8 f- Q' V: i7 G 'description' => 'Typecho adaptation of Heropress Pro theme',' w/ H: u6 i# k* F. e7 p; I, O
'version' => '1.0',
; f! D, m' L2 f$ J4 ~5 Y 'author' =>'Your Name',
V4 o; E- D' ^0 [! g); F! n* m g1 q/ D2 ?9 ~3 c* U' L
6.配置主题布局文件
& s! j9 Y; j1 X% M6 B" ]$ U- W9 F- P4 [' O. S
在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:
& m6 D3 ?4 X6 ]. }% v1 x! ?& b9 n/ ^" @3 X, N) ` r9 N
php- v; h" v) u# z: ^
<?php while ($this->next()): ?>4 t2 v T) v$ k
<div class="post">
3 K' j- d4 b& Z: a; m# { <h2 class="post-title">
: T$ Z. E4 z m2 o. U& s( O <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
! J" z; X, J6 I, ? </h2>
; K# R4 j/ Z8 c6 F6 @' `) j <div class="post-meta">
) F9 k2 U) ?! t9 A+ q: D <span><?php $this->date('F j, Y'); ?></span>: Y5 U4 P- u+ z
<?php if($this->tags): ?>
$ r# }, r0 O" x <span class="post-tags">. C. b, A1 W! i) p
<?php $this->tags(', ', true, 'none'); ?>
- R0 V) V( p' e B </span>" }3 x) P* v, H C" Q
<?php endif; ?>& ~6 ]' m% I q
</div>; i; x& H# m/ h
<div class="post-content">$ I7 a% u& _$ G' C/ Z. E4 _- k& {
<?php $this->content('Read more »'); ?>
" o3 S* {0 H# y+ O </div>
5 Z) B" S3 n: @& w+ u" ]</div>+ a# a% T% U3 L. q6 B; n
<?php endwhile; ?>6 y/ S/ d! U% n) [( f6 i' q
7.调用 Typecho 函数- e3 j. F& j2 n* u6 o
6 H/ f5 Y0 y* f/ j# Z& z3 {) Z6 v
在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:, H! P& p2 B+ ]% y2 Z
3 p( G( @" a$ y- }& q
用 the_title() 替换 get_the_title()。
: w: X/ C6 m9 Q7 x- U1 [3 ?; A/ e9 z. M' B; Z% v' j6 R
用 the_permalink() 替换 get_permalink()。/ u/ M) Q( } E% r
! D0 l" ^, Q, E; y用 $this->date('F j, Y'); 替换 the_time('F j, Y')。9 H) f+ U5 `4 S# p
. }$ g. c* T2 p用 $this->content('Read more »'); 替换 the_content('Read more »')。
8 x6 D, S7 n" z& O/ J: H
' U1 {4 d% ?( A; ~8.添加 Typecho 标记" ^ t' i7 ]/ ]
1 B9 m }) x9 z) ^$ {4 ]
在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:6 v* B: }" m/ G, A) y( P8 H
5 q/ b4 H( V! N5 ~2 K
php
W% S. V+ a* r$ e# v% R<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>. x- N( ^' R! Z% N& Q
<?php $this->need('header.php'); ?>/ w+ }7 F2 \" w1 E" Q u. `# x( B
<div id="main" class="container">! I# ?# Z4 m; B, S$ w
<div id="content" class="row">, o* g. Q0 W! W7 B- I# K
<?php while ($this->next()): ?>
# y9 v' l; @6 O2 _8 u7 ^9 F <div class="col-md-8 col-md-offset-2">
C. Q/ U+ n' `" Q1 T4 `8 i <div class="post"> f& f1 Y- B7 h, S8 W! k7 r
<h2 class="post-title">
. Z1 B( Z: u5 h n, n0 P <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
O' A+ H4 H2 ~% a/ |6 _ </h2>$ I, Q% ~4 ~& ]( j1 V0 {2 p
<div class="post-meta">
6 ^- X! G& ]8 s) ?; R <span><?php $this->date('F j, Y'); ?></span>
8 Z; t& G4 ~; S1 i b8 R. Z8 y <?php if($this->tags): ?>
4 d9 w) S' n0 t( }% s4 j" u( d, w <span class="post-tags">; L: p" Q' u7 \; \
<?php $this->tags(', ', true, 'none'); ?>, Q/ F2 c0 X- r) n& `, u
</span>9 }3 ]! [# K" `- ], W7 y
<?php endif; ?>0 F& {% f( y2 X% H( A- F
</div>% o3 ~4 q. _9 b6 f1 Q
<div class="post-content">
* }" `6 u$ F, e9 y- H) j- | <?php $this->content('Read more »'); ?>% ]1 q) B* ^* c+ ]. ^; u
</div>" Q0 V) M: C3 H! q
</div>, K {! X: h1 H, X0 E1 i) Y
</div>( \( i, N% }. [0 }+ O& Z# J
<?php endwhile; ?>
+ U" K6 i( N: F( G' R1 e </div>
6 a, k9 g& `. @" ?+ Q$ l</div>2 z' d- v* o" T5 A a
<?php $this->need('footer.php'); ?>- {6 s. o0 m$ L( B6 t" }
9.调整其他可能需要的文件和代码
- ^* x& z b& x n& M0 |+ u
" x4 r2 o2 C: b& r, V根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:8 {! h* U5 @2 _' f( o
3 U# S$ y- J" r: r6 e/ b2 ~html
$ r- K! b) B8 o7 C* \5 s# o8 d0 K& }<title><?php $this->archiveTitle(array(
" o$ P- j7 @6 A; A) @ 'category' => _t('%s'),
+ d6 K8 I4 G" f" z% ~ 'search' => _t('Search "%s"'),+ l! B( [4 k; z
'tag' => _t('Tag "%s"'),
) E, W8 t- j/ J% W, M0 Y% v 'author' => _t('Author "%s"'),
O5 Z4 W9 P5 D# e1 o. m 'date' => _t('Archive "%s"'),/ z2 [6 Y+ f1 |& l/ A2 J0 H4 h9 P
'default' => ''
3 [9 \" `/ K) i% ~' t ), '', ' - '); ?><?php $this->options->title(); ?>- L# C( k, y* L
</title>6 j* \+ `" H. v/ j- Y4 M
10.使用主题
. R' a% l& d4 o0 E) s4 P1 P' P' x, E$ {* \5 m7 O% C+ Q5 I; Q
登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
2 I, G) K& V r
* u' ?# e6 Q" h6 a以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。
) i8 H3 y, M( s- R2 |! R: [, e% ~" D. `
|
|